Pattern Library

  • Typography
  • Headings
  • misc
  • Logo
  • Icons
  • Grid
  • form
  • Form Radio
  • Form Inputs
  • Form Checkboxes
  • Example Template
  • 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

    • Correct!
    • Not a valid response
    <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>