Layout decision helper
Choose between Grid, Flexbox, Subgrid, and container queries based on the behavior the component needs.
Demos
CSS demos and decision tools
Each demo is static, inspectable, and focused on one production behavior.
Use these when a CSS choice is easier to evaluate by changing inputs than by reading another snippet. Each demo pairs with a guide so the visible behavior connects back to a maintainable implementation decision.
Specificity and cascade visualizer
Compare selectors and see why source order, layers, and specificity should be treated as separate levers.
Responsive type scale playground
Tune reading measure, heading size, and line height without hiding the constraints from the page.