Pico CSS – Minimal CSS Framework for Semantic HTML (picocss.com)

I suppose the title should be _Minimalist_ CSS Framework. At 71kb it really isn't minimal.

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/

yeah but does claude know how to use it?

I can't possibly recommend class based CSS soup anymore. Once you go with utility classes it's hard to go with anything else. It's super intuitive, you don't have to dig through loads of CSS files to figure out where the CSS is and you can simply remove or add classes as you need and see it right there in front of you.

I honestly can no longer tell which “minimal CSS frameworks for semantic HTML” I have not seen on the front page of HN and which are repeats. Are they all the same at this point?

Not specifically picking on this one, just that it seems that they are the quick to crank out type of libraries and everyone has their own.

The buttons and form inputs are too large compared to standard desktop UI elements.

Pico is great! It's nice to see it hitting HN front page.

big fan of pico … just published the new https://raku.org official website using it

There's also this site which allows easy switching/previewing of classless CSS themes:

https://www.cssbed.com/

FastHTML uses Pico CSS by default

Love love love Pico. It's such a terrific starting point, and easy to tweak into different directions. It's the anti-Tailwind.

I've tried using this before and pretty quickly migrated away. While I like the idea of it, the default styling is not great and I felt frustrated with the amount of adjustments it needed to support a data-dense site.

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

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

I use tailwind but sometime extremely lightweight CSS framework like Pico is a good starting point to build the foundation for any projects.

I like to use Pico CSS as a starting point for websites (as opposed to apps). I even put it in the my Django starter kit (https://github.com/stribny/sidewinder/). Recommended!

Wish it had a tab component.

Hell yes, this is geat! It's a shame it uses pixels instead of physical+relative units (like pt/mm + em/ex/rem) but still better than tailwind or bootstrap horrors

Really love how this project is evolving. It helps you write components with better accessibility without compromising maintainability (it actually improves it) and it's easy to customize.

I love the idea, but why can't I install with npm and import as plain CSS?

    npm install @picocss/pico

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.

Love Pico CSS. I've used it for close to a decade on https://www.fortressone.org - just works, and looks pretty enough out of the box.

This is how CSS should be written. I will never understand why class names need to repeat the semantic purpose for a given element.

I frequently use Pico for demo websites like https://demo.rubomonolith.com. You don’t have to worry about styling and you get something that looks reasonably polished.

I won't call Pico "minimalist". I'd call it "understated but pretty complete", with a ton of attention to detail, and oodles of customization variables.

pico.classless.css is 2458 lines long.