Breakpoints
Sky UI provides a set of breakpoints that can be used to create responsive designs, they underpin our responsive props api.
Key | Value |
---|---|
xs | 0px |
sm | 480px |
md | 640px |
lg | 800px |
xl | 960px |
xxl | 1248px |
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.