Layout
Responsive layout, breakpoints and grids.
Breakpoints
Responsive tokens define breakpoints and media queries. They are based on screen size, not device type. Therefore, a mobile device or tablet will change layout based on breakpoints.
| Token | Default Value |
|---|---|
| breakpoints.small | 480px |
| breakpoints.medium | 768px |
| breakpoints.large | 1208px |
Media Queries
| Token | Default Value |
|---|---|
| mediaQueries.smallAndUp | @media screen and (min-width: breakpoints.small) |
| mediaQueries.mediumAndUp | @media screen and (min-width: breakpoints.medium) |
| mediaQueries.largeAndUp | @media screen and (min-width: breakpoints.large) |