Show HN: A completely different way to write responsive, vanilla, CSS
I know the docs need a little love but I think this has potential to be a game changer for writing responsive CSS. It has named breakpoints, lets you write DRY selectors, doesn't rely on JS or any sort of build step, and if you're already used to seeing --css-variables it's easier to read/maintain too.<p>I've created a couple JS Bins if you want to play around with it a bit, resize the "output" pane to see it update:<p>Minimal example: <a href="https://jsbin.com/giqedowale/edit?css,output" rel="nofollow">https://jsbin.com/giqedowale/edit?css,output</a><p>More involved example: <a href="https://jsbin.com/yicuqujehe/1/edit?html,css,output" rel="nofollow">https://jsbin.com/yicuqujehe/1/edit?html,css,output</a><p>If you're familiar with CSS, it may seem like it's impossible for this to work without scripts, but while working on another project I realized in the CSS Spec for custom properties that combining a few small details they've highlighted, in a specific order, it makes it possible to do all kinds of things that have never been possible before in CSS. This is the first project I've released using the idea.<p>Anyway, it's totally free and open source too so hack away if you'd like!
<a href="https://github.com/propjockey/css-media-vars" rel="nofollow">https://github.com/propjockey/css-media-vars</a><p>I'll probably be refreshing this page for a while, so I'm happy to answer any questions or dive into the CSS Spec with you and talk about the tech if you're curious!