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 eight mobile-first breakpoints are:

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.

The mini breakpoint

An accessibility audit conducted in 2024 flagged that for users with 300-400% zoomed-in browser windows many of our components did not scale well, causing reflow and text clipping.

To address this, we introduced a new breakpoint called mini which is triggered at a minimum width of 240px. This additional breakpoint allows us to make more granular adjustments to our components to ensure they scale well at smaller sizes. Unfortunately, our naming scale did not allow for a more logical name for a breakpoint between xs and sm, so we settled on mini.

In a future iteration, we may consider renaming our breakpoints to better accommodate the mini breakpoint.

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.

<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:

• Box
• Stack
• Inline
• Column
• Columns
• Hidden
• Tiles
• Spacing
• Heading
• Button

Check them out for further usage examples.