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.
Breakpoints
We have our own breakpoint sizes that are defined in our Theme component, and are consistent across all brands. The breakpoint
utility is exported from our @nib/layout
package and it knows to look to the theme for these breakpoint sizes.
Our seven mobile-first breakpoints are:
Name | Size | Classification |
---|---|---|
xs | ≥ 0 | mobile |
sm | ≥ 480px | mobile |
md | ≥ 640px | tablet |
lg | ≥ 800px | tablet |
xl | ≥ 960px | desktop |
xxl | ≥ 1200px | desktop |
xxxl | ≥ 1600px | desktop |
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 breakpoint
and use like so:
import {breakpoint} from '@nib/layout';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:
import {breakpoint} from '@nib/layout';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.
Components that surface responsive breakpoint props include:
Check them out for further usage examples.