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:

jsx

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:

jsx

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.

jsx

<Box background="lightest" padding={{xs: 4, lg: 6}}>
  <Stack space={{xs: 5, lg: 7}}>
    <Heading size={{xs: 3, md: 2}} component="h2">
      A responsive heading
    </Heading>
    <Copy align={{xs: 'center', sm: 'left'}}>Responsively aligned copy.</Copy>
    <PrimaryButton fullWidth={{xs: true, sm: false}}>A full-width button on mobile only</PrimaryButton>
  </Stack>
</Box>

<Box background="lightest" padding={{xs: 4, lg: 6}}>
  <Stack space={{xs: 5, lg: 7}}>
    <Heading size={{xs: 3, md: 2}} component="h2">
      A responsive heading
    </Heading>
    <Copy align={{xs: 'center', sm: 'left'}}>Responsively aligned copy.</Copy>
    <PrimaryButton fullWidth={{xs: true, sm: false}}>A full-width button on mobile only</PrimaryButton>
  </Stack>
</Box>

Components that surface responsive breakpoint props include:

Check them out for further usage examples.

Edit this page