Say Hello to Box, Flex and Stack: Layouts in the Component Era
summary
Claim: full page layouts come from three primitives not custom CSS files. Uses React plus styled-system and styled-components, design tokens for colors/spacing, and responsive props to drive breakpoints. Implements a real interactive mock-up with only Box, Flex, Stack components, published on NPM, and shows intrinsic responsiveness (columns collapse without extra media queries). Demo and code are available; the approach replaces many handcrafted styles while keeping plain CSS properties and predictable tokens.
AI-written summary · about
chapters (5)
related talks
24mCreating layouts that last
30mDesigning with React
39mDesigning with Components
38mWriting highly reusable React components
18mBridging the gap between design prototyping and code
25mSimply React
21mDesign Systems 101: The Developer Approach to Better Frontends
19mHow to structure, style and document components for maximum effectiveness