Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sturobson/awesome-container-queries

A repo with links to posts of things around container queries.
https://github.com/sturobson/awesome-container-queries

List: awesome-container-queries

Last synced: about 1 month ago
JSON representation

A repo with links to posts of things around container queries.

Awesome Lists containing this project

README 

        
# Awesome-Container-Queries

A repo with links to posts of things around container queries.



## References



- [W3C CSS Containment Module Level 3](https://www.w3.org/TR/css-contain-3/)

- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries)

- [Platform Status](https://chromestatus.com/feature/6525308435955712)

- [Enable Container Queries in Chrome Canary](https://www.chromestory.com/2021/03/css-container-queries/)



## Polyfills 



- [Google Chrome Labs Polyfill](https://github.com/GoogleChromeLabs/container-query-polyfill)



## Articles



### 2021



- [A New Container Query Polyfill That Just Works](https://css-tricks.com/a-new-container-query-polyfill-that-just-works/)

- [12 Days of Web - Container Queries](https://12daysofweb.dev/2021/container-queries/)

- [A Cornucopia of Container Queries](https://css-tricks.com/a-cornucopia-of-container-queries/)

- [Media Queries in Times of @container](https://mxb.dev/blog/media-queries-in-times-of-container-queries/)

- [Container Queries Explainer & Proposal](https://www.miriamsuzanne.com/2021/05/02/container-queries/)

- [Next Gen CSS: @container](https://css-tricks.com/next-gen-css-container/)

- [Component-level art direction with CSS Container Queries](https://www.sarasoueidan.com/blog/component-level-art-direction-with-container-queries-and-picture/)

- [Can We Create a “Resize Hack” With Container Queries?](https://css-tricks.com/can-we-create-a-resize-hack-with-container-queries/)

- [Responsive design and container queries? Oh my!](https://ethanmarcotte.com/wrote/responsive-design-at-11-container-queries/)

- [CSS Container Queries For Designers](https://ishadeed.com/article/container-queries-for-designers/)

- [CSS Container Queries: Use-Cases And Migration Strategies](https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/)

- [Container Queries in Web Components](https://mxb.dev/blog/container-queries-web-components/)

- [Container Queries & The Future of CSS](https://www.oddbird.net/talks/responsive-components/)

- [A Primer On CSS Container Queries](https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/)

- [CSS Container Queries: A First Look + Demo](https://www.bram.us/2021/03/28/css-container-queries-a-first-look-and-demo/)

- [Say Hello To CSS Container Queries](https://ishadeed.com/article/say-hello-to-css-container-queries/)

- [What are container queries in CSS?](https://blog.logrocket.com/what-are-container-queries-in-css/)

- [Container Queries are actually coming](https://piccalil.li/blog/container-queries-are-actually-coming)

- [Container Queries: a Quick Start Guide](https://www.oddbird.net/2021/04/05/containerqueries/)

- [Why I think the upcoming CSS Container queries are GAME CHANGING ](https://dev.to/eddyvinck/why-i-think-the-upcoming-css-container-queries-are-game-changing-d4o)

- [The new responsive → Responsive to the container](https://web.dev/new-responsive/#responsive-to-the-container)



### 2020



- [Container Query Solutions with CSS Grid and Flexbox](https://moderncss.dev/container-query-solutions-with-css-grid-and-flexbox/)



### 2019



- [Let’s Not Forget About Container Queries](https://css-tricks.com/lets-not-forget-about-container-queries/)



### 2017



- [On container queries.](https://ethanmarcotte.com/wrote/on-container-queries/)



### 2013



- [Media Queries Are Not The Answer: Element Query Polyfill](https://www.smashingmagazine.com/2013/06/media-queries-are-not-the-answer-element-query-polyfill/)

- [Working around a lack of element queries](https://www.filamentgroup.com/lab/element-query-workarounds.html)

- [Element Queries](https://www.xanthir.com/b4PR0)



## CodePens and Examples



__note__: some of these examples may appear broken in browsers that support Container Queries due to changes in specification since the example was published.



- [Component Query Card Demo](https://codepen.io/una/details/LYbvKpK)

- [Container Query Starter](https://codepen.io/web-dot-dev/pen/LYzxgxP)

- [Container Queries with Polyfill and Grid](https://codepen.io/cahdeemer/pen/ExmeXgp)

- [Simplified CQ Card Demo in Grid with Polyfill](https://codepen.io/una/pen/MWvzQdR)

- [Container Query Bookstore](https://codepen.io/mxbck/pen/XWMrMOp)

- [Container Query Example](https://codepen.io/miriamsuzanne/pen/NWjNoGO)

- [Hero Image with CQ](https://codepen.io/una/pen/YzxwGxP)

- [Responsive Component Demo - Immediate Parent](https://codepen.io/una/pen/mdOgyVL)

- [CSS Container Query Playground](https://codepen.io/levente-frks/pen/gORKyXO)

- [CQ Height: Modal](https://codepen.io/miriamsuzanne/pen/ZEyXOKw)

- [Card Layouts with Container Queries](https://codepen.io/5t3ph/pen/rNjoyQB)

- [Responsive Icon Demo: Baby Clothes](https://codepen.io/una/pen/zYdJvvw)

- [Container Query Card Demo](https://codepen.io/una/pen/LYbvKpK)



- [Designcember](https://designcember.com)



## Resources



- [Miriam Suzanne's Sandbox](https://css.oddbird.net/rwd/query/)



## Videos



- [Container Queries are going to be a game changer!](https://www.youtube.com/watch?v=JsN_iE3prm0)

- [Desiging in the Browser - Container Queries](https://youtu.be/gCNMyYr7F6w)

- [CSS Container Queries are finally here!](https://youtu.be/BbRnVEalDJ4)

- [CSS Container Queries](https://youtu.be/Cxp4Vohm6Ec)

-