Posted by mpweiher 5 days ago
I use it for almost everything. I just made a note to try it with the demo and to steal some ideas from pico (while keeping the size of neat tiny).
https://picocss.com/docs/usage-scenarios
I discovered Pico CSS just last week, and it turned out to be exactly what I needed for a small Hugo theme (govanity, vanity URLs for Go modules/packages with Hugo: https://github.com/foundata/hugo-theme-govanity). From discovering Pico, reading the docs, and integrating it, I was done in about two hours.
One thing that's surprisingly easy to overlook in between: CSS variables: https://picocss.com/docs/css-variables and Colors: https://picocss.com/docs/colors
Maybe just a little upstream.
It’s easiest to start with Pico (especially classless) and the make the decision on where to go, when you decide to add classes whether it’s continue with Pico, easily head towards Tailwind, or something else.
There are some nice one there, surprised many weren’t mobile-first or mobile-friendly.
Pico looked nice on mobile though.
> Not fond of Pico.css’s weight, though: over 50KB, nowhere near as lightweight as the name suggests (even if it’s above-average compressible, 8KB gzipped—but I wouldn’t count even 8KB uncompressed as pico); in this case, if you flatten the variables and strip unused code, you’re left with under 4KB (~1.4KB gzipped). Lots of bloat from unused light mode support, things like form controls, and a fair bit of frivolous custom properties usage. This is the sort of place where I see the appeal of the likes of Tailwind, because they generate such huge amounts of CSS that you just about have to use an unused style remover. But it is another build step, and contrary to the deliberate intent here.
And it sounds like it has grown further. I don’t see 71kb, I see 83KB (11.6KB gzipped, 10.1KB brotli). At that point I wouldn’t even call it small, and it’s even getting past medium-sized into large territory.
And I think this is so minimal
I’ve been thinking about creating a CSS tool somewhere about halfway between new.css and Pico CSS for very basic page layout tools (containers, callouts, menu bars, etc) that still focuses on being extremely small and performant.
I feel that a tool like that would be helpful for laying out a simple but functional site (sourcehut’s site [1] comes to mind) where you need a few basic layout tools but don’t need all of Bootstrap.
[1]: https://g5t.de
In my 25 years of experience writing HTML and CSS most engineers don’t understand semantic HTML, nor do they take the time to learn it; largely because companies don’t value it, unless they’re heavily SEO-focused companies.
I once worked at a company that would run an HTML5 validation test in our CI/CD pipeline. That was very helpful as it identified invalidly nested elements and taught proper semantic HTML.
Unless one likes using tables instead or spacer gifs.
It’s nice html has options beyond. divs now too
Can you explain a bit how you are using HTMX?
Pointer is great if you have it...
HTMX and Pico are baked into HARC stack - the rationale for this is that HTMX (as the antidote to React) enables non TypeScript languages on the server side. Of course, then you need a library that will help you write your server! That's where HARC stack comes in.
For example, on the raku.org front page you will see a set of button/tabs that select specific code examples - each one of these does...
<li class="active">
<a hx-target="#buttabs-1-content" hx-get="/buttabs/1/multi-paradigm" data-value="1">multi-paradigm</a></li>
hth
Tailwind CSS vs. Pico CSS (2022) - https://news.ycombinator.com/item?id=41511420 - Sept 2024 (48 comments)
Htmx, Raku and Pico CSS - https://news.ycombinator.com/item?id=41482679 - Sept 2024 (153 comments)
Pico CSS v2 comes with 380 manually crafted colors - https://news.ycombinator.com/item?id=39488979 - Feb 2024 (12 comments)
Pico CSS Framework - https://news.ycombinator.com/item?id=29559961 - Dec 2021 (101 comments)