Responsive Components: Present & Future

on YouTube ↗28m

" summary

Explains how to make components respond to their own size using concrete patterns: layout-only tricks with flex-wrap + flex-basis, the holy albatross calc technique, and grid repeat(minmax(200px, 1fr)) for automatic columns; JS using ResizeObserver to toggle a class at 480px so any CSS property can change; mentions clamp is viewport-based only; describes container queries with container-type: inline-size and container-name, why loops broke earlier proposals, credits Miriam Suzanne, notes Chrome Canary support and the cq-fill polyfill by Jonathan Neal.

AI-written summary · about

" chapters (5)

1. 0:00Start
2. 5:08CSS Grid
3. 11:19WHAT ABOUT ELEMENT QUEN
4. 15:141. Create a Contair
5. 17:572. Style Childrere

" related talks

• 26mResponsive Components: Present & FutureJames Steinbach · EmberConf 2022
• 29mBuilding responsive CSS componentsZell Liew · Talk.CSS max-content Edition
• 40mFuture-Proofing Responsive Web Design in 2023Trung Vo · Voxxed Days Thessaloniki 2023
• 35mModern CSS Replacements for Better Responsive CodeKathryn Grayson Nanz · DevReach 2023
• 17mThe New Responsive: Web Design in a Component-Driven WorldUna Kravets · Google I/O 2021
• 48mSmart Layout Patterns with Modern CSSKevin Powell · SmashingConf New York 2024
• 52mModern CSS LayoutMichelle Barker · SmashingConf Freiburg 2022
• 22mThe next step towards a truly modular CSSMaarten Van Hoof · JSHeroes 2023