Why the interest

By creating a style guide I can quickly see which design elements are used throughout the site.

This guide helps to keep the design uniform and reduce the amount of CSS code I write.

To learn more about this guide, see ‘About This Style Guide’ at the end of this page.

Color 1

$color-1-l5

$color-1-l4

$color-1-l3

$color-1-l2

$color-1-l1

$color-1

$color-1-d1

$color-1-d2

$color-1-d3

$color-1-d4

$color-1-d5

Color 2

$color-2-l5

$color-2-l4

$color-2-l3

$color-2-l2

$color-2-l1

$color-2

$color-2-d1

$color-2-d2

$color-2-d3

$color-2-d4

$color-2-d5

Color 3

$color-3-l5

$color-3-l4

$color-3-l3

$color-3-l2

$color-3-l1

$color-3

$color-3-d1

$color-3-d2

$color-3-d3

$color-3-d4

$color-3-d5

Color 4

$color-4-l5

$color-4-l4

$color-4-l3

$color-4-l2

$color-4-l1

$color-4

$color-4-d1

$color-4-d2

$color-4-d3

$color-4-d4

$color-4-d5

Color 5

$color-5-l5

$color-5-l4

$color-5-l3

$color-5-l2

$color-5-l1

$color-5

$color-5-d1

$color-5-d2

$color-5-d3

$color-5-d4

$color-5-d5

.color-light {background-color: fff;}
.color-dark {background-color: 000;}

Notes

Backgrounds: apply the class ‘color’ to the element: e.g. class=”color-1-l3″
Fonts: add ‘-txt’ to the color name: e.g. class=”color-1-l3-txt”

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Grid System

There are two types of rows: responsive in which the columns are 100% width on mobile devices, and fluid in which the columns do not change their % width across different devices (viewports).

One example is shown here.

1 Row – 3 Columns Fixed With Padding

col-1-3


<div class="row row-pad fluid-row-final color-2">
  <div class="col-1-3 fluid-col-1-3">
    <div class="align-center color-1">
      col-1-3
    </div>
  </div>
  <div class="col-1-3 fluid-col-1-3">
    <div class="align-center color-1">
      col-1-3
    </div>
  </div>
  <div class="col-1-3 fluid-col-1-3">
    <div class="align-center color-1">
      col-1-3
    </div>
  </div>
</div>

Show Code...

Hide Code...

Alignment

.align-left (includes margin right so there is space next to it)

.align-right (includes margin left so there is space next to it)

.align-center

Padding

Responsive

.pad

.pad-top
.pad-right
.pad-bottom

.pad-left

Fixed

.pad-fixed

.pad-fixed-top
.pad-fixed-right
.pad-fixed-bottom

.pad-fixed-left

Clearing

.clear

Font Stack

Default – Raleway, “Trebuchet MS”,”Lucida Grande”,”Lucida Sans Unicode”,”Lucida Sans”,Tahoma,sans-serif;

<code> – Monaco, Consolas, “Andale Mono”, “DejaVu Sans Mono”, monospace;

<pre> –“Courier 10 Pitch”, Courier, monospace;

Font Sizes

Default – The default font size is 16px (which is converted to REMs).

.tiny – 60% font size
Example: This text has a tiny font size applied to it.

.small – font-size: 80%

.big – font-size: 125%
Example: This text has a big font size class applied to it.

.size-x2 – 200%

.size-x3 – 300%

.size-x4 – 400%

.size-5 – 500%

Line Height

The default
line-height
is 1.6em
($phi*1em)

Paragraphs: line-height-compact

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id mollis est. Vestibulum eget justo elementum, dictum justo vitae, porttitor mauris. Nunc ut ipsum et est sodales ultrices eget sed ipsum.

Lists: list-compact

Item 1

Item 2
Item 3
Item 4

Blockquotes

A few different styles are available.
Default:

Here is a blockquote which is used to quote some text. It could be a sentence or two from a statement a person has made.

.blockquote-reverse :

Here is a blockquote which is used to quote some text. It could be a sentence or two from a statement a person has made. he text on this one is aligned to the right.

.blockquote-with-icon

Here is a blockquote which is used to quote some text. It could be a sentence or two from a statement a person has made. This quote shows the open quote icon.

Widgets

Tabbed Content

Use with limited content. Google doesn’t like too much content hidden. If required, multiple tabs can be added.

About This Style Guide

With the help of this guide, I can quickly choose which design elements to use throughout this site. I can also view any design changes right here.

Whilst some sites may keep their style guides private, I have published mine in case you are looking for ideas for your own site.

For more information and ideas on what to include in a style guide, there is a free version of the Web Style Guide online. The Bootstrap CSS guide, is a nice example of a style guide.

S R Hartley

Style Guide