Style Guide

In-text link

CSS selector:

p > a

Sample code:

<p>This is an <a href="#">In-text link</a></p>

Rendered element:

This is an In-text link

Navigation Button

CSS selector:

.btn-addtocart

Sample code:

<button class="btn-addtocart">Add to Cart</button>

Rendered element:

Submit/Reset Buttons

CSS selector:

.btn-submit
.btn-reset

Sample code:

<button type="submit" class="btn-submit">Submit</button>
<button type="reset" class="btn-reset">Reset</button>

Rendered element:

Text Input Field & Label

CSS selector:

label
.form-addr

Sample code:

<form>
<label>Address</label>
<input class="form-addr" type="text" name="text">
</form>

Rendered element:

Headings

CSS selector:

h1, h2, h3

Sample code:

<h1>Heading h1</h1>
<h2>Heading h2</h2>
<h3>Heading h3</h3>

Rendered element:

Heading h1

Heading h2

Heading h3

Paragraphs

CSS selector:

p

Sample code:

<p>Paragraph (Khula). Lorem ipsum...</p>

Rendered element:

Paragraph (Khula). Lorem ipsum dolor sit amet, habeo ullum sadipscing at mel. Quo reque fabellas at, usu at eros iudico. Postea euripidis pro te, ad vitae petentium eloquentiam quo. Mei iuvaret aliquam at, est veri alienum eligendi ex. Ne cum nonumy graeci, eum ei quando essent persius, quis molestiae maiestatis at vis. Mucius fierent propriae usu in, pri ut ferri errem. At his utinam noluisse splendide, sit ut nullam moderatius, nam interpretaris signiferumque ea.

Bulleted Lists

CSS selector:

ul.bullet li

Sample code:

<ul class="bullet">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>

Rendered element:

  • Item 1
  • Item 2
  • Item 3
  • Item 4

Numbered Lists

CSS selector:

ol.number li

Sample code:

<ol class="number">
<li>Numbered Item 1</li>
<li>Numbered Item 2</li>
<li>Numbered Item 3</li>
<li>Numbered Item 4</li>
</ol>

Rendered element:

  1. Numbered Item 1
  2. Numbered Item 2
  3. Numbered Item 3
  4. Numbered Item 4

Main Navigation

CSS selector:

nav.main a

Sample code:

<nav class="main">
<a href="#">Styleguide</a>
<a href="#">Wireframes</a>
<a href="#">Citations</a>
</nav>

Rendered element:

Product Listing

CSS selector:

#gallery img

Sample code:

<div class="flex-grid"> <a href="#"><img src="img/1.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/2.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/3.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/4.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/5.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/1.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/2.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/3.jpg" alt="Chocolate"/></a> <a href="#"><img src="img/4.jpg" alt="Chocolate"/></a> </div>

Rendered element:

Grid Structure

CSS selector:

.flex-grid, .flex-item

Sample code:

<div class="flex-grid"> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> <div class="flex-item">1 / 12</div> </div>

Rendered element:

1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12
1 / 12

Website Colour Swatches

CSS selector:

.swatch

Sample code:

<p class="swatch c302215">#302215</p>
<p class="swatch c5B422C">#5B422C</p>
<p class="swatch FFFFFF">#FFFFFF</p>
<p class="swatch EDE7C2">#EDE7C2</p>
<p class="swatch F59E8C">#F59E8C</p>
<p class="swatch c5B899A">#5B899A</p>

Rendered element:

#302215

#5B422C

#FFFFFF

#EDE7C2

#F59E8C

#5B899A