Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Understanding Container Queries

2722012beb9afcad75df5c9f2229fd8c?s=47 Tim Knight
September 14, 2017

Understanding Container Queries

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

2722012beb9afcad75df5c9f2229fd8c?s=128

Tim Knight

September 14, 2017
Tweet

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.
  10. None
  11. Container Queries: Once More Unto the Breach by Mat Marquis

  12. Browser Support What browsers are already supporting this concept?

  13. None
  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