PicoCSS?

I’d seen a few people ranting about various accessibility features on CSS that are under-used, and I thought “hey, it’s been a while since I fucked with the theme on my site”, and decided to have a look at it. First thing’s first, I’m using a very old version of Bootstrap. Is there something better out there?

I’m not sure where I found it, but I found PicoCSS, which is kinda interesting. It’s purported to be light, but the minified version is really not all that much smaller than the minified version of Bootstrap that I was using (72KB vs 76KB)… it’s certainly lighter than the minified version of the current version (228KB), but in addition to that Bootstrap pretty much requires about 70KB of JavaScript, whereas PicoCSS requires none. The only JS on my site otherwise is jQuery and TimeAgo.js, very light and not required whatsoever.

But probably the nicest part was that by using the “classless” version, I am able to shrink it quite a bit and throw away a pile of boilerplate HTML from my site. Dozens and dozens of stacked <div> elements with different classes on them, all gone. The HTML is quite pretty, if I could figure out how to get Hugo to indent the markdown HTML I’d be stoked.

I’m pretty happy with the results honestly, though I’ve still got a fair bit of tweaking to do. I effectively just ported by current theme to it, and activated the light-mode as well… but the header image does not look very convincing in light mode so I’ll probably have to re-roll that, and for that reason I’ll probably end up redoing the theme entirely with something new. Or not, depends if I’m feeling creative or not.

When it’s all said and done I didn’t really save much in terms of file size - a cold-load of the homepage of my site presently is right around 800KB still, and really the only way to reasonably get that down any appreciable amount is to slice up Font Awesome… I only use a small handful of icons, so I could cut it up, inject it into my own font files, butcher the CSS for it, and probably save ~200KB. Do I care enough to? Any system that doesn’t have the throughput for that probably won’t load the font files anyway? 🤔

Update:2024-04-28: I decided not to go through with it, and left the changes committed to a branch. The savings isn’t sufficient, and I don’t feel like addressing the last of the issues right now.

Horsham, VIC, Australia

Author:

fwaggle

Published:


Modified:


Filed under:


Location:

Horsham, VIC, Australia

Navigation: Older Entry Newer Entry