HN Reader

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

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/

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

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

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

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

https://www.cssbed.com/

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

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

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)

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.

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

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

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.

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.

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!

I’m using Pico for a hackathon project. It’s a good way to prototype, especially the class-less version. You don’t need to pay attention to every detail to get the concept in a good enough state, nor do you need an LLM to remind you of Tailwind’s library of classes

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'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.

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.

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.

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

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 use tailwind but sometime extremely lightweight CSS framework like Pico is a good starting point to build the foundation for any projects.

OT-ish but, can someone point me to a minimal framework that does collapsible trees ?

FastHTML uses Pico CSS by default

Does not work in older browsers, iOS 13.6

Strangely latest bootstrap works just fine.

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

How does this compare to pure css?

yeah but does claude know how to use it?

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.

Wish it had a tab component.