Studios • Front-End & UX Instructor with GDI • Organizer of Front-End Meetup • Front-End and Back-End Developer • Product and Service Designer • Business, Dev, and Design Consultant Tim Knight @timknight
to do, and the tools CSS gives us to meet those needs. We’re making design decisions at smaller and smaller levels, but our code asks us to bind those decisions to a larger, often-irrelevant abstraction of a “page.” — ETHAN MARCOTTE From “On Container Queries”
to managing UI as a series of components and design systems, but media queries only let us deﬁne UI based the viewport. A container query let’s you deﬁne UI based on an element’s attributes (like width). This gives you ﬂexibility in creating truly reusable and repeatable components.
like column management and reﬂowing content. However, there are often other considerations based on the component’s placement you’ll want to make. Contrast, hierarchy, or visual weight just to name a few.
on creating a technical spec. The previous examples comes from this polyﬁll. • *eq.js - a lot more lightweight than EQCSS. Unlikely to be similar to a ﬁnal implementation or technical spec. • Elementary - from the folks at The Filament Group. • react-element-query - because I knew you’d ask. • vue-element-queries - because it’s not always about React ;). • CSS Element Queries - another one that’s often recommended. • elementQuery - hasn’t been updated in 4 years.
Bit More on Container Queries, by Ethan Marcotte • Questioning Container Queries, by Paul Robert Lloyd • Container Queries: Once More Unto the Breach, by Mat Marquis • Container Queries, by Jeremy Keith