{"id":49723454,"url":"https://github.com/Digicreon/muCSS","last_synced_at":"2026-05-25T17:00:58.613Z","repository":{"id":342585043,"uuid":"1163989205","full_name":"Digicreon/muCSS","owner":"Digicreon","description":"Full-ffeatured CSS framework","archived":false,"fork":false,"pushed_at":"2026-05-04T13:50:48.000Z","size":652,"stargazers_count":54,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2026-05-04T15:38:37.907Z","etag":null,"topics":["bootstrap","css","picocss","responsive","web"],"latest_commit_sha":null,"homepage":"https://mucss.org/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Digicreon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-22T13:22:28.000Z","updated_at":"2026-05-04T13:51:50.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Digicreon/muCSS","commit_stats":null,"previous_names":["digicreon/mucss"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/Digicreon/muCSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Digicreon%2FmuCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Digicreon%2FmuCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Digicreon%2FmuCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Digicreon%2FmuCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Digicreon","download_url":"https://codeload.github.com/Digicreon/muCSS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Digicreon%2FmuCSS/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33484522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-25T14:31:05.219Z","status":"ssl_error","status_checked_at":"2026-05-25T14:31:02.878Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","css","picocss","responsive","web"],"created_at":"2026-05-09T03:00:58.090Z","updated_at":"2026-05-25T17:00:58.596Z","avatar_url":"https://github.com/Digicreon.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003ca href=\"https://mucss.org/\" target=\"_blank\"\u003e\n\t\u003cimg src=\"https://static.digicreon.com/main/mucss/mucss-icon-128x128.png\" alt=\"µCSS logo\"\u003e\n\u003c/a\u003e\u003c/p\u003e\n\n# µCSS\n\nFull-featured themeable CSS framework built on [PicoCSS v2](https://picocss.com/).\n\n## Features\n\n- **20 color themes** — One CSS file per theme, ready to use\n- **12-column responsive grid** — 6 breakpoints, offsets, ordering, display utilities\n- **18 UI components** — Accordion, Alert, Badge, Breadcrumb, Button, Card, Forms, Hero, Modal, Nav, Pagination, Progress, Skeleton, Spinner, Table, Toast, Tabs, Var\n- **Utility classes** — Color (text, background, border), positioning (sticky, fixed)\n- **Dark mode** — Automatic (prefers-color-scheme) or manual (`data-theme`)\n- **Pure CSS** — No JavaScript dependency\n- **PHP tooling** — Build and theming via PHP scripts, no Node.js/SASS required\n\n## Installation\n\n### CDN (jsDelivr)\n\n```html\n\u003c!-- Default theme (azure) --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@digicreon/mucss/dist/mu.css\"\u003e\n\n\u003c!-- Or pick a specific color theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@digicreon/mucss/dist/mu.violet.css\"\u003e\n```\n\n### npm\n\n```bash\nnpm install @digicreon/mucss\n```\n\n### Local\n\n```html\n\u003c!-- Default theme (azure) --\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/mu.css\"\u003e\n\n\u003c!-- Or pick a specific color theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"dist/mu.violet.css\"\u003e\n```\n\nEach file is self-contained (PicoCSS base + colors + grid + all components).\n\n## Available themes\n\n| | | | |\n|---|---|---|---|\n| azure (default) | red | pink | fuchsia |\n| purple | violet | indigo | blue |\n| cyan | jade | green | lime |\n| yellow | amber | pumpkin | orange |\n| sand | grey | zinc | slate |\n\n## µCSS components\n\n| Component | Description | Example |\n|-----------|-------------|---------|\n| Accordion | Collapsible sections using `\u003cdetails\u003e` | [accordion.html](examples/accordion.html) |\n| Alert | Notification banners, 11 colors, dismissible | [alert.html](examples/alert.html) |\n| Badge | Inline labels, pills, outline, attached | [badge.html](examples/badge.html) |\n| Breadcrumb | Navigation trail, 4 separator styles, boxed | [breadcrumb.html](examples/breadcrumb.html) |\n| Button | 11 colors, outline, link, 3 sizes | [button.html](examples/button.html) |\n| Card | Colored `\u003carticle\u003e` with header/footer | [card.html](examples/card.html) |\n| Forms | Input sizes (sm/lg) and validation states | [forms.html](examples/forms.html) |\n| Hero | Full-width hero sections, 11 colors, gradient | [hero.html](examples/hero.html) |\n| Modal | Dialog sizes (sm/default/lg/fullscreen) | [modal.html](examples/modal.html) |\n| Nav | Responsive navbar, burger menu, colored, sticky/fixed | [nav.html](examples/nav.html) |\n| Pagination | Aligned, sized, borderless, responsive | [pagination.html](examples/pagination.html) |\n| Progress | Colored progress bars | [progress.html](examples/progress.html) |\n| Skeleton | Loading placeholders, text, title, avatar, image | [skeleton.html](examples/skeleton.html) |\n| Spinner | Loading spinners, 11 colors, 3 sizes | [spinner.html](examples/spinner.html) |\n| Table | Hover, striped, bordered, compact | [table.html](examples/table.html) |\n| Toast | Fixed-position notifications, 6 positions, 11 colors | [toast.html](examples/toast.html) |\n| Tabs | Standard, pills, aligned, fullwidth | [tabs.html](examples/tabs.html) |\n| Var | Style `\u003cvar\u003e` like `\u003ccode\u003e`/`\u003ckbd\u003e`/`\u003csamp\u003e`, with italic | — |\n\n## PicoCSS native\n\n| Component | Description | Example |\n|-----------|-------------|---------|\n| Typography | Headings, blockquote, lists, code, kbd, mark | [typography.html](examples/typography.html) |\n| Tooltip | `data-tooltip` with 4 placements | [tooltip.html](examples/tooltip.html) |\n| Dropdown | `\u003cdetails class=\"dropdown\"\u003e` menus | [dropdown.html](examples/dropdown.html) |\n| Group | Input/button groups via `role=\"group\"` | [group.html](examples/group.html) |\n| Loading | Loading states via `aria-busy=\"true\"` | [loading.html](examples/loading.html) |\n| Switch | Toggle switches via `\u003cinput role=\"switch\"\u003e` | [switch.html](examples/switch.html) |\n| Checkbox \u0026 Radio | Checkboxes, radios, indeterminate, validation | [checkbox-radio.html](examples/checkbox-radio.html) |\n| Range | Range sliders with output | [range.html](examples/range.html) |\n| Forms (advanced) | Color, date, time, file, search, helper text | [forms-advanced.html](examples/forms-advanced.html) |\n\n## Grid\n\nFlexbox 12-column grid with 6 breakpoints:\n\n| Breakpoint | Prefix | Min-width |\n|------------|--------|-----------|\n| Default | `col-` | 0 |\n| Small | `col-sm-` | 576px |\n| Medium | `col-md-` | 768px |\n| Large | `col-lg-` | 1024px |\n| Extra-large | `col-xl-` | 1280px |\n| Extra-extra-large | `col-xxl-` | 1536px |\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-12 col-md-6 col-lg-4\"\u003eResponsive column\u003c/div\u003e\n  \u003cdiv class=\"col-12 col-md-6 col-lg-8\"\u003eResponsive column\u003c/div\u003e\n\u003c/div\u003e\n```\n\nOffsets (`offset-{n}`, `offset-md-{n}`...), ordering (`order-first`, `order-md-2`...) and display utilities (`d-none`, `d-md-block`...) are included.\n\nSee [grid example](examples/grid.html).\n\n## Utilities\n\n### Color classes\n\n33 utility classes for text, background, and border colors:\n\n- `.c-{role}` — text color (`.c-primary`, `.c-success`, …)\n- `.bg-{role}` — background color with automatic inverse text and link color\n- `.border-{role}` — border color\n- `.c-inverse` — white/black text for use on filled backgrounds\n\nOn `\u003cnav\u003e` or its parent (e.g. `\u003cheader\u003e`), `.bg-*` classes also apply a gradient.\n\n### Positioning\n\n| Class | Effect |\n|-------|--------|\n| `.sticky-top` | Sticks to top on scroll (stays in flow) |\n| `.fixed-top` | Fixed to viewport top (out of flow) |\n| `.fixed-bottom` | Fixed to viewport bottom (out of flow) |\n\nOn `\u003cnav\u003e`, these classes automatically add `z-index` and `box-shadow`.\n\n### Cursor\n\n| Class | Effect |\n|-------|--------|\n| `.clickable` | Pointer cursor on hover (for JS-interactive elements) |\n\n## Dark mode\n\nµCSS supports three modes:\n\n```html\n\u003c!-- Automatic (follows OS preference) --\u003e\n\u003chtml\u003e\n\n\u003c!-- Force light --\u003e\n\u003chtml data-theme=\"light\"\u003e\n\n\u003c!-- Force dark --\u003e\n\u003chtml data-theme=\"dark\"\u003e\n```\n\n## Build\n\nRequires PHP. No other dependencies.\n\n```bash\nphp build/mu-build.php              # Build all 20 themes into dist/\nphp build/mu-build.php --minify     # Build minified\nphp build/mu-build.php --list       # List themes and base files\n```\n\n## Project structure\n\n```\nmucss/\n  build/\n    mu-build.php          # Build script\n    mu-color-gen.php      # Color variable generator\n    mu.theme.json         # 20 theme definitions\n    pico.css              # PicoCSS v2 base (external)\n    pico.colors.css       # PicoCSS palette (external)\n  css/\n    mu.grid.css           # 12-column grid\n    mu.colors.css         # Color utility classes\n    mu.utilities.css      # Positioning utilities (sticky, fixed)\n    mu.component.*.css    # UI components (18 files)\n  dist/                   # Build output (21 CSS files)\n  documentation/          # Component and feature documentation\n  examples/               # HTML demos for each component\n```\n\n## Color roles\n\nEach theme maps 11 semantic roles to PicoCSS color families:\n\n**primary** · **secondary** · **tertiary** · **contrast** · **accent** · **success** · **info** · **warning** · **error** · **pop** · **spark**\n\n\u003e `pop` and `spark` are derived roles — `pop` uses the same color family as `accent` with lighter shades, and `spark` uses the same color family as `contrast` with lighter shades. They do not appear in the theme JSON.\n\nµCSS also provides utility classes for color and positioning — see [Utilities](#utilities).\n\n## Contributors\n\n- [Amaury Bouchard](https://github.com/Amaury) — author\n- [nullterminated](https://github.com/nullterminated) — digicreon/mujs#8\n- [azmeuk](https://github.com/azmeuk) — picocss/pico#701, picocss/pico#700\n- [Frozenlock](https://github.com/Frozenlock) — picocss/pico#540\n- [Yohn](https://github.com/Yohn) — picocss/pico#663, picocss/pico#664, picocss/pico#665\n- [Bleksak](https://github.com/Bleksak) — picocss/pico#715\n- [ManiShah7](https://github.com/ManiShah7) — picocss/pico#694 (fix for picocss/pico#678)\n- [irfanfadilah](https://github.com/irfanfadilah) — picocss/pico#651\n- [gustav-langer](https://github.com/gustav-langer) — picocss/pico#561\n\n## License\n\nSee [LICENSE](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDigicreon%2FmuCSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDigicreon%2FmuCSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDigicreon%2FmuCSS/lists"}