6 ms·
Pico CSS – Minimal CSS Framework for Semantic HTML
- luckylion 1y agoI suppose the title should be _Minimalist_ CSS Framework. At 71kb it really isn't minimal.
- jonahx 1y agoIndeed. I was expecting 5-10Kb. Tbf, it's only 11 zipped.
- sixtyj 1y agoAt Neat CSS website author says that zipping needs some action at browser side and it is not worth it for small css frameworks…
- d1sxeyes 1y agoThat’s if you load it all from the CDN though, build your own with SASS and it’s much smaller.
- drewbitt 1y agoI agree. beercss is less than 20kb and about the biggest 'minimal' I would consider
- kozika 1y agoThere is also a semantic-based CSS that is overwhelmingly smaller than this one: https://newcss.net/ https://newcss.net/ And I think this is so minimal
- bdn_ 1y agoNew.css developer here, thanks for sharing :) 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://sourcehut.org/ https://sourcehut.org/
- codazoda 1y agoI’d love to see NeatCSS on your list. It’s not officially classless but I try to make it semantic as much as possible. I bookmarked you GitHub repo (which you should link on the page if I didn’t miss it). I’ll give it a try myself to see if it works (and maybe make adjustments).
- sroerick 1y agoI think this would be excellent. There's a whole class of websites /landing pages which right now Astro seems to be filling that niche. It's mind boggling how hard it is to do basic components on the web
- vehemenz 1y agoTailwind is semantic too because the class names say what they do.
- imiric 1y agoThat's not what semantic means.
- user____name 1y agoStop arguing semantics!
- chrismorgan 1y agoFour years ago I wrote https://news.ycombinator.com/item?id=28860500 https://news.ycombinator.com/item?id=28860500: > 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.
- poidos 1y agoLove 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/ https://neat.joeldare.com/
- codazoda 1y agoWhoa, 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).
- tcdent 1y agoyeah but does claude know how to use it?
- mariocesar 1y agoYes it does
- lagniappe 1y agoClaude knows how to use plain HTML.
- minimaxir 1y agoLLMs may know the v1 version of PicoCSS, which has some differences from the current v2 (e.g. no SASS).
- dalemhurley 1y agoagents.md will help if it doesn't
- xutopia 1y agoI 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.
- nailer 1y ago> I can't possibly recommend class based CSS soup anymore. Me neither! > you can simply remove or add classes as you need That sounds like exactly what I was thinking when you said class soup. > you don't have to dig through loads of CSS files to figure out where the CSS is The CSS should be in your components, or in a .css file beside your components at worst. React having bad defaults doesn't need you need to change to adding 20 classes to every HTML element.
- librasteve 1y agothis is exactly correct … Gnat CSS is a great way to police encapsulation imo
- tym0 1y agoI've stopped doing frontend several years ago but it doesn't really feel like the trade off of the newer styling solutions vs just CSS Components for scoping are worth it.
- vorador 1y agoIt really feels like all these concerns about semantic everything belong to a previous era of the web. I remember arguing with people 20 years ago who believed RDF and the semantic web was going to take over, but the use cases never materialized.
- wvbdmp 1y agoThe use cases are perfectly material, but unfortunately the ad business depends on shitty, ever-changing HTML and scripting shenanigans.
- IgorPartola 1y agoI 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.
- Retr0id 1y agoThe neat thing about semantic HTML is that the CSS ought to be pretty interchangeable.
- IgorPartola 1y agoSure but why would I do that? When was the last time you decided that the solution to whatever problem you were facing was to switch to a completely different CSS framework without rewriting your HTML?
- giveita 1y agoThe real neat thing is not having to make decisions up front. But you can tweak it later. If you are a rebel you could even use classes to touch up bits you are not happy with.
- IgorPartola 1y agoWhat I am saying is that I have never done this, have seen the need for this, or have heard of anyone doing this or having the need for this. To create an absurdist analogy it is like saying that because labels on cotton T-shirts are the same size that you could take them off shirt A and sew them onto shirt B. It is possible by there is zero point in doing it other than to say that you did it.
- giveita 1y agoCorrect, there is no need. It is more of a preference, maybe a challenge or code golf type of thing. One advantage is less thinking / decision / boilerplate is needed when adding elements. Semantic: p Normal: p class=paragraph Utility: p class=mx-1 py-1 my-2 text-medium It is like buying a medium shirt rather than getting a tailor-made t-shirt.
- codedokode 1y agoThe buttons and form inputs are too large compared to standard desktop UI elements.
- bityard 1y agoYeah. 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?
- librasteve 1y agoI agree, but quite easy to scale back with a couple of root values
- pikelet 1y agoLooking 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.
- rodolphoarruda 1y agoPico is great! It's nice to see it hitting HN front page.
- librasteve 1y agobig fan of pico … just published the new https://raku.org https://raku.org official website using it
- notagoodidea 1y agoCongrats on the facelift of raku.org! Interesting to see the mix of HTMX/PicoCSS and Cro.
- mpweiher 1y agoThat's not a coincidence :-) Can you explain a bit how you are using HTMX? Pointer is great if you have it...
- librasteve 1y agoThe new raku site is built on the https://harcstack.org https://harcstack.org - that's HTMX, Air, Red and Cro. (The raku Air module is the glue, Red is the ORM and Cro is the HTTP framework). 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> These results in a more lightweight page and the ability to run code to render the tab content on demand. It's probably overkill for this site rather static needs, but the Air::Base component library tilts towards active HTMX controls wherever possible. hth
- Winblows11 1y agoThere's also this site which allows easy switching/previewing of classless CSS themes: https://www.cssbed.com/ https://www.cssbed.com/
- giveita 1y agoTufte looks very elegant
- internetter 1y agoTufte frequently makes the rounds here — most recently 4 days ago: https://news.ycombinator.com/item?id=45119103 https://news.ycombinator.com/item?id=45119103
- j45 1y agoVery clean especially with the Roboto condensed example in the comments of the shared Tufte link.
- simpaticoder 1y agoI 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. 1 - https://github.com/sindresorhus/github-markdown-css https://github.com/sindresorhus/github-markdown-css
- svat 1y agoSee also https://dohliam.github.io/dropin-minimal-css/ https://dohliam.github.io/dropin-minimal-css/ which has quite a few more (including github-markdown-css mentioned in a sibling comment).
- subless 1y agoReminds me of https://csszengarden.com/ https://csszengarden.com/
- rebelpixel 1y ago
- indigodaddy 1y agoFastHTML uses Pico CSS by default
- nicr_22 1y agoLove love love Pico. It's such a terrific starting point, and easy to tweak into different directions. It's the anti-Tailwind.
- j45 1y agoI’m not sure if it’s the anti-Tailwind. 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.
- nrjames 1y agoI'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.
- andreashaerter 1y agoEven 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 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 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 https://picocss.com/docs/css-variables and Colors: https://picocss.com/docs/colors https://picocss.com/docs/colors
- MrGilbert 1y agoI 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 https://g5t.de
- wishinghand 1y agoIf you're using Apache you could just use Server Side Includes and forget the JS.
- deleted 1y ago[deleted]
- MrGilbert 1y agoThat’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!
- j45 1y agoIf simplicity is the goal, html can be inserted in other html using the embed or object tag, no JavaScript required. https://www.w3schools.com/TAGS/tag_embed.asp https://www.w3schools.com/TAGS/tag_embed.asp https://www.w3schools.com/TAgs/tag_object.asp https://www.w3schools.com/TAgs/tag_object.asp
- rimmontrieu 1y agoI use tailwind but sometime extremely lightweight CSS framework like Pico is a good starting point to build the foundation for any projects.
- petr25102018 1y agoI 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/ https://github.com/stribny/sidewinder/). Recommended!
- candl 1y agoWish it had a tab component.
- cantalopes 1y agoHell 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
- stgr_codes 1y agoReally 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.
- ixxie 1y agoI love the idea, but why can't I install with npm and import as plain CSS?
- Leftium 1y agohttps://picocss.com/docs#install-with-npm https://picocss.com/docs#install-with-npm npm install @picocss/pico All the built/minified CSS is distributed in the package, too: https://www.npmjs.com/package/@picocss/pico?activeTab=code https://www.npmjs.com/package/@picocss/pico?activeTab=code
- quantisan 1y agoI 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 1y agoDid 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.
- drzel 1y agoLove Pico CSS. I've used it for close to a decade on https://www.fortressone.org https://www.fortressone.org - just works, and looks pretty enough out of the box.
- bcardarella 1y agoThis 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 1y agoI 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 1y agoIt’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.
- j45 1y agoI don’t know if it was the wrong track, it was a frame of reference with little before it. Unless one likes using tables instead or spacer gifs. It’s nice html has options beyond. divs now too
- bradgessler 1y agoI frequently use Pico for demo websites like https://demo.rubomonolith.com https://demo.rubomonolith.com. You don’t have to worry about styling and you get something that looks reasonably polished.
- nine_k 1y agoI 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.
- podlp 1y agoI’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
- dang 1y agoRelated. Others? Tailwind CSS vs. Pico CSS (2022) - https://news.ycombinator.com/item?id=41511420 https://news.ycombinator.com/item?id=41511420 - Sept 2024 (48 comments) Htmx, Raku and Pico CSS - https://news.ycombinator.com/item?id=41482679 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 https://news.ycombinator.com/item?id=39488979 - Feb 2024 (12 comments) Pico CSS Framework - https://news.ycombinator.com/item?id=29559961 https://news.ycombinator.com/item?id=29559961 - Dec 2021 (101 comments)
- keysdev 1y agoHow does this compare to pure css?
- potato-peeler 1y agoDoes not work in older browsers, iOS 13.6 Strangely latest bootstrap works just fine.
- nicbou 1y agoI 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.
- euroderf 1y agoOT-ish but, can someone point me to a minimal framework that does collapsible trees ?
- lobsterthief 1y agoYou 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 1y ago98.css has this with the details html element