Skip to content
Mesh

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:

NameSize
xs≥ 0
sm≥ 480px
md≥ 640px
lg≥ 800px
xl≥ 960px
xxl≥ 1200px
xxxl≥ 1600px

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.

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.