Documentation & Core

Breakpoints

Global breakpoints are available for consistent responsive behaviour, but module-specific breakpoints are also acceptable.

$bp-mobile-min 320px
$bp-mobile-max 479px

$bp-mobile-wide-min 480px
$bp-mobile-wide-max 519px

$bp-phablet-min 520px
$bp-phablet-max 639px

$bp-tablet-min 640px
$bp-tablet-max 767px

$bp-tablet-wide-min 768px
$bp-tablet-wide-max 1024px

$bp-desktop-min 1025px
$bp-desktop-max 1200px

$bp-desktop-wide-min 1201px
$bp-desktop-wide-max 1399px

$bp-site-min 1400px (site max-width)

Responsive helpers

Use respond_min() and respond_max() for short-hand media queries, using respective breakpoint variables.

Comes with added bonus of supporting an alternate fixed-width desktop stylesheet for browsers/devices that do not support media queries (e.g. IE8).

See https://jakearchibald.github.io/sass-ie/ for more info.

Buttons

/ default link

  .btn anchor

  .btn anchor over more than one line

  .btn--primary anchor

  .btn--invert anchor

  .btn--invert anchor

  .btn--text-invert anchor

Colors

Palette

$clr-white #ffffff

$clr-black #000000

$clr-grey-dark #363636

$clr-grey-mid #555555

$clr-grey-mid-light #dbdbdb

$clr-grey-light #e2e2e2

$clr-grey-warm #e9e6dc

$clr-orange #d14414

$clr-teal #2ea393

$clr-yellow #ffd141

$clr-purple #a54398

Helpers

Colour helpers provide background fill colour, text colour and link colour overrides. They can be applied either with .clr- class or clr-helper() mixin.

.clr-white link test
.clr-grey-light link test
.clr-grey-dark link test
.clr-yellow link test
.clr-teal link test
.clr-purple link test

Forms

Form validation is powered by jQuery Validate, see docs for usage guidance. Errors appear inline as you type, and an error summary list appears on form submit.

Fields marked with an asterisk* (required) are required.

There was a problem with the information you entered:

    This is a note about the field
    £
    Monthly
    Please select one option * (required)
    Please select multiple options * (required)
    Field group (slashed)
    Field group (dashed)
    Field group (dashed)

    Inline form example, no top-level errors

    Singlet form example

    Field toggling (will only validate if visible)

    There was a problem with the information you entered:

      Toggle conditional fields * (required)

      Icons

      Icons are provided through a custom icon font created via Icomoon. Use .icon-[name] in markup, or @extend .icon-[name] in Sass.

      Search

      Layout

      Layout helpers can be used via .layout classes in markup, or via the layout($max-width) mixin to max-width any content and align it centrally.

      .layout (1400px)

      .layout.layout--guttered (1400px, 20px gutters)

      .layout.layout--thin (960px)

      .layout.layout--tight (680px)

      .layout.layout--full (100%)

      Grid

      Note: classes are for demonstration only - for semantic grid, use mixins or roll your own class sets.

      1/12
      11/12
      2/12
      10/12
      3/12
      9/12
      4/12
      8/12
      5/12
      7/12
      6/12
      6/12

      Media

      Basic fluid image:

      Floated images:

      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.

      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.

      Responsive image:

      Figure image with caption:

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

      Fluid video embed:

      Fluid video embed with caption:

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

      Iframe:

      Typography

      Heading 1 Integer posuere erat a ante venenatis dapibus posuere

      Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      H2 Integer posuere erat a ante venenatis dapibus posuere velit

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      H3 Integer posuere erat a ante venenatis dapibus posuere velit aliquet

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      H4 Integer posuere erat a ante venenatis dapibus posuere velit aliquet nulla vitae elit libero a pharetra augue

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      H5: Integer posuere erat a ante venenatis dapibus posuere velit aliquet nulla vitae elit libero a pharetra augue donec id elit non mi porta gravida

      Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

      Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

      1. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
      2. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        2. Aliquam tincidunt mauris eu risus.
        3. Vestibulum auctor dapibus neque.
      3. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.
      4. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        2. Aliquam tincidunt mauris eu risus.
        3. Vestibulum auctor dapibus neque.
          1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
          2. Aliquam tincidunt mauris eu risus.
          3. Vestibulum auctor dapibus neque.
      5. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam.

      Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

      John - real story

      Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.

      Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna.