Breakpoints
Four widths, defined by content, not devices. Rems, so user zoom moves them.
| Breakpoint | What changes |
|---|---|
— < 40rem | phone — single column, stacked heroes, drawer nav |
40rem (sm) | big phone / small tablet — 2-up decks |
48rem (md) | tablet — footer grid gains the brand column |
64rem (lg) | desktop — split heroes, rails, the docs sidebar docks |
86rem (xl) | wide — rail ads, leaderboard slots |
u-md-down-noneu-md-up-noneu-lg-down-noneu-lg-up-none
the only responsive display utilities — resize to test