Responsive Components: Present & Future
summary
Four concrete techniques land now and next: three CSS patterns (flexbox wrapping that toggles row/stack at a container breakpoint, grid with repeat(autofit,minmax(…)) for gallery columns, and smart uses of clamp) plus a JS approach using ResizeObserver to toggle classes or custom properties. The future is container queries that require container-type/containment to break styling/layout loops so identical markup adapts by component width rather than viewport. Demos show same HTML changing layout and colors; browser support is partial so polyfills exist.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 3:35Techniques
- 9:58CSS Clamp
- 14:51Container Queries
- 17:14Why it took so long
- 19:39Create a container
- 21:03CSS
- 21:52Naming containers
- 22:20Browser support
- 23:00Query units
- 23:19Styles
- 23:55Ember Modifier
- 24:39Conclusion
