langterm VS open-props

I purposely wrote my home page (https://langworth.com) with plain, vanilla JavaScript, which features both WebGL and plaintext clients for a server-side text adventure game, because I wanted to remind myself that it's not that difficult to build something interactive and fun without miles of modern front-end tooling.

It started as a single page but I eventually broke it out into a few files for organization. The WebGL parts are lengthy and boilerplate-y because, well, that's GL for you. https://github.com/statico/langterm

https://langworth.com

It’s a retro experience with a text adventure game. I wrote it to prove to myself that I kinda knew WebGL after shutting down our browser gaming startup.

Only one person has beaten the game. Most don’t make it inside the building. Guess I’m not a great game designer ;)

There's still some boilerplate, but I'm a big fan of Open Props[0] because it takes a hybrid approach. CSS isn't necessarily reinventing the wheel, but allowing for easier / more powerful approaches to difficult layouts or things that would otherwise require JS. Bootstrap is fine but troubleshooting advanced layout issues involves a lot of inspecting elements to see what styles are actually being applied (at least in my experience, YMMV) so I'd personally always bet on CSS.

[0] https://open-props.style/

I don't quite get the hate for having CSS in another file. Do you also put all your react stuff in one single file ? That same logic and argument can be applied against all modularization.

And really 20-50 tailwind classes in a single element is VERY hard to read and keep in mind. No - it does not make things clear or understandable. One tends to need to re-read and scan over from the beginning and eyes glaze over. Esp if some elements only vary with a few classes missing. I guess it works for people with very high attention to detail and high amount of working memory. I only find it personally frustrating.

Maybe tailwind css works for some bright people. I did try it for a couple of projects and only felt pain.

However, the "atomic css" philosophy behind tailwind is great. I find framewroks like https://open-props.style/ far better to use.

Open Props adds to the set by providing extra custom properties for things like easing functions or animations.

> If you wanted to actually solve theming, what you should work for is not a constrained helper function like light-dark(), but instead a shared token schema. Today nearly every company has their own token schema and different ways of naming things in the semantic token layer. If we had a shard language here, not only would it be trivial to add light/dark theming (just redefine a few variables that are already provided for you), code could be shared between sites and inherit the theming/branding.

Isn't that the idea behind https://open-props.style/ (and https://theme-ui.com/ in JS land)?

I think it's a great idea, but hampered by the lack of adoption incentives for the very people that need to adopt it for it to become successful (design system/component library authors). It introduces constraints, but the promised interoperability is not really beneficial to the people who need to work within those constraints.

I do think that the real value of Tailwind comes from the utility classes, rather than css-in-html paradigm. You could achieve the same, for example, with Pollen.css [0] or Open Props [1].

[0] https://github.com/heybokeh/pollen

[1] https://github.com/argyleink/open-props

If you choose to style with plain CSS you can add design tokens as CSS variables with Open Props: https://open-props.style.

Some time ago I discovered Open Props which provides a lot of design tokens as CSS variables and started using it in some of my projects.

CSS: Open Props (https://open-props.style/)

https://open-props.style/ gives you design tokens as CSS variables. It’s CSS only and not Svelte specific.