Skip to content

Latest commit

 

History

History
65 lines (56 loc) · 3.12 KB

README.md

File metadata and controls

65 lines (56 loc) · 3.12 KB
Raw

react-london-container-queries

https://github.com/FormidableLabs/spectacle

Draft

  • separate questions (titles) from answers on separate pages

  • introduction: my name, employer, WICG

  • // Disclaimer: my opinions might not represent the opinion of the whole group

  • A word on how designing social content was part of the inspiration for me to look for a solution.

  • ‎What is a Container Query?

  • basic description: container queries allow us to change styles based on a target element's size.

  • ‎What does it do?

  • ‎Explain by comparing to media queries, where the implicit query target is the viewport, while a container query has an explicit target. The same way media queries apply styles in the context of the viewport, I believe container queries should apply styles in the context of their target element. (in most cases you probably want to avoid affecting the styles outside of the container boundaries.)

  • ‎but... what is a Container though?

  • ‎for the sake of simplicity I'll spare you the history on where container query name comes from. A more react-like name would be: component-query, but that's just not what we call it, since it's not a react-specific idea.

  • ‎What are container boundaries?

  • ‎example on nestable media component, and illustration on the theory on how scoping would work.

  • Can I start using it today?

  • sort of. there are several plugins out there but if you're using react, I'd advise you to use my solution.

  • ‎Showing a dead simple demo featuring multiple and nested components, by walking through them making a Comment component with media queries (maybe using flexbox to showcase how well it works with container queries), then once we're done, we replace everything with @container, and by applying the HoC, everything just starts to work. (mention that there's a render-prop version, if someone likes that better)

  • ‎So... how does it work?

  • ‎show the basic idea with the postcss plugin and runtime combination, then showing practical guide about how to set up the postcss plugin configuration. (tip on how I apply different plugins for different css files to make container queries an opt-in feature)

  • ‎Last words, summary

  • ‎The plugin is a pet-project of mine (rfc, a lot of enhancements planned), while with container queries we aim to make it available to everyone.

  • ‎didn't like my version? give a chance to some of the other great solutions out there.

Original Abstract

Title: "@container queries in React"

  • The problem: in the advent of reusable components, we should be able to conditionally apply styling based on the space available to a given component.
  • Idea: @container queries in CSS, applied with a JS runtime.
  • Introducing react-container-query, example (Gifs / Videos).
  • Talk about the current WICG efforts to create a spec for browsers.
  • Before it's standardized: ResizeObserver, Houdini.
  • Mention other libs, polyfills and size-aware react component.

Prepare for Questions

  • Does it work with CSS-in-JS solutions?
  • Performance?
  • SSR?
  • Does it work in non-react environments?
  • Does it work with vue.js? Other component libs?