Frontend Impl Responsive Layout Fluid

This skill defines a deterministic rule set for building a layout that scales fluidly from phone to ultrawide WITHOUT enumerating dozens of breakpoints. The core idea : design the type and space as continuous functions of width, and reserve breakpoints for the rare case where a layout MUST swap topology (sidebar collapses to drawer, multi-column collapses to single-column). The skill builds on [[frontend-syntax-css-container-queries]] (the @container surface), [[frontend-syntax-css-grid-subgrid]] (track sizing and subgrid), and [[frontend-syntax-css-nesting-logical-properties]] (RTL-safe spacing).

Sources : MDN: clamp() (verified 2026-05-19), MDN: viewport-percentage lengths (verified 2026-05-19), MDN: Container Queries (verified 2026-05-19), MDN: aspect-ratio (verified 2026-05-19), MDN: CSS Logical Properties and Values (verified 2026-05-19).

Quick Reference

Mobile-first authoring

ALWAYS author mobile-first with min-width media queries. Reasons :

1. The base CSS (no media query) is the smallest, simplest layout; progressively-enhanced rules add complexity only as viewport room allows.
2. min-width queries cascade naturally from small to large; the last matching rule wins.
3. Mobile-first CSS ships less code to the smallest devices (where bandwidth and CPU are tightest).