Breakpoints

Overview

BigDesign exposes a set of breakpoints and breakpointValues that can be used to create responsive layouts and components. Our breakpoints include mobile, tablet and desktop. For each breakpoint, the breakpoint values are 0px, 720px, 1025px and 1500px respectively.

Implementation

Most utility components contain responsive props. You can pass in an object with breakpoints as keys to provide values at each breakpoint. BigDesign is mobile-first in nature, so bigger screen size values will override smaller ones.

Edit the code below to see your changes live!

<Box
  padding={{
    mobile: 'none',
    tablet: 'small',
    desktop: 'xLarge',
    wide: 'xxLarge',
  }}
>
  This box has responsive props!
</Box>

Do's and Don'ts

Do
Use built in responsive props, where applicable.