Style Guide

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.

Close

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
    col-1-3
    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...


    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.