https://github.com/zeecoder/react-london-container-queries

https://github.com/zeecoder/react-london-container-queries

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/zeecoder/react-london-container-queries
• Owner: ZeeCoder
• Created: 2018-01-24T20:15:48.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-02-20T08:52:27.000Z (over 8 years ago)
• Last Synced: 2026-01-03T16:25:26.979Z (5 months ago)
• Language: JavaScript
• Size: 2.56 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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?