Open Props – Supercharged CSS Variables(open-props.style)
open-props.style
Open Props – Supercharged CSS Variables
https://open-props.style/
13 comments
I can’t point my finger at it, but something really feels off about the layout of this page. A bunch of different spacing sizes mashed together, maybe? Doesn’t look good for a design token library website. Love the idea though!
I think it is that the elements alternate in height between the left and the right columns, creating a weird kind of feeling of instability as you move down the page. The vertical rhythm of the layout creates a feeling of unsettledness and disease.
I thought so too, tried putting a max width on the body and centering it. Ended up looking substantially better to my eye.
Tailwind is fine for some use cases, but this and https://pollen.style are probably better baselines for apps and following a design system. They let you define classes and components with some global consistency, without forcing the micro class names into every HTML element.
(Yes I know you could make UI components that use Tailwind classes, but if you have a diverse stack or legacy code, it's not easy to bolt in the TW build system or assume one technology like React, etc)
(Yes I know you could make UI components that use Tailwind classes, but if you have a diverse stack or legacy code, it's not easy to bolt in the TW build system or assume one technology like React, etc)
Curious to know if anyone has compared this to Pollen:
https://www.pollen.style/
I’ve used Pollen as an alternative to the bulk of Tailwind and have been very happy with it.
https://www.pollen.style/
I’ve used Pollen as an alternative to the bulk of Tailwind and have been very happy with it.
If you like Pollen, you will like the idea of Fluid Responsive Typography and modular spacing. Check out https://utopia.fyi
If pollen spells out each and every variable, the idea behind utopia will set you with something that you can use a few and it works across various screen sizes.
For colors, start looking at CSS's support OKLCH. It is a tad new but the support is pretty rock solid now. https://oklch.com/
Here is what I think. You can have color variables like `--grey-500` which has the value `light-dark(oklch(mid-value), oklch(another-value))`. Now, you just play with a common color token and your light-dark theme should be taken care of. The tint and shade can be either automated or manually tweak by tinkering with the OKLCH either high/low.
Finally with @container, one might not need to define media-queries at all or at just specific high-level wrappers/containers.
If pollen spells out each and every variable, the idea behind utopia will set you with something that you can use a few and it works across various screen sizes.
For colors, start looking at CSS's support OKLCH. It is a tad new but the support is pretty rock solid now. https://oklch.com/
Here is what I think. You can have color variables like `--grey-500` which has the value `light-dark(oklch(mid-value), oklch(another-value))`. Now, you just play with a common color token and your light-dark theme should be taken care of. The tint and shade can be either automated or manually tweak by tinkering with the OKLCH either high/low.
Finally with @container, one might not need to define media-queries at all or at just specific high-level wrappers/containers.
Doesn’t that take the main advantage of Tailwind away, in that I have to name hundreds of arbitrary things again, and inevitably build a crude cascade framework..? I mean I get the idea and it’s sure smart, but not having to come up with a class name hierarchy with Tailwind has been such a boon to my productivity, I wouldn’t want to trade that in.
The primary benefit of either is a unified design system. The implementation method differs. I strongly dislike the way Tailwind does it (especially when dealing with stuff like media queries) and vastly prefer the way Pollen does. Matter of preference. The fact that I don’t have to add anything to my build tools is an extra bonus.
[deleted]
If you like the style of open-props, you might want to check out open-color
https://yeun.github.io/open-color
Open Props is fun to play with. Without the build step like Tailwind., much easier for adoption.
BTW Open Props v2 is coming: https://unpkg.com/browse/[email protected]/ (not yet documented, but the classless forms components are great)
This is the right solution to whatever problem Tailwind solves.
[deleted]