The rebrand is live!
💅 🎊
Read about it here
Skip to content

Breakpoints

Breakpoints underpin our responsive strategy for the entire system. Breakpoints are used internally by the majority of components and are often exposed externally to allow responsive configuration. Our layout components, grid, spacing, headings and buttons all accept responsive props based on these breakpoints.

For breakpoints we use the open source library styled-components-breakpoint developed by our good friend and former colleague James Newell.

Breakpoints

We have our own breakpoint sizes that are defined in our Theme component. styled-components-breakpoint knows to look to the theme for these breakpoint sizes.

Our seven mobile-first breakpoints are:

NameSizeClassification
xs≥ 0mobile
sm≥ 480pxmobile
md≥ 640pxtablet
lg≥ 800pxtablet
xl≥ 960pxdesktop
xxl≥ 1200pxdesktop
xxxl≥ 1600pxdesktop

These are the only breakpoints that should be used for responsive styling. If your UI requires additional non-standard media queries you should work with your designer to see what solutions are possible working within the system.

Mobile-first

We encourage a mobile-first approach when designing responsively. Given the relative screen real estate available to mobile devices, a mobile-first methodology implies you ensure effective and complete functionality in a mobile space, then scaling up for larger devices.

Our Mesh components in Figma typically contain variations for all or multiple breakpoints, designed to behave responsively within their expected range of pixel widths and/or heights. These generally correspond to equivalent variations in the React library, however designs should be validated in Playroom to ensure correct responsive behaviour.

Usage

Direct usage

To use breakpoints directly within a custom styled component simply import styled-components-breakpoint and use like so:

jsx
import breakpoint from 'styled-components-breakpoint';
const MyComponent = styled.div`
display: block;
{ /* From the sm breakpoint up, be flex */ }
${breakpoint('sm')`
display: flex;
`};
`;

Notice that we do not include a breakpoint for xs for the display: block styling as it is unnecessary and part of our mobile-first development approach.

This usage example will cover the majority of usecases. For rare exceptions, there is a second parameter:

jsx
import breakpoint from 'styled-components-breakpoint';
const MyComponent = styled.div`
{ /* Apply max-width from the sm breakpoint up until the xl breakpoint */ }
${breakpoint('sm', 'xl')`
max-width: 40rem;
`};
`;

In this example the second parameter avoids needing to add an additional breakpoint statement to "unset" the max-width at the xl breakpoint.

Usage via component responsive props

Many components expose external props that accept a single value (string, number, etc.) or an object of breakpoints.

A responsive heading

Responsively aligned copy.

jsx

Components that surface responsive breakpoint props include:

Check them out for further usage examples.