Return to Sky UI homepage

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

KeyValue
xs0px
sm480px
md640px
lg800px
xl960px
xxl1248px

For further information on working with Grids and Breakpoints, check out our Layout Guide.

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.