Breakpoints

Sky UI provides a set of breakpoints that can be used to create responsive designs, they underpin our responsive props api.

Usage

Breakpoint Function

The breakpoint() function returns a width in pixels, equal to the given breakpoint value.

import { breakpoint } from '@sky-uk/ui-core';

breakpoint('md');

// returns '640px'

You can return the breakpoint without a px suffix by passing false as a second argument. This is useful if you need to use the raw number for calculations.

breakpoint('md', false);

// returns 640

We can utilise the breakpoint() function to create media queries within our components.

const Example = styled.div`
  background-color: red;

  @media (min-width: ${breakpoint('md')}) {
    background-color: blue;
  }
`;

Breakpoints in responsive props

We can also pass objects to our component props to allow for responsive values.

<Box $bgColor={{ xs: "positive", xl: "negative" }} $padding={{xs: 4, lg: 5 }}>
  <Text $color="white">Responsive background color</Text>
</Box>