Pollen – A library of CSS variables inspired by TailwindCSS
pollen.style
pollen.style
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].
2. https://github.com/oinam/oinam-jekyll/blob/main/_includes/cs...
4. https://oinam.github.io/oinam-jekyll/
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.
Pollen uses css variables as the utilities in "utility-first", not classes. So to better understand the docs, take a look at the usage of css variables.
Utility-first as used by the most other frameworks (like Tailwind), are based on AtomicCSS. The concept behind it being, as atomic implies, using single irreducible units for each class (a single style). This site[1] provides curated reading resources on the topic. While it is a new concept and still being defined, use of classes as the utilities is the more commonplace usage, hence if writing a framework that does not do that I feel one should make that clear.
This means that the Introducing Pollen page will be confusing by design, as it implies use of utility-first CSS but the first example shows a Boostrap-like `.button`. Most other examples on the site also show 1 style classes, also misleading on the classes actually being "atomic".
In summary, Pollen is a framework that uses css variables[2] as the utilities. I like what it's doing and watching to see it grow. To better understand the value provided I'd recommend this video[1] on CSS variables, and this framework being a rapid prototyping foundation using the same concepts.
[1] https://johnpolacek.github.io/the-case-for-atomic-css/
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_c...
I get that I'm kind of contributing to the problem by even commenting here, but the incessant name-clash and "omg the design/contrast is so bad" threads in HN just get tiring, and amount to little more than noise.
If the title was "Pollen - a library for controlling air quality sensors," I wouldn't have thought that, because those two fields aren't remotely connected. But this Pollen and the original Pollen are in adjacent problem spaces, and that makes the identical naming relevant.
I'm sorry you think that's "little more than noise." I just don't agree. As I mentioned elsewhere and I guess shouldn't have, normally I don't bring this sort of thing up, but I think in this case the possibility for confusion isn't in the "so wacky ha ha out of the blue gosh nobody would ever mix up the two" camp that apparently everyone else does.
Pollen lets you use nicely defined values like Tailwind, but use CSS as designed to assemble them into sets.
And honestly we need it.
Pollen seems to me closer to bootstrap: define classes for each thing, and then use them everywhere.
If you're designing a page or site without breaking your HTML into separate components, I can see the point of Pollen.
(I am not a front-end expert, and my opinion is based on my limited experience using bootstrap, tailwind and tailwindui+react.)
Components is the terminus used in (usually) JavaScript frontend development where you write JS logic and HTML is only used in the render/view/etc function.
For example, Laravel has Blade templates and Blade components. From the documentation on the latter:
"Components and slots provide similar benefits to sections, layouts, and includes"
If you use Tailwind with Blade templates, but don't use {components, sections, layouts, includes}, then you'll have a hard time keeping things consistent. Because you'll define how a button looks over and over in each template. In that case, something like Bootstrap or Pollen would be easier.
But the right way is probably to break your templates into smaller pieces (e.g. components) so you can use Tailwind but still share things like buttons between templates.
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.)
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.
If you write semantic classes and use @apply in tailwind or variables in pollen, it boils down to pretty much the same thing.
If you use tailwind utility classes in html directly you'll have what you describe, but you can still run the cleanup scripts and be done with it.
The strength of either framework imho stems mostly from having a config and a subset of options, a design system, contrary to just writing vanilla css. But any mess of unused classes is always yours to keep or clean.
With all due respect for this project's creators, unless I'm missing something here, this could just as well have been a list of variable names and a link to MDN.
I'd really just rather write $color-blue rather than var(--color-blue);
Sass variables are both lexically and dynamically scoped. The scope is determined by what you define or import before the lexical scope is evaluated. You can inject basically whatever you want based on execution order. That’s more dynamic than most lexical scoping, where definition context determines resolution.
CSS custom properties are fully dynamic in the sense that they’re context-free when defined. Like Sass variables, that context can be injected by execution order.
The major difference is what constitutes “execution order”. For Sass, it’s evaluation and control flow scoping rules. For CSS custom properties it’s the cascade.
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?
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.