Understanding Container Queries

An introduction to container/element queries using eq.js as presented to the St. Petersburg, Florida Front-End Meetup.

Transcript

1. Understanding Container Queries with Tim Knight
2. So… who am I? • Director of UX @ GravityFree 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
3. For tonight • What are element/container queries? • Why do we need them? Can’t Flexbox and CSS Grid do that? • What’s browser support look like? • Start using them now. With sample concepts to get you thinking.
4. What are they Creating context-aware and self-contained components
5. [T]here’s a divide growing between what our responsive designs need 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”
6. See Design Better Cards from Andrew Coyle What if you could design a better card pattern that 
 was truly flexible?
7. “Responsive” doesn’t solve it all As an industry we’ve gone to managing UI as a series of components and design systems, but media queries only let us define UI based the viewport. A container query let’s you define UI based on an element’s attributes (like width). This gives you flexibility in creating truly reusable and repeatable components.
8. Why Container Queries Can’t Flexbox & CSS Grid solve everything?
9. Flexbox and CSS Grid Layout provide great solutions for things like column management and reflowing 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.
11. Container Queries: Once More Unto the Breach by Mat Marquis
12. Browser Support What browsers are already supporting this concept?
14. So yeah…
15. What might they look like? @element "#sidebar:empty" { #sidebar { display: none; } #content { width: 100%; } } @element 'html,body' and (min-scroll-y: 150px) and (max-scroll-y: 90%) { aside { right: 0; pointer-events: all; opacity: 1; } } See Element Queries for CSS by Tommy Hodgins
16. But the reality is, we don’t know.
17. Start Using Them Now Thinking in container-level components
18. Available options • EQCSS - doing a lot of work on creating a technical spec. The previous examples comes from this polyfill. • *eq.js - a lot more lightweight than EQCSS. Unlikely to be similar to a final 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.
19. Using eq.js • A small JavaScript polyfill of 2KB • Uses a data attribute on the component to define sizes that can be selected using an attribute selector • Has a Sass mixin to make writing self- contained components even easier
20. Using eq.js <div class="card" data-eq-pts="half: 480, full: 960"> <div class="card__image"> <img src=“http://placehold.it/600x400" class="img-fluid"> </div> <div class="card__content"> <div class="card__desc"> <h1 class="card__title">Isn't that interesting</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="card__button"> <a href="" class="btn">Read More</a> </div> </div> </div>
21. This can’t be the best way to do this…
22. Demo How I build components using eq.js
23. References Want to dig deeper into the topic? These might help.
24. Articles • On Container Queries, by Ethan Marcotte • A 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
25. Questions?
26. Thank you! Now go off and write awesome self-contained components https://github.com/timknight/container-queries-presentation