Pico CSS – Minimal CSS Framework for Semantic HTML
99 comments
·September 7, 2025poidos
codazoda
Whoa, that’s mine. Thanks for the mention. :)
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).
austinjp
Good stuff. And it's lovely to see something inspired by the truly awesome 100 Rabbits.
hmsp
This is awesome I’m going to start using.
andreashaerter
Even though I use Tailwind CSS for larger projects, there are smaller, self-contained cases where Pico CSS is a perfect fit. Their "Usage scenarios" page describes it spot on:
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
aiiizzz
I wish there was picocss but as a set of tailwind @apply rules, so I could use tailwind but have base styles classlessly.
dfee
- url updated!
nicr_22
Love love love Pico. It's such a terrific starting point, and easy to tweak into different directions. It's the anti-Tailwind.
Winblows11
There's also this site which allows easy switching/previewing of classless CSS themes:
simpaticoder
I like that resource, but it's missing an important one: github-markdown-css[1]. Given that most devs these days read a lot of Github markdown, it seems like a reasonable starting place for a css system.
subless
Reminds me of https://csszengarden.com/
giveita
Tufte looks very elegant
internetter
Tufte frequently makes the rounds here — most recently 4 days ago: https://news.ycombinator.com/item?id=45119103
svat
See also https://dohliam.github.io/dropin-minimal-css/ which has quite a few more (including github-markdown-css mentioned in a sibling comment).
j45
Nice.
There are some nice one there, surprised many weren’t mobile-first or mobile-friendly.
Pico looked nice on mobile though.
dang
Related. Others?
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)
bcardarella
This is how CSS should be written. I will never understand why class names need to repeat the semantic purpose for a given element.
james_marks
I think divs sent a generation down the wrong track. It’s weakly semantic and omnipresent in every 101 tutorial; it makes the semantics overall seem weak/insufficient.
lobsterthief
It’s just the default block-level containing element, so it serves its place but is not well explained in these tutorials (just as spans are the default inline element).
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.
MrGilbert
I use picocss for my personal site [1], which I just recently converted to plain html. I just realized that, with a bit of plain vanilla js, I can easily create a header and footer for every page. I need to write some kind of markup anyways, so why not directly write html? Also, picocss comes with dark mode, which I personally prefer.
[1]: https://g5t.de
wishinghand
If you're using Apache you could just use Server Side Includes and forget the JS.
MrGilbert
That’s a neat idea! I’m using Nginx, but there’s also SSI support in it. Currently, I'm using Javascript to set the current page on the main nav. I might get away with conditional includes or similar. I’ll explore my options. Thank you!
librasteve
big fan of pico … just published the new https://raku.org official website using it
mpweiher
That's not a coincidence :-)
Can you explain a bit how you are using HTMX?
Pointer is great if you have it...
notagoodidea
Congrats on the facelift of raku.org! Interesting to see the mix of HTMX/PicoCSS and Cro.
nicbou
I wish I started with something like that. At the time my website was just a blog, but I've added tools and forms over the years. I had to create an ad hoc design language and set of components for it. Pico would have been far more effective.
I love the focus on semantic HTML, because it matches how I write CSS. The HTML should be as pure and as style-agnostic as possible.
codedokode
The buttons and form inputs are too large compared to standard desktop UI elements.
bityard
Yeah. I had to zoom out to 75% in my browser before the text looked normal-ish sized but the "widgets" still looked very big and awkward. Maybe this was designed not just for mobile-first but mobile-only?
pikelet
Looking at the CSS variables page it seems that this is because they scale up the base font size at various breakpoints, starting at 106.25% at 576px, and going all the way up to 131.25% at 1536px. It definitely feels too heavy handed to me. The first time I viewed the website on mobile it seemed fine (because it's actually at or close to the browser's standard font size) so I wasn't sure what the problem was until I viewed it on my desktop. I can kind of see what they're going for as it keeps the layout fairly consistent, but I don't think it's the right approach.
librasteve
I agree, but quite easy to scale back with a couple of root values
euroderf
OT-ish but, can someone point me to a minimal framework that does collapsible trees ?
lobsterthief
You will need to write custom CSS, but collapsible trees are totally possible to do purely in CSS in any framework via a simple combination of checkboxes, labels, pseudo-classes and CSS combinators.
The `:checked` selector allows you to target checkboxes that are checked. So you can have a set of checkboxes (off screen with an absolute negative position or similar) that are controlled via a <label> element that wraps the + or - text in the tree. Then based on its state, you can target elements directly afterward to be expanded or contracted using the CSS adjacent sibling combinator.
Checkboxes are neat because they provide state management natively in the DOM and you can do a lot via CSS based on that ;) Thus, you have pure HTML and CSS collapsible trees.
clarkdale
98.css has this with the details html element
quantisan
I use Pico with LLM code gen for new projects. As you probably know, LLMs are predisposed to Tailwind and coding for industrial strength on any tiniest projects. The trick is to feed it the whole Pico docs as context and prompt it (i.e. in your CLAUDE.md) to use Pico explicitly.
cryptoz
Did you do anything fancy to get the whole Pico docs into context? I see on their website that their docs are split up across a bunch of pages, did you copy+paste each one into a large prompt document? I was hoping to see a single-page docs download but I didn't find one.
Love pico. It’s my default starting point for nearly every side project. Sometimes I will reach for Neat [0] which is a great deal smaller.
[0]: https://neat.joeldare.com/