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].
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.
I feel it's not by accident you don't understand it. The documentation says that it's heavily inspired by TailwindCSS and calls itself utility-first. However if you've used TailwindCSS or most other utility-first frameworks, you'll find it's not the same (which is ok, but does not get clarified).
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.
There’s a trend at the moment called design tokens which standardises all the design constraints for your website, e.g. spacing, colours, fonts, etc. Tailwind and I guess this allows for you to build super consistent websites based off of predefined tokens
It's basically providing swatches for CSS values, thus helping to work with a design system instead of arbitrary values. But its nothing you couldn't just set up yourself with your desired variables natively or with CSS preprocessor. Comparing it to tailwind feels like marketing copy
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.
Make me a market on the percentage overlap of people that use Racket to build things regularly with the amount of people using TailwindCSS to build things regularly and then use that interval to consider whether this will actually confuse anyone.
I don't do either and it confused me, because the Pollen publishing system is (a) also essentially a set of tools designed to make it easier to make web sites look better and (b) has been featured on Hacker News more than once.
What was the confusion? The title right now is "Pollen - A library of CSS variables inspired by TailwindCSS"
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.
Okay, despite the fact that I keep being downvoted for having brought this up, I'll answer anyway and probably get downvoted again. Here's the thing. As someone who knows the "original" Pollen, and knows that it is a system designed for making online publications look good, my immediate thought was: "Oh, is this a CSS library from the guy who created Pollen? That's cool." Maybe it was designed to work in concert with Pollen! Maybe it's just inspired by Pollen! Or...oh, maybe it has nothing to do with Pollen. Huh.
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.
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.
With tailwind, it's sort of assumed that you're using e.g. React components. So all buttons will look the same because you'll import the button component, that's defined in a separate style.
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.)
Yep, but they are called templates in backend frameworks, You write HTML with sprinkled in logic in Elixir/PHP/Python/Ruby etc.
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.
Even backend frameworks distinguish between templates and components.
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.)
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/
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 feel like this is a conflation of two very different ways to use frameworks.
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.
No, Tailwind's classnames come with a set of predefined values.
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.
Well, to be fair something needs to bind a set of CSS variables (AKA custom properties) to the elements. So a list of variable names is not a replacement.
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);
Not disagreeing, only adding this nit to hopefully shortcut some bickering. (Apologies if this causes more bickering)
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.
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.
I’d be very much surprised if that would save anything; gzip compression is pretty good, but the content-aware compression you’re describing is unlikely to be enough better to compensate for the extra code required. Add to that the downsides (slower loading and a flash of unstyled content) and I’d reckon it a non-starter.
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.
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.
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