All Projects → ZeeCoder → Container Query

ZeeCoder / Container Query

Licence: mit
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Container Query

Element Queries Spec
A spec for a Container-Style Element Query Syntax
Stars: ✭ 375 (+215.13%)
Mutual labels:  query, module, component, responsive
Postcss Responsive Type
Automagical responsive typography, built on PostCSS
Stars: ✭ 363 (+205.04%)
Mutual labels:  responsive, postcss, postcss-plugin
Postcss Nested Props
PostCSS plugin to unwrap nested properties.
Stars: ✭ 58 (-51.26%)
Mutual labels:  postcss, postcss-plugin
Daggraph
Dagger dependency graph generator for Android Developers
Stars: ✭ 1,140 (+857.98%)
Mutual labels:  module, component
Easygrid
EasyGrid - VanillaJS Responsive Grid
Stars: ✭ 77 (-35.29%)
Mutual labels:  responsive, responsive-design
Postcss Alias
PostCSS plugin that allows you to create aliases for CSS properties
Stars: ✭ 47 (-60.5%)
Mutual labels:  postcss, postcss-plugin
Postcss Import
PostCSS plugin to inline @import rules content
Stars: ✭ 1,048 (+780.67%)
Mutual labels:  postcss, postcss-plugin
Flutterwebsite
The flutter.dev website recreated in Flutter. https://gallery.codelessly.com/flutterwebsites/flutterwebsite
Stars: ✭ 76 (-36.13%)
Mutual labels:  responsive, responsive-design
Postcss Icon
PostCSS plugin that adds `css icons` from icon sets
Stars: ✭ 20 (-83.19%)
Mutual labels:  postcss, postcss-plugin
Geotic
Entity Component System library for javascript
Stars: ✭ 97 (-18.49%)
Mutual labels:  query, component
Postcss Less
PostCSS Syntax for parsing LESS
Stars: ✭ 93 (-21.85%)
Mutual labels:  postcss, postcss-plugin
Rtlcss
Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
Stars: ✭ 1,363 (+1045.38%)
Mutual labels:  postcss, postcss-plugin
Rocssti
RÖCSSTI : pour démarrer vos CSS avec la patate !
Stars: ✭ 46 (-61.34%)
Mutual labels:  responsive, responsive-design
Dom99
Extend html with directives
Stars: ✭ 37 (-68.91%)
Mutual labels:  component, browser
Postcss Triangle
PostCSS plugin to create a triangle.
Stars: ✭ 57 (-52.1%)
Mutual labels:  postcss, postcss-plugin
Jcnavigator
A decoupled navigator framework of jumping between modules or apps for iOS development.
Stars: ✭ 33 (-72.27%)
Mutual labels:  module, component
Postcss Prefix Selector
Prefix all CSS rules with a selector
Stars: ✭ 75 (-36.97%)
Mutual labels:  postcss, postcss-plugin
Tailwindcss
A utility-first CSS framework for rapid UI development.
Stars: ✭ 50,879 (+42655.46%)
Mutual labels:  responsive, postcss
Postcss Banner
PostCSS plugin to add text banner and footer to resulting file
Stars: ✭ 13 (-89.08%)
Mutual labels:  postcss, postcss-plugin
Postcss Register Custom Props
PostCSS plugin that transforms custom property registration in CSS to JS
Stars: ✭ 20 (-83.19%)
Mutual labels:  postcss, postcss-plugin


Container Query

npm version build Coverage Status Greenkeeper badge

SauceLabsTestMatrix

A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.

🕶 Uses Resize Observer: Uses the native ResizeObserver implentation when available, and falls back to a polyfill to detect size changes. If you use Chrome, you can test how performant the plugin is with the native implementation. (Shipped in v64.)

📦 Bundler Support: Built with bundlers in mind, like Parcel, webpack and Browserify.

🎲 Component Support: Built with component-based libraries in mind, like React, Vue, Ember and Angular.

📄 Intuitive Syntax: Uses at-rules, the same way @media queries do: @container (...) { ... }

🎉 Container Units: rh, rw, rmin, rmax, which are relative to the container element's width and / or height. (Same way viewport units are relative to the viewport's size.)

Cross-Browser Testing: Sponsored with ❤️ by SauceLabs.

Introduction

Container queries are very similar to media queries; they allow you to apply styles to elements when certain conditions are met.

The key difference is that while media queries are relative to the viewport's size, container queries are relative to a container element's size.

Thanks to this trait, you can have multiple instances of the same container element, all of which changes its own- and its childrens' styles based on the containing element's size.

What is a Container?

A container is just an HTML element, which may (or may not) contain other elements.

You may want to think of them as "Components" (React) or "Blocks" (BEM).

Demos

The best way to understand the concept, is if you try it for yourself.

Note that because these demos are hosted on CodeSandbox, where webpack or PostCSS cannot (currently) be configured, styles are simply imported as strings and processed in the browser. (Using @zeecoder/cq-demo-utils.)

While this works for demo purposes, in a real application it is strongly recommended to process styles build-time, as later described in this documentation.

Documentation

What's Next?

Ideas for Enhancement

Support

Please consider supporting me if you like what I do on my Patreon page.

Thoughts on Design

In case you're wondering about the tool's design, here is a list of goals I had in mind with the initial implementation:

  • Should be tested,
  • Should use containers instead of elements (As opposed to other "element-query" libraries.),
  • Should use a media query-like syntax so that it's familiar and easy to use,
  • Should uses PostCSS for preprocessing, instead of having a runtime parser,
  • Should be easy enough to use, but a transpiling step would be assumed (Due to the reason above.),
  • Should use ES modules, so it plays nicely with bundlers (Parcel, webpack Browserify, etc.) and with Component-oriented UI libraries (React, Vue, etc.),
  • Should work best with component naming methodologies, like BEM or SUIT, but should also work without them.

WICG

The WICG dived into 2018 with renewed effort to make native Container Queries a reality in browsers.

If you're interested in how things are progressing, please feel free to visit the following links, where the disussions are happening:

Related

Alternatives

If you like the idea of container queries, but are not particularly convinced by this solution, then I encourage you to look at these alternatives:

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].