Responsiveness
Five breakpoints, min-width everywhere, one context for viewport info.
Responsiveness
Five named breakpoints, min-width everywhere, one useViewport() for the whole app.
- 01
No more pixel-edge bugs
- No max-width / min-width collisions at 1024px
- No +1 / -1 offset dance
- One direction, one source of truth
- 02
Shared vocabulary
- "Tablet" means the same thing in Figma and in code
- Five named stops — xs · sm · md · lg · xl
- Five prototypes from design, no improvised widths
- 03
One owner for viewport state
- One useViewport() — not five competing isMobile answers
- UA sniffs and ad-hoc useMediaQuery calls retired
- Pick a breakpoint, use the context, done
- 04
Right product per device
- Mobile fetches less (e.g. MAX_PAGES.MOBILE = 5)
- Desktop uses the room it has (DESKTOP = 10)
- Not a desktop layout squeezed onto a phone
Less guessing, fewer bugs, and a product that actually behaves the same across devices — because design and code finally describe the same world.