Weird. I'm a full time web developer and I honestly don't understand what this library does or why it is useful. I read all the way through the site.
I mostly use Tachyons, which is definitely a bit outdated. Where does Pollen sit, and what value is it providing? Would love to see some more concrete examples.
This is great! I had the same thought that tailwind could be css variables and avoid all of the tooling.
I've been using CSS vars more and more on bespoke(quick-hacks) stuff, just to leave out build steps and all. Awesome to see a whole toolkit around just that small feature-set of CSS.
Pollen is a library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems. Heavily inspired by TailwindCSS.
This might be confused with the publishing system of the same name written in Racket: https://docs.racket-lang.org/pollen/
Tailwind gives you inline media queries and the confidence that your css doesn’t impact other elements on your site. Also you don’t need to think up class names. CSS variables are great, I just don’t really understand the value, I guess it gives you a bit of constraints for consistent styling.
Not sure what to say.
It’s good because it ‘does no harm’, it doesn’t distort the CSS classes you use on your HTML. It doesn’t make you a slave to a grid.
OTOH, how much does it really do?
If you are writing ‘var(—-color-blue)’ instead of ‘blue’ that is no revolution; sure it lets you sub in another shade of blue, but it would also let you sub in a shade of red for blue.
What I like CSS vars the most for are calc and for setting them w/ JavaScript. There are many gfx situations where a little math is the easy way to solve it, while pure css is confusing and brittle. (You ‘got lucky’ and it is possible to get the behavior you want without calc; change some little thing and you break it.)
I quite like the idea. I don't like the verbosity though. Is there any way to change `border-radius: var(--radius-2);` into --radius-2? Like we do know that `--radius-2` is a `border-radius`. Well we could do `.radius-2` but now we are just building tailwindcss again. A solution would be add the css propery into the variable but this is not possible afaik. https://jsfiddle.net/egbL5fhz/
This looks great!
It will work very well with shadow DOM too. Import at the document and all shadow roots get the variable definitions, then you can override them per subtree anywhere in the document.
Honestly this is amazing. Tailwind has a convoluted build process and creates a massive mess of html classes. This was much simpler to install and looks to be pretty easy to use too. Already got VSCode tooling working too (versus the Tailwind plugin which is just as complicated and convoluted as Tailwind itself).
I'm confused, isn't this just a list of design token names and some docs on how to use CSS variables?
It would be nice if it also supported SCSS. Writing vanilla CSS variable syntax over and over can get extraordinarily annoying. Also if you want scoped variables SCSS has support for that while vanilla CSS uses global variables.
I'd really just rather write $color-blue rather than var(--color-blue);
One thing I’ve always wanted to be able to do is a shorthand for media queries, something like:
margin: 1rem @sm 2px
How can I do this? Is there an SCSS plugin or am I going to have to learn how to make my own CSS preprocessor?
Why not make this truly a lightweight library by calculating and injecting CSS variables in JS on demand once the package gets imported? You could easily shave a few more kilos this way.
Looks promising, will try this on when I am rewriting my blog (again)
I think this is a great idea, and I'm a user of Tailwind.
While I'm generally hesitant to do the "your thing has the same name as [entirely unrelated thing]," in this case the "other" Pollen is Matthew Butterick's system for generating online books with high-quality typography, which isn't the same thing, but doesn't seem entirely unrelated.
https://docs.racket-lang.org/pollen/
While I don't know how well known Pollen is, it's been featured on Hacker News more than once, IIRC.
I can believe it's just odd coincidence that two projects focused on tools for making it easier to make web sites look better share the same somewhat unusual name, but it's still a little eyebrow-raising.
Ah! This is brilliant. There are quite a few comments here about pitching this against other CSS frameworks or the actual use of this.
This is not a stand-alone framework or anything of that type. Treat as one of your scaffold components for your styling framework. Tailwind does this with their tailwind.config.js and is more of raw CSS design tokens. I just wish their commercial TailWindUI[1] make it easy to make use of it the better way.
I wish I saw Pollen a few months ago. I wanted to do an effortless design for my personal website and stick to as plain vanilla CSS as possible. The best way was to rely on CSS-Variables. I did do it from scratch[2]. It works though it is pretty hacky, and I'm not too concerned. Right now, I can swap few values and have an entirely different color scheme - light/dark version of my own, Nord Theme[3], and I will keep adding me whenever I get bored. I can even tweak the rhythms and spacing to my liking with just the variable. You should check out the demo[4] or look at the source[5] (wip).
For those who find this interesting, you should check out another interesting one I discovered a few months back -- css-media-vars[6].
1. https://tailwindui.com
2. https://github.com/oinam/oinam-jekyll/blob/main/_includes/cs...
3. https://www.nordtheme.com
4. https://oinam.github.io/oinam-jekyll/
5. https://github.com/oinam/oinam-jekyll
6. https://github.com/propjockey/css-media-vars