Breakpoints

Breakpoints give hooks for components and layouts to adapt and change in relation to the window size of the users device.

We use a mobile first approach to breakpoints, that means we use the min-width property for our media queries. This technique is used for applying basic layout styles first and then using breakpoints to adjust for wider screens.

Available Breakpoints

Breakpoint	Starts At	Definition	Description
0	480px	`min-width: 30rem`	Smaller screens like phones
1	768px	`min-width: 48rem`	Medium sized screens like tablets
2	1024px	`min-width: 64rem`	Large screens like laptops
3	1200px	`min-width: 75rem`	Larger screens like a desktop monitor
4	1440px	`min-width: 90rem`	Wider screens

There are a few ways to use the breakpoints, for simpler responsive behaviors you can use them as an array of values inline like

My background changes color as you resize the window

<Box bg={['green', 'blue', 'red', 'purple']} p="xxlarge" color="white">
  My background changes color as you resize the window
</Box>

<Box bg={['green', 'blue', 'red', 'purple']} p="xxlarge" color="white">
  My background changes color as you resize the window
</Box>

Another option if you are writing more complex responsive behaviors you can access the breakpoints from the theme and use them a styled block

const ResponsiveBox = styled(Box)`
  background: green;
  // make the background red at breakpoint[0](480px)
  @media (min-width ${(props) => props.theme.breakpoints[0]}) {
    background: red;
  }
  // make the background red at breakpoint[1](768x)
  @media (min-width ${(props) => props.theme.breakpoints[1]}) {
    background: blue;
  }
`