Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

propjockey.github.io

Post reply on HN
Print view View original

41–48 of 48 posts

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

#41

Post by SiVal »

PetahNZ wrote: post #36
SiVal wrote: post #35

Earlier quoted context omitted.

I write vanilla CSS in 2020, but I suspect you're right in a "most people" sense. Still, I'm biased toward longer-lived approaches, meaning that whenever I can make it practical, I try to build with vanilla HTML, CSS, & JS with as few other technologies & libs as I practically can. Even my final HTML tends to be quite human-readable. Again, this won't work for many projects, but the point of it is long-term maintaina…

To be fair sass variables have been around much longer than css variables.

But it's not how long they've been around, it's whether they're built into standard browsers. Presumably, CSS variables can never be removed from standard browsers. They are permanently available in the web "toolchain". SASS can be replaced by something else. There will be workarounds, but it will probably be more of a problem.

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

#43

Post by frereubu »

agloeregrets wrote: post #38
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…

The upsell on browser support is a little misleading. Sure, it’s 94% worldwide supported..but what isn’t mentioned is that the 6% is entirely IE11 and down and that the browser support numbers are inaccurate as they don’t include places like China or sorts where IE spin-offs are extremely common. A much better way to say it is “supports almost all browsers except IE” it’s accurate (as this does support almost all bro…

Also depends on the industry sector you target. We target the third sector (charities, government, education, science, arts etc.) in the UK and regularly see ~10% IE11 use.

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

#44

Post by russdpale »

This is awesome, build steps in CSS are absurd if you really sit there and think about what the purpose of the browser is compared to what it used to be..

No build step should be the future of web development. The more steps that are added that require yet more tools to learn and more dependencies to maintain, the less inclusive and creative the web becomes. Hopefully we will one day be able to look back on this time period as an evil necessity.. I mean writing es6 and building to es5 is way better a lot of the time from a development perspective but on the face of it, its absurd and its why tooling gives people fatigue and turns away new promising developers for better programming languages.

I would definitely provide a way to download the css without npm first. Like big worm said, its about principalities.

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

#45

Post by James0x57 »

russdpale wrote: post #44

This is awesome, build steps in CSS are absurd if you really sit there and think about what the purpose of the browser is compared to what it used to be.. No build step should be the future of web development. The more steps that are added that require yet more tools to learn and more dependencies to maintain, the less inclusive and creative the web becomes. Hopefully we will one day be able to look back on this time…

Preach! I wholeheartedly agree.

The CSS file is in the repo: https://github.com/propjockey/css-media-vars/blob/master/css...

and the readme links to this in an example link tag: https://unpkg.com/css-media-vars/css-media-vars.css

NPM is for convenience. Can't expect people to jump out of the build env all at once, so providing a vanilla CSS solution as a package is a good way to start the transition. IMO /shrug

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

#46

Post by tobr »

James0x57 wrote: post #12
Rotten194 wrote: post #11

So I think I understand how this works? Correct me if I'm wrong... So I made this example: https://jsbin.com/meqibawotu/1/edit?html,css,output We have two "toggle vars", `--is-hovered` and `--is-special`, which are triggered by a hover selector and a class, respectively, though they could be triggered by anything (like a media query or JS). The "false" value for the toggle is "initial", so at the top I set: div { --i…

YEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional logic is possible. You can combine them in any way, &&, ||, !, it's all possible. You can see some more of my examples here: https://twitter.com/James0x57/status/1283912525248069632 https://twitter.com/James0x57/status/1283596399196680192 https://twitter.com/…

Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?

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

#47

Post by uxamanda »

tobr wrote: post #46
James0x57 wrote: post #12

Earlier quoted context omitted.

YEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional logic is possible. You can combine them in any way, &&, ||, !, it's all possible. You can see some more of my examples here: https://twitter.com/James0x57/status/1283912525248069632 https://twitter.com/James0x57/status/1283596399196680192 https://twitter.com/…

Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?

I was playing around with this here: https://jsbin.com/zebipenidi/1/edit and tried editing the keyword to other things.

When I tried other strings (my name, "null", other CSS "words" like opacity) it broke.

I wonder if this is because the initial variable definition needs to be valid css in order to be replaced?

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

#48

Post by uxamanda »

tobr wrote: post #46
James0x57 wrote: post #12

Earlier quoted context omitted.

YEP! Absolutely nailed it. That's what's up! I've been calling it Space Toggle. It does all kinds of stuff beyond toggle though - the whole world of conditional logic is possible. You can combine them in any way, &&, ||, !, it's all possible. You can see some more of my examples here: https://twitter.com/James0x57/status/1283912525248069632 https://twitter.com/James0x57/status/1283596399196680192 https://twitter.com/…

Can I ask, what’s the reason for using the keyword “initial”? As I understand it it could be any string that doesn’t accidentally create a valid value?

The OP tweet this about it [0], which links to the CSS spec [1]. It seems like a variable defined as initial triggers a different behavior than a traditional "syntax" error.

[0] https://twitter.com/James0x57/status/1283909866915074048

[1] https://www.w3.org/TR/css-variables-1/#invalid-variables

Post reply on HN