Overview
Responsive layout systems fail when breakpoints are treated as device categories rather than content thresholds. A layout that breaks at 768px because "that is the tablet breakpoint" is not responsive — it is a layout that was designed for three device sizes and happens to work at two of them. A truly responsive layout breaks when the content requires it, not when a device category demands it.
The Responsive Layout System Prompt builds a layout architecture from the content outward — defining the grid that accommodates the widest and narrowest content, the breakpoints that are determined by content thresholds rather than device categories, and the spacing scale that maintains proportion across every viewport width.
What you get: - Grid system: the column model and gutter specification for every breakpoint range - Breakpoint model: the content-driven breakpoint definitions and the naming convention - Spacing scale: the token-based spacing system that maintains proportion across viewports - Layout pattern library: the four layout patterns that cover 90% of product screens - Content reflow rules: the order and visibility rules that prevent layout shifts from breaking reading flow - Container and max-width model: the constraints that prevent content from becoming unreadable at large viewports
Built for: product designers and front-end engineers designing responsive layout systems for web applications.