I haven't done frontend dev in a while, but one thing stands out to me here... they call out using OKLCH colours, which I had to look up. (For the uninitiated, this is a cylindrical projection of the also-new-to-me Oklab colour space, which appears largely unrelated to the older CIE L*a*b* colour space).
Do people actually use this? In particular, before LLMs ate the world, I mean. When I did frontend, it was hex, or if you felt fancy, `rgba(...)` (though at that point named colours had mostly fallen out of style).
Is using these less-intuitive colour encodings made more practical through the use of CSS variables?
Yes, since the last couple of years. I tend to help architect and scaffold large projects that goes on for years, and changes a lot of developers, designers in its lifecycle. I was pretty confident of moving to OKLCH about 4-years ago and have have had it as default. OKLCH values are not the source of truth for these projects, and other design elements — all the way to Powerpoints (HEX/RGB) and Print (CMYK) are derived from OKLCH. There are variations but most people don’t even know the difference.
This started way back working with my long-term business partner and he built a pretty good tool to help visualize and tinker with it.
> To stay relevant, Pico CSS would need a full rewrite: plain modern CSS instead of Sass, built on features it doesn't use today (OKLCH colors, cascade layers, Popover, anchor positioning) with fallbacks for older browsers, and a native compiler that strips unused CSS and makes customization easy.
Some recent alternatives/successors/forks that are in the same vein as Pico
- Nimble: https://leftium.github.io/nimble.css/demo/pico.html
- Sumi.css: https://vladocar.github.io/Sumi.css/docs.html
- Blades: https://github.com/anyblades/blades
- Oat: https://oat.ink/
I haven't done frontend dev in a while, but one thing stands out to me here... they call out using OKLCH colours, which I had to look up. (For the uninitiated, this is a cylindrical projection of the also-new-to-me Oklab colour space, which appears largely unrelated to the older CIE L*a*b* colour space).
Do people actually use this? In particular, before LLMs ate the world, I mean. When I did frontend, it was hex, or if you felt fancy, `rgba(...)` (though at that point named colours had mostly fallen out of style).
Is using these less-intuitive colour encodings made more practical through the use of CSS variables?
Yes, since the last couple of years. I tend to help architect and scaffold large projects that goes on for years, and changes a lot of developers, designers in its lifecycle. I was pretty confident of moving to OKLCH about 4-years ago and have have had it as default. OKLCH values are not the source of truth for these projects, and other design elements — all the way to Powerpoints (HEX/RGB) and Print (CMYK) are derived from OKLCH. There are variations but most people don’t even know the difference.
This started way back working with my long-term business partner and he built a pretty good tool to help visualize and tinker with it.
Website https://colorcolor.in
Source https://github.com/saneef/color-color
This is my fave article on the subject:
https://evilmartians.com/chronicles/oklch-in-css-why-quit-rg...
https://github.com/anyblades/blades seems to be a continuation in the same spirit
Thanks for sharing! Same spirit, new home.
We’re actively maintaining Blades CSS over on GitHub and Discord, and would love community feedback.
We also set up a dedicated page outlining key details: https://blades.dev/css/pico/
I really enjoyed using Pico CSS, but I understand the choice.
Thank you Lucas Larroche for building Pico CSS and sharing it with us.
A little sad in a way, but this seems like the right call. I haven't used Pico in a very long time, and I don't think I'd choose it today.
What would you choose?
Hmm. I use pico. They could use an agent to modernize it!
Yeah, but why? Writing code for agents to use isn't fun, and buying tokens for it is a waste of money.
What a tragedy.
> To stay relevant, Pico CSS would need a full rewrite: plain modern CSS instead of Sass, built on features it doesn't use today (OKLCH colors, cascade layers, Popover, anchor positioning) with fallbacks for older browsers, and a native compiler that strips unused CSS and makes customization easy.
Does anyone know a similar project doing this?
We do: https://github.com/anyblades/blades
Already plain modern CSS instead of Sass, has Popover API, and CSS layers for individual components, OKLCH colors are on the way.
Drop-in compatible with Pico CSS (via underlying fork)
But why? Is it not relevant anymore? It's as useful and capable as it was years ago