Breakpoints

Helping to control the fun.

Minimum and maximum screen sizes

The minimum and maximum screen sizes we support are:

• min: 320px
• max: 1140px

Viewports over the max screen size will show as a single centered 1140px column.

There’s a wonderful little mixin you can use, called full-width-container, which will automatically add our max-widths and margin behaviour for you.

.class {
  @include full-width-container();
}

Breakpoints

There are 4 major breakpoints: tiny, small, medium and large. You can use as many minor breakpoints as required.

Tiny is the minimum width a page can be.

If you need a change to happen in-line with major page changes (e.g. typography and nav bar) then you should use the medium and large breakpoints.

Otherwise you should add minor breakpoints where required.

How to use breakpoints:

• Start by viewing the UI at the small breakpoint
• Stretch the viewport horizontally until the UI breaks or doesn’t look great
• At the point the UI breaks, add a breakpoint to insert the styling required to fix

Major breakpoint values:

• tiny: 320px
• small: 360px
• medium: 768px
• large : 992px

How we use them

Major breakpoint values can be obtained by using the getBreakpoint($size) function, where $size is the English term for the size required.

How they look:

To add a medium breakpoint to an element:

.el {
    ...

    @media screen and (min-width: getBreakpoint(medium)) {
      ...
    }
}

Design Tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.

Some useful layout tokens

To copy any of the text values to your clipboard, click on the cell containing your required value.