Dev. Site Style Guide

On this page I have prepared a simple list of all pre-configured text and heading types, from H1~H6 and also the standard paragraph text (this is actually a H2 subheading).

I'm a mere mortal - the humble paragraph of text.

Continued...

Speaking of which.. it's important that we demonstrate bold emphasised text and also some linked text as well, although it is usually Good Practice to keep both of those to a sensible minimum. In doing so preserving a clean, uncluttered layout but also satisfying Google's demand for a sufficient number of internal and external links.

Oops. I nearly forgot to show how italicised words appear too. Oh and in case you were wondering this body text is 16px in size, which is the base recommended by most Accessibility guidelines.

Headings

With HTML we have 6 heading sizes at our disposal (although typically we won't need to go beyond H3 or else a page can end up looking a mess).

Hello. I'm H1 48px with a link

With a short paragraph underneath, just to space them out on this demo.

Hello. I'm H2 36px with a link

With a short paragraph underneath, just to space them out on this demo.

Hello. I'm H3 24px with a link

With a short paragraph underneath, just to space them out on this demo.

Hello. I'm H4*

Hello. I'm H5*

Hello. I'm H6*

*unlikely to be needed.

Blockquotes

Blockquotes can be very useful to deliberately over-emphasise a key message on any given page or post. The End User (i.e. editor) doesn't need to do anything in order to apply this formatting (beyond selecting the desired text on the editor and clicking the blockquote symbol - that's it!). Optionally he/she can then also make selected words bold too.

If you have something to shout about, best use a blockquote!

Blockquotes can also contain pre-formatted links

Bullet Lists [coming soon - unformatted]

From time to time the site content may well include bullet lists. Here are couple of preformatted examples:

  • The Beatles
    • John Lennon
    • Paul McCartney
    • George Harrison
    • Ringo Starr
  1. Sugar
  2. Flour
  3. Lemon Juice
  4. Salt
Please share: