Styleguide

1 - Atoms

1.1 - Buttons

Inputs, buttons, and links that look like buttons.

1.1.1 - Default button

Styles applied by default to all button elements and type="button" elements. Can also be applied to other elements such as links with class button.

Disabled states on button and input elements can be set with the disabled attribute. Links, however, do not have a disabled property.



Link with button style 
<button>Button element</button>
<button disabled>Disabled button</button><br>
<input type="button" value="Input type=button">
<input type="button" disabled value="Disabled input type=button"><br>
<a href="#0" class="button">Link with button style</a>
Source: src/atoms/_buttons.scss, line 8

1.1.2 - Block button

Makes a button take up the entire width of it's parent

Link with button style 
<button class="button button--block">Button element</button>
<input class="button button--block" type="button" value="Input type=button">
<a href="#0" class="button button--block">Link with button style</a>
Source: src/atoms/_buttons.scss, line 201

1.1.3 - Icon button

For when there is only a single icon in a button. Typically used for smaller control sections with lots of buttons and can optionally use a tooltip for extra clarity.

<button class="button button--icon-only">
  <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="#fff"/></svg>
</button>
<button class="button button--icon-only tooltip" data-tooltip="user settings">
  <svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1536 1399q0 109-62.5 187t-150.5 78h-854q-88 0-150.5-78t-62.5-187q0-85 8.5-160.5t31.5-152 58.5-131 94-89 134.5-34.5q131 128 313 128t313-128q76 0 134.5 34.5t94 89 58.5 131 31.5 152 8.5 160.5zm-256-887q0 159-112.5 271.5t-271.5 112.5-271.5-112.5-112.5-271.5 112.5-271.5 271.5-112.5 271.5 112.5 112.5 271.5z" fill="#fff"></path></svg>
</button>
Source: src/atoms/_buttons.scss, line 258

1.1.4 - Large button

For a single, high priority action on the page. e.g. "add to chrome"



Link with button style 
<button class="button button--large button--primary">Button element</button>
<button class="button button--large button--primary" disabled>Disabled button</button><br>
<input class="button button--large button--primary" type="button" value="Input type=button">
<input class="button button--large button--primary" type="button" disabled value="Disabled input type=button"><br>
<a href="#0" class="button button--large button--primary">Link with button style</a>
Source: src/atoms/_buttons.scss, line 163

1.1.5 - Primary button

For when there is a primary or preferred option for the user to click.



Link with button style 
<button class="button--primary">Button element</button>
<button class="button--primary" disabled>Disabled button</button><br>
<input class="button--primary" type="button" value="Input type=button">
<input class="button--primary" type="button" disabled value="Disabled input type=button"><br>
<a href="#0" class="button button--primary">Link with button style</a>
Source: src/atoms/_buttons.scss, line 218

1.1.6 - Small button

Used in sidebars, or to de-emphasise a button due to low importance



Link with button style 
<button class="button button--small">Button element</button>
<button class="button button--small" disabled>Disabled button</button><br>
<input class="button button--small" type="button" value="Input type=button">
<input class="button button--small" type="button" disabled value="Disabled input type=button"><br>
<a href="#0" class="button button--small">Link with button style</a>
Source: src/atoms/_buttons.scss, line 182

1.1.7 - Text button

For an element that is semantically a button (as in it performs some javascript functionality), but visually looks like text. Useful for very low priority actions.



Link with button style 
<button class="button button--text">Button element</button>
<button class="button button--text" disabled>Disabled button</button><br>
<input class="button button--text" type="button" value="Input type=button">
<input class="button button--text" type="button" disabled value="Disabled input type=button"><br>
<a href="#0" class="button button--text">Link with button style</a>
Source: src/atoms/_buttons.scss, line 96

1.1.8 - Waiting button

A button with a waiting or loading state. Please only use the svg provided in the example.

<button class="button button--wait"><svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="25" cy="25" r="25"/><mask id="b" x="0" y="0" width="50" height="50" fill="#fff"><use class="stroke" xlink:href="#a"/></mask></defs><use stroke="#3D8D60" mask="url(#b)" stroke-width="6" xlink:href="#a" fill="none" fill-rule="evenodd" stroke-dasharray="18,8"/></svg> Loading</button>
<button class="button button--wait button--primary"><svg viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="a" cx="25" cy="25" r="25"/><mask id="b" x="0" y="0" width="50" height="50" fill="#fff"><use class="stroke" xlink:href="#a"/></mask></defs><use stroke="#3D8D60" mask="url(#b)" stroke-width="6" xlink:href="#a" fill="none" fill-rule="evenodd" stroke-dasharray="18,8"/></svg> Loading</button>
Source: src/atoms/_buttons.scss, line 134

1.2 - Forms

Inputs, textareas, and selects. The atomic parts of forms.

1.2.1 - Checkbox

Styles applied by default to checkbox type inputs.

Please note that display: block; is set by default on labels related to checkbox inputs so they always take up the full width of their containing element. The label must be directly adjacent to the input in order for the associated styles to work.

<input type="checkbox" name="checkbox" id="checkbox1" value="1" />
<label for="checkbox1"> checkbox 1</label>
<input type="checkbox" name="checkbox" id="checkbox2" value="2" />
<label for="checkbox2"> checkbox 2</label>
Source: src/atoms/_forms.scss, line 242

1.2.2 - Inline form element

Makes any form element inline (which means it won't take up 100% width of it's parent container). Useful for small forms.

<form action="javascript:void(0);">
    <label class="form-inline" for="option">Your role:</label>
    <select class="form-inline" id="option" name="option">
        <option value="1">Graduate</option>
        <option value="2">Post-doc</option>
        <option value="3">Professor</option>
    </select>
    <label class="form-inline" for="text">Some words:</label>
    <input class="form-inline" type="text" id="text" name="text">
    <button class="form-inline">Choose</button>
</form>
Source: src/atoms/_forms.scss, line 300

1.2.3 - Input

Styles applied by default to the following elements:

input[type="text"]
input[type="password"]
input[type="datetime"]
input[type="datetime-local"]
input[type="date"]
input[type="month"]
input[type="time"]
input[type="week"]
input[type="number"]
input[type="email"]
input[type="url"]
input[type="search"]
input[type="tel"]
input[type="color"]

Please note that display: block; and width: 100%; are set by default so these elements always take up the full width of their containing element. Use the grid to control form width.

Inputs should always have a label. Do not rely on placeholder only.

<label for="disabled">Disabled</label>
<input id="disabled" type="text" name="disabled" disabled>
<label for="name">Your name</label>
<input id="name" type="text" name="name">
<label for="password">Your password</label>
<input id="password" type="password" name="password" placeholder="default password input">
<input type="button" name="submit" value="submit">
Source: src/atoms/_forms.scss, line 41

1.2.4 - Label 

<label for="name">Your name</label>
Source: src/atoms/_forms.scss, line 7

1.2.5 - Radio

Styles applied by default to radio type inputs.

Please note that display: block; is set by default on labels related to radio inputs so they always take up the full width of their containing element. The label must be directly adjacent to the input in order for the associated styles to work.

<input type="radio" name="radio" id="radio1" value="1" />
<label for="radio1"> radio 1</label>
<input type="radio" name="radio" id="radio2" value="2" />
<label for="radio2"> radio 2</label>
Source: src/atoms/_forms.scss, line 226

1.2.6 - Select

We're adding some styling to these but different browsers will ignore some or all of these styles.

Please note that display: block; and width: 100%; are set by default so these elements always take up the full width of their containing element.

<label for="option">Choose an option</label>
<select id="option" name="option">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>
<label for="multiple">Choose multiple options</label>
<select multiple size="6" id="multiple" name="multiple">
    <option value="1">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
    <option value="4">option 4</option>
    <option value="5">option 5</option>
    <option value="6">option 6</option>
</select>
Source: src/atoms/_forms.scss, line 139

1.2.7 - Textarea

We set a minimum height and only allow vertical resizing

Please note that display: block; and width: 100%; are set by default so these elements always take up the full width of their containing element.

<label for="comment">Leave a comment</label>
<textarea id="comment" name="comment" placeholder="Your comment ..."></textarea>
Source: src/atoms/_forms.scss, line 202

1.3 - Links

The standard appearance and behaviour of links without any other class.

Links should always use clear messaging and accurately convey the meaning of the link. Avoid using an icon in a text link.

An example link 
<a href="#0">An example link</a>
Source: src/atoms/_links.scss, line 1

1.3.1 - Links with icons

When using an svg icon in a link, it should always be positioned before the text content of the link.

An example link with an icon 
<a href="#0" class="link-icon"><svg aria-hidden="true" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M1024 544v448q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h224v-352q0-14 9-23t23-9h64q14 0 23 9t9 23zm416 352q0-148-73-273t-198-198-273-73-273 73-198 198-73 273 73 273 198 198 273 73 273-73 198-198 73-273zm224 0q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z" fill="#fff"/></svg> An example link with an icon</a>
Source: src/atoms/_links.scss, line 70

1.3.2 - Inverse Links

An inverted link for when the background colour is does not provide suitable contrast

An example inverse link 
<div class="card card--banner">
	<a href="#0" class="link-inverse">An example inverse link</a>
</div>
Source: src/atoms/_links.scss, line 43

1.3.3 - Muted links

A muted link, for when the link is not as important as other links

An example link 
<a href="#0" class="link-muted">An example link</a>
Source: src/atoms/_links.scss, line 18

1.4 - Lists

The standard appearance of lists

1.4.1 - Description list

A list with items that have descriptions.

Song
A short metrical composition intended or adapted for singing, especially one in rhymed stanzas; a lyric; a ballad.
Book
A handwritten or printed work of fiction or nonfiction, usually on sheets of paper fastened or bound together within covers.
<dl>
    <dt>Song</dt>
    <dd>A short metrical composition intended or adapted for singing, especially one in rhymed stanzas; a lyric; a ballad.</dd>
    <dt>Book</dt>
    <dd>A handwritten or printed work of fiction or nonfiction, usually on sheets of paper fastened or bound together within covers.</dd>
</dl>
Source: src/atoms/_lists.scss, line 82

1.4.1.1 - Inline description list

Makes description lists inline

Song
A short metrical composition intended or adapted for singing, especially one in rhymed stanzas; a lyric; a ballad.
Book
A handwritten or printed work of fiction or nonfiction, usually on sheets of paper fastened or bound together within covers.
<dl class="dl-inline">
    <dt>Song</dt>
    <dd>A short metrical composition intended or adapted for singing, especially one in rhymed stanzas; a lyric; a ballad.</dd>
    <dt>Book</dt>
    <dd>A handwritten or printed work of fiction or nonfiction, usually on sheets of paper fastened or bound together within covers.</dd>
</dl>
Source: src/atoms/_lists.scss, line 113

1.4.2 - Inline list

Makes list items appear inline. Useful for a list of links in a sub nav.

<ul class="list-inline">
   <li><a href="#0">Terms and conditions</a></li>
   <li><a href="#0">Privacy policy</a></li>
   <li><a href="#0">Legal info</a></li>
</ul>
Source: src/atoms/_lists.scss, line 64

1.4.3 - Ordered list

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ol>
Source: src/atoms/_lists.scss, line 8

1.4.4 - Unordered list

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
Source: src/atoms/_lists.scss, line 25

1.4.5 - Unstyled list

Works with both ordered and unordered lists to remove the number or bullet point.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul class="list-unstyled">
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
Source: src/atoms/_lists.scss, line 46

1.5 - Typography

The standard appearance of typographic elements. All font sizes are calculated relative to a base size of 16px. Below a breakpoint of 767px the base font size is reduced to 14px.

1.5.1 - Blockquote

Blockquote with optional footer.

Lee Jordan 
<blockquote>
    <p>
        Blockquote with optional footer.
    </p>
    <footer>
        Lee Jordan
    </footer>
</blockquote>
Source: src/atoms/_typography.scss, line 137

1.5.2 - Code

When writing CSS you can use padding: 0; to remove padding

<p>When writing CSS you can use <code>padding: 0;</code> to remove padding</p>
Source: src/atoms/_typography.scss, line 240

1.5.3 - Emphasis

emphasised text 
<em>emphasised text</em>
Source: src/atoms/_typography.scss, line 125

1.5.4 - Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Source: src/atoms/_typography.scss, line 9

1.5.5 - Horizontal rule 

<hr>
Source: src/atoms/_typography.scss, line 166

1.5.6 - Text options

Modifiers for text

Default styling

muted text

text-success (success state)

muted text

text-warning (warning state)

muted text

text-muted (subtle highlight state)

muted text

<p class="[modifier class]">muted text</p>
Source: src/atoms/_typography.scss, line 180

1.5.7 - Paragraph

Paragraph

<p>Paragraph</p>
Source: src/atoms/_typography.scss, line 87

1.5.8 - Pre formatted text 

¯\_(ツ)_/¯  - hi!
<pre>¯\_(ツ)_/¯  - hi!</pre>
Source: src/atoms/_typography.scss, line 219

1.5.9 - Small

Small text is smaller in relation to the font size of the parent element, rather than a fixed value.

A heading with small text

This paragragh contains some small text to demonstrate

<h2>A heading with <small>small text</small></h2>
<p>This paragragh contains some <small>small text</small> to demonstrate</p>
Source: src/atoms/_typography.scss, line 99

1.5.10 - Strong

Strong text 
<strong>Strong text</strong>
Source: src/atoms/_typography.scss, line 113

1.6 - Utilities

Simple utility classes for common layout options to avoid the use of inline styles.

1.6.1 - Element floats

pull-right
pull-left
<div class="pull-right">pull-right</div>
<div class="pull-left">pull-left</div>
Source: src/atoms/_utilities.scss, line 47

1.6.2 - Margin reset

Most elements have some form of margin by default. This class removes margins.

Paragraph with no margin

<p class="margin-reset">Paragraph with no margin</p>
Source: src/atoms/_utilities.scss, line 124

1.6.3 - Text utilities

text-left

text-center

text-right

text-trim will trim text that would otherwide span across multiple lines, just like this really long paragraph which will now be finished with lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sem consequat, aliquet mi ac, condimentum ante. Integer dignissim quis lectus at imperdiet. Etiam accumsan convallis lectus quis rhoncus. Integer vel mollis arcu.

<p class="text-left">text-left</p>
<p class="text-center">text-center</p>
<p class="text-right">text-right</p>
<p class="text-trim">text-trim will trim text that would otherwide span across multiple lines, just like this really long paragraph which will now be finished with lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sem consequat, aliquet mi ac, condimentum ante. Integer dignissim quis lectus at imperdiet. Etiam accumsan convallis lectus quis rhoncus. Integer vel mollis arcu.</p>
Source: src/atoms/_utilities.scss, line 18