PimentCSS v1.0
1.0 is the first stable release of PimentCSS as a design system from Webmonster (opens in new tab) and numera11y (opens in new tab). It extends the upstream Piment-Css micro-framework with OKLCH tokens, a customizable Sass layer, documented components, and accessibility checks baked into the doc pipeline.
- Ship fast: npm, CDN, or Sass
@use … with ()(see Installation). - Theme safely: semantic
--surface-*/--text-*tokens with light and dark parity (Colors, Theme toggle). - Compose pages: Patterns recipes plus slots, forms, navigation, and feedback components.
- Verify a11y: RGAA/WCAG AA guidance and focus/touch targets (Accessibility guide).
Foundations
| Area | Highlights | Docs |
|---|---|---|
| Color | OKLCH palettes, hex fallback, semantic swatches | Colors |
| Type | Heading scale, body utilities, licensed font pipeline | Typography |
| Layout | .container, 12-column grid, spacing utilities | Layout |
| Depth | Elevation shadows and z-index tokens | Depth & shadows |
| Modes | data-theme, system preference, .theme-toggle | Theme toggle |
| Icons | Dimensioned slots, any SVG or icon font; Phosphor in docs only | Icons |
Components
All documented classes are validated against dist/pimentcss.css (npm run test:doc-classes). Grouped by product area:
- Forms: fields, selection controls, form layout, date picker, autocomplete.
- Actions: buttons, button groups, links and breadcrumb.
- Navigation: header nav, menus, tabs, pagination, in-page anchors, carousel.
- Content: tables, lists, tree, badges, tags, keyline, placeholders.
- Feedback: alerts, modals, cards, snackbar, progress, loader.
New in v1 for page composition: Patterns (contact form, toolbar + modal, table + pagination) and Slots & layouts.
Documentation site
- Astro static site with live component previews and copyable snippets.
- Package manager tabs on Installation; Introduction quick paths (npm, Sass, a11y).
- Playwright UX tests (mobile, tablet, desktop) and axe WCAG 2.2 AA audits on doc pages.
Coming from Piment-Css
PimentCSS v1 keeps the spirit of the upstream micro-framework but is a full design system release:
- Classes are unprefixed by default (
.btn, not.hm-btn). Override$prefixin Sass if you need a namespace. - Prefer semantic tokens over raw palette steps in custom CSS.
- See the comparison table in the repo README (opens in new tab).
After v1
Patch releases will note fixes in CHANGELOG.md (opens in new tab). Minor releases will extend this page with a new h2 section per version. For roadmap ideas, see PROSPECTIVE.md in the repository.