Style Guide

This is the style guide for this here website.

Colours

Primary

Secondary

Neutral

Utility

<h3 class="heading">Primary</h3>
<ul class="grid util-m-b-1 util-whitespace-reset">
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="primary"></div></li>
</ul>

<h3 class="heading">Secondary</h3>
<ul class="grid util-m-b-1 util-whitespace-reset">
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="secondary"></div></li>
</ul>

<h3 class="heading">Neutral</h3>
<ul class="grid util-m-b-1 util-whitespace-reset">
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="neutral" data-tone="0"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="neutral" data-tone="10"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="neutral" data-tone="20"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="neutral" data-tone="80"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="neutral" data-tone="90"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="neutral" data-tone="100"></div></li>
</ul>

<h3 class="heading">Utility</h3>
<ul class="grid util-m-b-1 util-whitespace-reset">
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="utility" data-tone="error"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="utility" data-tone="warning"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="utility" data-tone="success"></div></li>
    <li class="grid__item one-fifth"><div class="style-guide__colour" data-pallete="utility" data-tone="neutral"></div></li>
</ul>

Headings

This allows for heading elements to be sized irrespective of their depth or semantics.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading
This is a heading
<h1 class="heading">This is a heading</h1>
<h2 class="heading">This is a heading</h2>
<h3 class="heading">This is a heading</h3>
<h4 class="heading">This is a heading</h4>
<h5 class="heading">This is a heading</h5>
<h6 class="heading">This is a heading</h6>

Icons

Icons are used sparingly but are useful all the same. I'm using SVG background images on any element. A text description with the `.icon__label` is positioned off screen so that it can still be read by a screen reader.

Github Github

<p><span class="icon icon--github">Github</span>
<span class="icon icon--show-label icon--github">Github</span></p>

Inputs

<p><label class="label">Label</label>
<input type="text" class="text-input" /></p>

Messages

Display messages of all types.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="message message--neutral">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="message message--error">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="message message--warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<div class="message message--success">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Navigation

This is the main site navigation. The `.nav` pattern should be more reusable really, this should be `.nav--main`.
<nav class="nav">

	<ul class="list-reset"><!--
		--><li>
			<a class="active" href="/">
				Home
			</a>
		</li><!--

	 --><li>
			<a href="/portfolio/">
				Portfolio
			</a>
		</li><!--

	 --><li>
			<a href="/blog/">
				Blog
			</a>
		</li><!--

	--></ul>
</nav>
Back to top