Pattern Library

Headings
Here are the base styles for your typography.
Add class of lauren to use a replacement lauren ipsum font.
Heading 1
Heading 2
Heading 3
Heading 4
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi doloribus soluta sapiente error ullam rerum, cumque, odit animi saepe minus.
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

<p class="lauren">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi doloribus soluta sapiente error ullam rerum, cumque, odit animi saepe minus.</p>
```
Logo
All the icons are minified and smushed into a sprite that is included at the top of each page. You can then use an icon with the <use> tag.
This allows us to both minimise loading time and still edit the SVG attributes.
```
<svg viewBox="0 0 400 400" class="icon__logo">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__logo"></use>
</svg>
```

Icons

All the icons are minified and smushed into a sprite that is included at the top of each page. You can then use an icon with the <use> tag.

This allows us to both minimise loading time and still edit the SVG attributes.

<svg viewBox="0 0 250 156.493" class="icon__logo">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__logo"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__view">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__view"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__twitter">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__twitter"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__facebook">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__facebook"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__menu">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__menu"></use>
</svg>
<svg viewBox="0 0 100 100" class="icon icon__home">
    <use xlink:href="/imgs/sprite/icon-sprite.svg#icon__home"></use>
</svg>

Grid

Here are some options.

None-responsive: The grid system is based on fractions. You can specify a column width by adding a class of .column__c-of-12; c is any number between 1 and 12.

Responsive:

There are 4 options for a responsive grid.

Use column without any modifier for mobile size up to small.

small: this is for small devices. You set using the brakpoint mixin. This has 12 columns. EG: .column__6-of-12--small This will give a 50% element in the small size breakpoint

medium: this is for medium devices. You set using the brakpoint mixin. This has 12 columns.

large: this is for small devices. You set using the brakpoint mixin. This has 12 columns.

<div class="grid">
    <div class="column column__12-of-12"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__12-of-12--small column__6-of-12--medium column__6-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__12-of-12--small column__6-of-12--medium column__6-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__12-of-12--small column__4-of-12--medium column__4-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__6-of-12--small column__6-of-12--medium column__3-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__12-of-12 column__4-of-12--small column__4-of-12--medium column__2-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
    <div class="column column__6-of-12 column__4-of-12--small column__3-of-12--medium column__1-of-12--large"><span class="column_fill"></span></div>
</div>

Form Radio

Here are some options.

This uses a svg to replace the default checkbox styles.

.radio Add class of radio to the input

<form action="#" autocomplete="off">
    <ul class="radios">
        <li>
            <input type="radio" class="radio" name="radio--01" id="radio--01-01">
            <span></span>
            <label for="radio--01-01">Option 1</label>
        </li>
        <li>
            <input type="radio" class="radio" name="radio--01" id="radio--01-02">
            <span></span>
            <label for="radio--01-02">Option 2</label>
        </li>
        <li>
            <input type="radio" class="radio" name="radio--01" id="radio--01-03">
            <span></span>
            <label for="radio--01-03">Option 3</label>
        </li>
        <li>
            <input type="radio" class="radio" name="radio--01" id="radio--01-04">
            <span></span>
            <label for="radio--01-04">Option 4</label>
        </li>
    </ul>
</form>

Form Inputs

Here are some options.

.error This changes the input style to show the error.

.success This changes the input style to show sucess.

.message Add a div after the input and add the class of message.

disabled Add disabled to the input

<form action="#" autocomplete="off">
	<ul class="form-fields">
        <li>
            <label for="general">Text</label>
            <input type="text" name="general" id="general">
        </li>
        <li class="success">
            <label for="success">Success</label>
            <input type="text" name="success" id="success" value="A correct value">
            <div class="message">Correct!</div>
        </li>
        <li class="error">
            <label for="error">Inline errors</label>
            <input type="text" name="error" id="error" value="An incorrect value">
            <div class="message">Not a valid response</div>
        </li>
        <li>
            <label for="disabled">Disabled</label>
            <input type="text" name="disabled" id="disabled" disabled>
        </li>
        <li>
            <label for="email">Email</label>
            <input type="email" name="email" id="email">
        </li>
        <li>
            <label for="tel">Tel</label>
            <input type="tel" name="tel" id="tel">
        </li>
        <li>
            <label for="password">Password</label>
            <input type="password" name="password" id="password">
        </li>
        <li class="optional">
            <label for="textarea">Text box</label>
            <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea>
        </li>
    </ul>
</form>

Form Checkboxes

Here are some options.

This uses a span element to style and sit over the input, feel free to style.

.checkbox Add class of checkbox to the input.

<form action="#" autocomplete="off">
    <ul class="checkboxes">
        <li>
            <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-01">
            <span></span>
            <label for="checkbox--01-01">Option 1</label>
        </li>
        <li>
            <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-02">
            <span></span>
            <label for="checkbox--01-02">Option 2</label>
        </li>
        <li>
            <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-03">
            <span></span>
            <label for="checkbox--01-03">Option 3</label>
        </li>
        <li>
            <input type="checkbox" class="checkbox" name="checkbox--01" id="checkbox--01-04">
            <span></span>
            <label for="checkbox--01-04">Option 4</label>
        </li>
    </ul>
</form>

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Logo

Icons

Grid

Form Radio

Form Inputs

Form Checkboxes