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

21–30 of 48 posts

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

#21

Post by rkagerer »

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…

dear god, how did we get here

(Neat trick I'm just weary of web languages that in practice feel like they're working against clarity)

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

#23

Post by JoshTriplett »

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…

Very impressive approach!

Do you have plans to build a full framework based on this? (Other than augmented-ui?)

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

#24

Post by 9935c101ab17a66 »

This is really cool. As I was writing some media queries today, I was yearning for a simpler solution.

Couple of nice-to-haves: - More examples (though I'm guessing this is really new, and they will come in time). - Guidance on best practices for variable naming (when an element has multiple responsive properties). I just ended up doing `--sm-property-name` for each variable.

Are you looking for contributors? I intend to use this approach for a project over the next few days, and I could help with the documentation.

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

#25

Post by esperent »

sm4sh wrote: post #18

Am I not getting this or is this just a slightly different way of using breakpoints like bootstrap some years ago? I think we've come full circle.

What makes this one different is that, for example, if you want to set the width, you just do it once. Other approaches (including bootstrap) you have to type "width" once for every break point where it's different.

The resulting code from this approach looks a little cleaner and nicer compared to bootstrap or normal CSS, at first glance. I'd have to test it before commenting further though.

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

#26

Post by esperent »

deltron3030 wrote: post #20

This breakpointless approach is interesting: https://utopia.fyi/

I use something similar on my own website and it's great. However, it's very limited - I've never seen it applied to anything except for text. It's likely that for most use cases you will need to combine this with at least some traditional breakpoints.

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

#27

Post by onion2k »

satvikpendem wrote: post #22

Making CSS Turing complete, nice. Now we can run entire websites with functionality even if we turn JS off. Maybe we'll even see CSS only programming frameworks.

I wrote a game in CSS to demonstrate what you can do with it - https://codepen.io/onion2k/pen/qBbKYee (no mobile because I was too lazy to make it responsive). CSS is very powerful, but you need to do some weird stuff to get interactivity.

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

#28

Post by progx »

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…

For vanilla css-writer it could be a game changer, but who writes vanilla css in 2020? SASS make it so easy to write complex css simple.

css-media-vars would be a game changer for me, if it will be possible to use one var and not define many varnames and put them together to one var.

Like your Example:

  --xs-width: var(--media-xs) 100%;
  --sm-width: var(--media-sm) 49%;
  --md-width: var(--media-md) 32%;
  --lg-width: var(--media-gte-lg) 24%;
  width: var(--xs-width, var(--sm-width, var(--md-width, var(--lg-width))));
If it would work something like this, it would be really awesome:

  --width: var(--media-xs) 100%;
  --width: ifundefvar(--media-sm) 49%;
  --width: ifundefvar(--media-md) 32%;
  --width: ifundefvar(--media-gte-lg) 24%;
  width: var(--width);
Or

  --width: var(--media-xs) 100%
    else var(--media-sm) 49%
    else var(--media-md) 32%
    else var(--media-gte-lg) 24%
    else 5%
  width: var(--width);

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

#29

Post by deltron3030 »

esperent wrote: post #26
deltron3030 wrote: post #20

This breakpointless approach is interesting: https://utopia.fyi/

I use something similar on my own website and it's great. However, it's very limited - I've never seen it applied to anything except for text. It's likely that for most use cases you will need to combine this with at least some traditional breakpoints.

It might work with very simple apps that have lot of excess whitespace on larger devices. You'd focus on the mobile experience first, and then on blowing it up in a visual pleasing way.

For the layout you'd use a rule based approach instead of breakpoints.

But yeah, vanilla css folks are more focused on content sites like blogs, not web-apps with dense tables, dashboards etc.

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

#30

Post by karmakatze »

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/…

Obviously this is really cool.

Also obviously this is a hack. I wouldn't expect this behavior to stay the same and not break such sites at any time. Also, clearly this was not the intention of the spec writers so it is syntactically weird and semantically in an unexpected place.

So, while obviously cool, maybe this is not something one should rely on, right?

Post reply on HN