@digicreon/mucss

v1.0.0

Published

6 days ago

µCSS — A CSS framework built on PicoCSS v2

0High
0Medium
0Low

amaury.net

css framework picocss responsive grid components dark-mode accessible

µCSS

Lightweight CSS framework built on PicoCSS v2, part of the Temma-UI project.

Features

20 color themes — One CSS file per theme, ready to use
12-column responsive grid — 5 breakpoints, offsets, ordering, display utilities
13 UI components — Accordion, Alert, Badge, Breadcrumb, Button, Card, Forms, Modal, Pagination, Progress, Spinner, Table, Tabs
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
PicoCSS compatible — All variables use the --pico- prefix

Installation

Include a single CSS file from dist/:

<!-- Default theme (azure) -->
<link rel="stylesheet" href="dist/mu.css">

<!-- Or pick a specific color theme -->
<link rel="stylesheet" href="dist/mu.violet.css">

Each file is self-contained (PicoCSS base + colors + grid + all components).

Available themes

| | | | | |---|---|---|---| | azure (default) | red | pink | fuchsia | | purple | violet | indigo | blue | | cyan | jade | green | lime | | yellow | amber | pumpkin | orange | | sand | grey | zinc | slate |

µCSS components

| Component | Description | Example | |-----------|-------------|---------| | Accordion | Collapsible sections using <details> | accordion.html | | Alert | Notification banners, 8 colors, dismissible | alert.html | | Badge | Inline labels, pills, outline, attached | badge.html | | Breadcrumb | Navigation trail, 4 separator styles, boxed | breadcrumb.html | | Button | 8 colors, ghost, link, 3 sizes | button.html | | Card | Colored <article> with header/footer | card.html | | Forms | Input sizes (sm/lg) and validation states | forms.html | | Modal | Dialog sizes (sm/default/lg/fullscreen) | modal.html | | Pagination | Aligned, sized, borderless, responsive | pagination.html | | Progress | Colored progress bars | progress.html | | Spinner | Loading spinners, 8 colors, 3 sizes | spinner.html | | Table | Hover, striped, bordered, compact, fullwidth | table.html | | Tabs | Standard, pills, aligned, fullwidth | tabs.html |

PicoCSS native

| 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 |

Grid

Flexbox 12-column grid with 5 breakpoints:

| Breakpoint | Prefix | Min-width | |------------|--------|-----------| | Default | col- | 0 | | Small | col-sm- | 640px | | Medium | col-md- | 960px | | Large | col-lg- | 1200px | | Extra-large | col-xl- | 1400px |

<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Responsive column</div>
  <div class="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.

Dark mode

µCSS supports three modes:

<!-- Automatic (follows OS preference) -->
<html>

<!-- Force light -->
<html data-theme="light">

<!-- Force dark -->
<html data-theme="dark">

Build

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 files

Project structure

mucss/
  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.component.*.css    # UI components (13 files)
  dist/                   # Build output (21 CSS files)
  examples/               # HTML demos for each component
  specification.md        # Full specification

Color roles

Each theme maps 8 semantic roles to PicoCSS color families:

primary · secondary · tertiary · contrast · success · info · warning · error

License

See LICENSE.