Full-featured themeable CSS framework built on PicoCSS v2.
- 20 color themes — One CSS file per theme, ready to use
- 12-column responsive grid — 6 breakpoints, offsets, ordering, display utilities
- 18 UI components — Accordion, Alert, Badge, Breadcrumb, Button, Card, Forms, Hero, Modal, Nav, Pagination, Progress, Skeleton, Spinner, Table, Toast, Tabs, Var
- Utility classes — Color (text, background, border), positioning (sticky, fixed)
- Dark mode — Automatic (prefers-color-scheme) or manual (
data-theme) - Pure CSS — No JavaScript dependency
- PHP tooling — Build and theming via PHP scripts, no Node.js/SASS required
<!-- Default theme (azure) --><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/@digicreon/mucss/dist/mu.css"><!-- Or pick a specific color theme --><linkrel="stylesheet" href="https://cdn.jsdelivr.net/npm/@digicreon/mucss/dist/mu.violet.css">npm install @digicreon/mucss<!-- Default theme (azure) --><linkrel="stylesheet" href="dist/mu.css"><!-- Or pick a specific color theme --><linkrel="stylesheet" href="dist/mu.violet.css">Each file is self-contained (PicoCSS base + colors + grid + all components).
| azure (default) | red | pink | fuchsia |
| purple | violet | indigo | blue |
| cyan | jade | green | lime |
| yellow | amber | pumpkin | orange |
| sand | grey | zinc | slate |
| Component | Description | Example |
|---|---|---|
| Accordion | Collapsible sections using <details> | accordion.html |
| Alert | Notification banners, 11 colors, dismissible | alert.html |
| Badge | Inline labels, pills, outline, attached | badge.html |
| Breadcrumb | Navigation trail, 4 separator styles, boxed | breadcrumb.html |
| Button | 11 colors, outline, link, 3 sizes | button.html |
| Card | Colored <article> with header/footer | card.html |
| Forms | Input sizes (sm/lg) and validation states | forms.html |
| Hero | Full-width hero sections, 11 colors, gradient | hero.html |
| Modal | Dialog sizes (sm/default/lg/fullscreen) | modal.html |
| Nav | Responsive navbar, burger menu, colored, sticky/fixed | nav.html |
| Pagination | Aligned, sized, borderless, responsive | pagination.html |
| Progress | Colored progress bars | progress.html |
| Skeleton | Loading placeholders, text, title, avatar, image | skeleton.html |
| Spinner | Loading spinners, 11 colors, 3 sizes | spinner.html |
| Table | Hover, striped, bordered, compact | table.html |
| Toast | Fixed-position notifications, 6 positions, 11 colors | toast.html |
| Tabs | Standard, pills, aligned, fullwidth | tabs.html |
| Var | Style <var> like <code>/<kbd>/<samp>, with italic | — |
| Component | Description | Example |
|---|---|---|
| Typography | Headings, blockquote, lists, code, kbd, mark | typography.html |
| Tooltip | data-tooltip with 4 placements | tooltip.html |
| Dropdown | <details class="dropdown"> menus | dropdown.html |
| Group | Input/button groups via role="group" | group.html |
| Loading | Loading states via aria-busy="true" | loading.html |
| Switch | Toggle switches via <input role="switch"> | switch.html |
| Checkbox & Radio | Checkboxes, radios, indeterminate, validation | checkbox-radio.html |
| Range | Range sliders with output | range.html |
| Forms (advanced) | Color, date, time, file, search, helper text | forms-advanced.html |
Flexbox 12-column grid with 6 breakpoints:
| Breakpoint | Prefix | Min-width |
|---|---|---|
| Default | col- | 0 |
| Small | col-sm- | 576px |
| Medium | col-md- | 768px |
| Large | col-lg- | 1024px |
| Extra-large | col-xl- | 1280px |
| Extra-extra-large | col-xxl- | 1536px |
<divclass="row"><divclass="col-12 col-md-6 col-lg-4">Responsive column</div><divclass="col-12 col-md-6 col-lg-8">Responsive column</div></div>Offsets (offset-{n}, offset-md-{n}...), ordering (order-first, order-md-2...) and display utilities (d-none, d-md-block...) are included.
See grid example.
33 utility classes for text, background, and border colors:
.c-{role}— text color (.c-primary,.c-success, …).bg-{role}— background color with automatic inverse text and link color.border-{role}— border color.c-inverse— white/black text for use on filled backgrounds
On <nav> or its parent (e.g. <header>), .bg-* classes also apply a gradient.
| Class | Effect |
|---|---|
.sticky-top | Sticks to top on scroll (stays in flow) |
.fixed-top | Fixed to viewport top (out of flow) |
.fixed-bottom | Fixed to viewport bottom (out of flow) |
On <nav>, these classes automatically add z-index and box-shadow.
| Class | Effect |
|---|---|
.clickable | Pointer cursor on hover (for JS-interactive elements) |
µCSS supports three modes:
<!-- Automatic (follows OS preference) --><html><!-- Force light --><htmldata-theme="light"><!-- Force dark --><htmldata-theme="dark">Requires PHP. No other dependencies.
php build/mu-build.php # Build all 20 themes into dist/
php build/mu-build.php --minify # Build minified
php build/mu-build.php --list # List themes and base filesmucss/
build/
mu-build.php # Build script
mu-color-gen.php # Color variable generator
mu.theme.json # 20 theme definitions
pico.css # PicoCSS v2 base (external)
pico.colors.css # PicoCSS palette (external)
css/
mu.grid.css # 12-column grid
mu.colors.css # Color utility classes
mu.utilities.css # Positioning utilities (sticky, fixed)
mu.component.*.css # UI components (18 files)
dist/ # Build output (21 CSS files)
documentation/ # Component and feature documentation
examples/ # HTML demos for each component
Each theme maps 11 semantic roles to PicoCSS color families:
primary · secondary · tertiary · contrast · accent · success · info · warning · error · pop · spark
popandsparkare derived roles —popuses the same color family asaccentwith lighter shades, andsparkuses the same color family ascontrastwith lighter shades. They do not appear in the theme JSON.
µCSS also provides utility classes for color and positioning — see Utilities.
- Amaury Bouchard — author
- nullterminated — Digicreon/muJS#8
- azmeuk — picocss/pico#701, picocss/pico#700
- Frozenlock — picocss/pico#540
- Yohn — picocss/pico#663, picocss/pico#664, picocss/pico#665
- Bleksak — picocss/pico#715
- ManiShah7 — picocss/pico#694 (fix for picocss/pico#678)
- irfanfadilah — picocss/pico#651
- gustav-langer — picocss/pico#561
See LICENSE.