About µCSS

The origin: Temma-UI

µCSS started as part of Temma-UI, a toolkit designed to provide ready-to-use interface components for Temma, a PHP MVC framework. Temma-UI's goal was to offer HTML components compatible with several CSS frameworks (Bootstrap, PicoCSS, Bulma, UIkit) so developers could switch styling without changing their markup.

To make Temma-UI work across frameworks, each component's HTML had to be structured to satisfy all supported CSS libraries simultaneously.

PicoCSS and its limits

PicoCSS was the closest match to what Temma-UI needed: a lightweight, classless CSS framework that styled semantic HTML out of the box. It had an elegant approach — write standard HTML, get a decent-looking result without adding CSS classes everywhere.

But PicoCSS had limitations that became blockers over time: a restricted color system with only a handful of theme options, missing components that real-world interfaces need (tooltips, toasts, accordions, badges, skeleton loaders), and a customization model that required rebuilding from source for anything beyond basic changes.

From PicoCSS to µCSS

PicoCSS's approach was too good to give up on, but its limitations held it back from its full potential. The decision was made to fork it and bring everything that was missing. The fork evolved into µCSS, which expanded the original foundation in several directions:

  • 11 color roles — primary, secondary, tertiary, contrast, accent, spark, pop, plus success, info, warning, and error semantic colors
  • 20 color themes — each theme is a single CSS file built from a JSON color palette, covering fuchsia, blue, amber, jade, violet, and 15 more
  • 36 components — buttons, cards, modals, tooltips, toasts, accordions, badges, spinners, skeleton loaders, heroes, and more
  • CSS custom properties — every design token is a CSS variable, making customization possible without a build step
  • Dark mode — built-in light/dark mode via a single data-theme attribute, applicable globally or per-component

Philosophy

µCSS is built on a few core principles:

  • Semantic HTML first — standard HTML elements are styled out of the box. A <button> looks like a button, a <table> looks like a table, without adding classes.
  • CSS-only — no JavaScript required. Components like accordions use native <details>/<summary>, modals use <dialog>, tooltips use data-tooltip attributes.
  • Zero build step — include a single CSS file from a CDN or your server. No Sass, no PostCSS, no bundler configuration.
  • Customizable via variables — every color, spacing, radius, and font is a CSS custom property. Override what you need, keep the rest.

Ecosystem

µCSS is part of the Digicreon open-source ecosystem, which includes:

  • Temma — a PHP MVC framework for web applications
  • µJS — a lightweight AJAX navigation library that makes websites feel like single-page apps
  • µCSS — this lightweight, themeable CSS framework

Together, these tools form a complete stack for building fast, modern websites with minimal complexity: Temma handles server-side routing and rendering, µCSS provides the styling, and µJS adds instant client-side navigation — all without heavy JavaScript frameworks or build pipelines.