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
, and 1025px
respectively.
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' }}>This box has responsive props!</Box>
Do |
---|
Use built in responsive props, where applicable. |