Grids

We use a flexible grid that ranges from two to twelve columns, depending on the breakpoint. The columns are used to align content and ensure a consistent layout across the site. The margins and gutters around the columns are a fixed size.

The maximum content width is 1200px. Images and backgrounds can bleed to the width of the browser, but all other content must stay within the content grid.

Scale

As the columns expand across breakpoints, the gutters will always stay fixed at 20px.

Breakpoints (bp)

We have five breakpoints in order to deliver the best experience to our customers.

These breakpoints are:

320bp (320 to 599px)

Content 290px

Columns 2 x 135px

Gutters 20px

Margins (minimum) 15px

600bp (600 to 767px)

Content 556px

Columns 4 x 125px

Gutters 20px

Margins (minimum) 20px