Flexbox Holy Albatross - Algorithmic Layouts and Design Systems

Explore the innovative Flexbox Holy Albatross CSS layout technique in this 44-minute conference talk from CSS Day 2019. Dive into the world of algorithmic layouts as Heydon Pickering shares the story behind this peculiarly named method. Learn how to integrate this layout primitive into your design system using custom elements. Discover the evolution of the technique, from its initial concept to refinements like grid gap implementation. Gain insights into container queries, Shadow DOM, and the integration with JavaScript frameworks like React. Understand the advantages of this approach over traditional media queries for responsive design. Whether you're a seasoned front-end developer or new to CSS layout techniques, this talk offers valuable knowledge to enhance your web design skills.

Intro
What is Flexbox
Media queries
Container queries
First draft
Grid gap
Algorithmic layout
Shadow DOM
JSDOM
React