Show HN: A completely different way to write responsive, vanilla, CSS

#1

Post by JaneOri » Fri, Jul 17, 2020, 1:14 AM UTC

Show HN: A completely different way to write responsive, vanilla, CSS
propjockey.github.io

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#2

Post by James0x57 » Fri, Jul 17, 2020, 1:14 AM UTC

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.

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:

Minimal example: https://jsbin.com/giqedowale/edit?css,output

More involved example: https://jsbin.com/yicuqujehe/1/edit?html,css,output

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.

Anyway, it's totally free and open source too so hack away if you'd like! https://github.com/propjockey/css-media-vars

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!

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#3

Post by corporatehobo » Fri, Jul 17, 2020, 2:03 AM UTC

James0x57 wrote: post #2

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. 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: M…

This looks damn interesting! Very creative.

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#4

Post by cosmotic » Fri, Jul 17, 2020, 2:08 AM UTC

When I clicked to see vanilla CSS, an NPM package was not something I expected to see.

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#5

Post by wbobeirne » Fri, Jul 17, 2020, 2:10 AM UTC

cosmotic wrote: post #4

When I clicked to see vanilla CSS, an NPM package was not something I expected to see.

You're more than welcome to copy the code directly into your project (https://unpkg.com/css-media-vars@1.0.1/css-media-vars.css) or read the code, learn the technique, and implement it yourself. NPM is just one option for how to use the author's flavor of the technique.

Re: Show HN: A completely different way to write responsive, vanilla, CSS

#6

Post by [deleted] » Fri, Jul 17, 2020, 2:19 AM UTC

wbobeirne wrote: post #5

cosmotic wrote: post #4

When I clicked to see vanilla CSS, an NPM package was not something I expected to see.

You're more than welcome to copy the code directly into your project ( https://unpkg.com/css-media-vars@1.0.1/css-media-vars.css ) or read the code, learn the technique, and implement it yourself. NPM is just one option for how to use the author's flavor of the technique.