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.
Theme tokens
| Token | Default Value |
|---|---|
| breakpoints.small | 480px |
| breakpoints.medium | 768px |
| breakpoints.large | 1208px |
Media Queries
Theme tokens
| Token | Default Value |
|---|---|
| mediaQueries.largeAndUp | @media screen and (min-width: 1208px) |
| mediaQueries.mediumAndUp | @media screen and (min-width: 768px) |
| mediaQueries.smallAndUp | @media screen and (min-width: 480px) |