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. |