µCSS: I built a full-featured CSS framework on top of PicoCSS

#css #webdev #frontend #picocss

For over a decade, I used Bootstrap for all my projects. It's solid and well-documented, but over time I found myself increasingly frustrated, especially with themes. Most of them pull in dozens of JavaScript libraries and fonts you don't need, and cleaning that up takes forever.

So last year I started looking for something lighter.

Discovering PicoCSS

I reviewed a lot of alternatives: Pure, Chota, Milligram, Bulma, UIkit, Skeleton, Simple.css, MVP.css, and many others. Most were either abandoned, too bare-bones, or just not pleasant to look at.

I ended up choosing PicoCSS. It's beautiful, semantic, accessible, and weighs only 11KB. Most HTML elements look great with zero CSS classes. For simple projects, it's perfect.

But PicoCSS intentionally stays minimal. No grid system. No modal, no tabs, no toast, no breadcrumb, no badge. For anything beyond a basic page, you're on your own.

The gap

I maintain a PHP framework called Temma, and I was working on a UI component library for it. Adapting components to PicoCSS meant building most of them from scratch: the grid, modals, tabs, alerts, cards, navigation...

At some point it became obvious: I had built enough pieces to assemble a proper CSS framework. One that uses PicoCSS as a stable foundation, and adds everything it omits.

µCSS

That's what µCSS is: PicoCSS v2 + the missing parts.

17 UI components — Accordion, Alert, Badge, Breadcrumb, Button, Card, Forms, Hero, Modal, Nav, Pagination, Progress, Skeleton, Spinner, Table, Toast, Tabs
12-column responsive grid — 5 breakpoints, offsets, ordering, display utilities
20 color themes — one self-contained CSS file per theme
Utility classes — color (text, background, border), positioning (sticky, fixed)
Dark mode — automatic (prefers-color-scheme) or manual (data-theme)
~19KB gzipped — smaller than Bootstrap (~30KB)
Pure CSS — no JavaScript dependency
No build step — no Node.js, no SASS, nothing to compile

Usage is a single <link> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@digicreon/mucss/dist/mu.css">

Or pick a specific theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@digicreon/mucss/dist/mu.violet.css">

Available themes: azure (default), red, pink, fuchsia, purple, violet, indigo, blue, cyan, jade, green, lime, yellow, amber, pumpkin, orange, sand, grey, zinc, slate.