This is my styleguide. It's what I build first, and contains every reusable element on my website. A handy code reference, and an easy way to see if a style already exists.

The idea is to build as many of the elements as standalone as possible. This way you require less code because you're not repeating CSS, and also means you use better naming conventions.

There's not a ton of stuff in my styleguide as I purposefully kept this a very simple site, but they work well for any size site.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed est massa, pretium sit amet dictum et, this is an inline link condimentum nec sapien. Vestibulum ac fringilla justo, ut posuere erat. Integer a lacus magna. Morbi consectetur est id arcu tempus, sit amet maximus ex dignissim. Sed lorem eros, dictum vel hendrerit at, gravida in massa. Phasellus condimentum et lorem sit amet suscipit. Quisque eu arcu id magna eleifend dignissim eget eget tortor. Sed ultrices malesuada lectus, sed congue neque sagittis a. Donec ornare et ex ut tempor.

Donec lectus erat, vehicula non sollicitudin a, consectetur et purus. Vestibulum fermentum interdum condimentum. Quisque interdum odio eget vehicula accumsan. Pellentesque ut auctor sem. Duis sed tempor mi. Praesent rhoncus ullamcorper odio, in posuere urna commodo ut. Sed sagittis fringilla odio. Integer sit amet arcu scelerisque, faucibus metus vel, vehicula ipsum. Nam eget sem malesuada, faucibus arcu vel, molestie justo. Pellentesque tempus quam dolor, eu gravida dolor pretium sit amet. Vestibulum sit amet mollis nunc.

Button styles

A link with .button class Plain button with icon


  • A unordered list item
  • A unordered list item
  • A unordered list item
  • A unordered list item
  1. An ordered list item
  2. An ordered list item
  3. An ordered list item
  4. An ordered list item
  5. An ordered list item

Re-usable elements

Portfolio blocks

Callout blocks

This is a callout block to highlight an area of text.

This is a callout block with a list

  • Item 1
  • Item 2
  • Item 3

Image 2 column

Prague, Czech Republic

Interlaken, Switzerland

Image with caption

The Portsmouth Freelancers Meet website

Call to action

Hire me

I am currently available to take on new projects! You can get in touch via email or phone.

Email me +447788 563938