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. 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
  2. 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.
  3. 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”
  4. 6.

    See Design Better Cards from Andrew Coyle What if you

    could design a better card pattern that 
 was truly flexible?
  5. 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.
  6. 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.
  7. 10.
  8. 13.
  9. 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
  10. 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.
  11. 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
  12. 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>
  13. 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
  14. 26.

    Thank you! Now go off and write awesome self-contained components

    https://github.com/timknight/container-queries-presentation