Styles Toolkit

Breakpoints

All pages should be built for mobile devices and then improved for larger screen. We recommend all pages are functional for the following breakpoints:

Sass Mixin

To use the breakpoints we recommend to use the the breakpoint mixin

@include breakpoint(option){
    styles
  }

Mixin options:

Typography

h1 / .page-title

xs: 26px / 26px

sm: 42px / 40px

h2 / .title

xs: 20px / 22px

sm: 22px / 24px

h3 / .sub-title

xs: 17px / 19px

sm: 19px / 21px

Colours

$white

#FFF

$wild-sand

#F6F5F3

$concrete

#F3F3F3

$pampas

#F3F2EE

$solitude

#EAF5FC

$grey-chateau

#A5A5A5

$mercury

#D6D2CE

$iron

#CCC

$jumbo

#888

$monsoon

#787878

$dark-grey

#555

$armadillo

#4A4A4A

$tuatara

#434343

$black

#000

$orient

#056582

$bondi-blue

#0A89AF

$cerulean

#0CA6D4

$onahau

#BFDCEE

$aqua-squeeze

#E2F0F5

Helpers

Hiding Elements

.n-hidden classes are available for all break-points as modifiers.

<div class="n-hidden">Hidden for all devices</div>
<div class="n-hidden--xs-only">Hidden for xs devices only</div>
<div class="n-hidden--sm">Hidden for sm devices and bigger</div>
<div class="n-hidden--sm-only">Hidden for sm devices only</div>
<div class="n-hidden--md">Hidden for md devices and bigger</div>
<div class="n-hidden--md-only">Hidden for md devices only</div>
<div class="n-hidden--lg">Hidden for lg devices and bigger</div>
<div class="n-hidden--lg-only">Hidden for lg devices only</div>

Live Example

Retina Devices

.retina-only Show element on retina devices.

.retina-hidden Hide element on retina devices

Live Example

Sass Mixin

You could also use the Sass mixin:

@include retina(){
    styles
  }

Screen Readers

.sr-only class is available to hide text for visual users but allow users of screen-readers to see the content

<div class="sr-only">Hidden for all devices</div>

Live Example

SEO

If you are interested in learning more about SEO, please speak to our very own Laura Ireland

Further Reading

Hobo Web Tutorials are a great intro into some common topics