Style Guide Template

A template you can use to start building out your own style guides with.

Navigation Button

CSS selector:

.button-nav

Sample code:

<a href="#" class="button">Our Beers</a>

Rendered element:

Our Beers

In-text link

CSS selector:

.txtLink

Sample code:

<a class="txtLink" href="http://google.com">Default Link</a>

Rendered element:

Default Link

Submit Button

CSS selector:

.button-submit

Sample code:

<input class="button-submit" type="submit" value="Submit">

Rendered element:

Reset Button

CSS selector:

.button-reset

Sample code:

<a class="button-reset" href="#">Reset</a>

Rendered element:

Reset

Text Input Field

CSS selector:

.textInput

Sample code:

<form class="textInput"> Enter information:<br> <input class="textInput" type="text" name="inputField"> </form>

Rendered element:

Enter information:

Logo

CSS selector:

.logo

Sample code:

<p class="logo">DEEP FOREST BREWING</p>

Rendered element:

Headings - First Level

CSS selector:

.header1

Sample code:

<p class="header1">This Is The First Header Style</p>

Rendered element:

This Is The First Header Style

Headings - Second Level

CSS selector:

.header2

Sample code:

<p class="header2">This Is The Second Header Style</p>

Rendered element:

This Is The Second Header Style

Headings - Third Level

CSS selector:

.header3

Sample code:

<p class="header3">This Is The Third Header Style</p>

Rendered element:

This Is The Third Header Style

Paragraphs

CSS selector:

.pgph

Sample code:

<p class="pgph">Original West Coast Craft</p>

Rendered element:

Original West Coast Craft

Bulleted Lists

CSS selector:

.list1

Sample code:

<ul class="list1"> <li>This is a bulleted list</li> <li>This is a bulleted list</li> </ul>

Rendered element:

Numbered Lists

CSS selector:

.list2

Sample code:

<ol class="list2"> <li>This is a numbered list</li> <li>This is a numbered list</li> </ol>

Rendered element:

  1. This is a numbered list
  2. This is a numbered list

Main Navigation

CSS selector:

.button-nav

Sample code:

<a class="button-nav" href="#">Our Beers</a> <a class="button-nav" href="#">About Us</a> <a class="button-nav" href="#">Buy</a> <a class="button-nav" href="#">Contact</a> <a class="button-nav" href="#">Awards</a>

Rendered element:

Our Beers About Us Buy Contact Awards

Product Listing

CSS selector:

Sample code:

Rendered element:

(Image)

Standard or Seasonal?

Beer Name

IBUs / Alcohol Content

Flavour Description

(Taste Rating Infographic)

Ingredients

Website Grid Structure

CSS selector:

Sample code:

Rendered element:

Website Colour Swatches

CSS selectors:

.swatch1, .swatch2, .swatch3, .swatch4, .swatch5

Sample code:

<div class="swatch1"> </div> <div class="swatch2"> </div> <div class="swatch3"> </div> <div class="swatch4"> </div> <div class="swatch5"> </div>

Rendered element: