Published 2026-03-10 · 1 min read
Mobile-First CSS Architecture That Scales
Layer defaults, progressive enhancement, and fluid tokens so small screens stay fast while large screens earn refinements—not the other way around.
Global defaults
Mobile-first means your base stylesheet should work at 320px without waiting for JavaScript or desktop-only assumptions. Typography, spacing, and tap targets belong here.
Breakpoints as hints
Use breakpoints to add sophistication—extra columns, larger gutters, nuanced motion. UnitCraft exports quick snippets via the breakpoint calculator.
Fluid type and spacing
clamp() minimizes jumps between breakpoints: see Fluid typography explained and the corresponding fluid generator.
Combining intrinsic layout + fluid scales often removes “mystery media queries” that only tweak font-size by two pixels.
Frequently asked questions
- Do I need many breakpoints?
- Prefer fewer breakpoints when clamp() and intrinsic layouts (grid/flex) already absorb variance.