@digicreon/mucss 1.2.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +11 -9
- package/dist/mu.amber.css +1 -1
- package/dist/mu.azure.css +1 -1
- package/dist/mu.blue.css +1 -1
- package/dist/mu.css +1 -1
- package/dist/mu.cyan.css +1 -1
- package/dist/mu.fuchsia.css +1 -1
- package/dist/mu.green.css +1 -1
- package/dist/mu.grey.css +1 -1
- package/dist/mu.indigo.css +1 -1
- package/dist/mu.jade.css +1 -1
- package/dist/mu.lime.css +1 -1
- package/dist/mu.orange.css +1 -1
- package/dist/mu.pink.css +1 -1
- package/dist/mu.pumpkin.css +1 -1
- package/dist/mu.purple.css +1 -1
- package/dist/mu.red.css +1 -1
- package/dist/mu.sand.css +1 -1
- package/dist/mu.slate.css +1 -1
- package/dist/mu.violet.css +1 -1
- package/dist/mu.yellow.css +1 -1
- package/dist/mu.zinc.css +1 -1
- package/documentation/mu.grid.md +7 -7
- package/documentation/mu.table.md +8 -19
- package/documentation/mu.var.md +53 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,8 +5,8 @@ Full-featured themeable CSS framework built on [PicoCSS v2](https://picocss.com/
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
7
|
- **20 color themes** — One CSS file per theme, ready to use
|
|
8
|
-
- **12-column responsive grid** —
|
|
9
|
-
- **
|
|
8
|
+
- **12-column responsive grid** — 6 breakpoints, offsets, ordering, display utilities
|
|
9
|
+
- **18 UI components** — Accordion, Alert, Badge, Breadcrumb, Button, Card, Forms, Hero, Modal, Nav, Pagination, Progress, Skeleton, Spinner, Table, Toast, Tabs, Var
|
|
10
10
|
- **Utility classes** — Color (text, background, border), positioning (sticky, fixed)
|
|
11
11
|
- **Dark mode** — Automatic (prefers-color-scheme) or manual (`data-theme`)
|
|
12
12
|
- **Pure CSS** — No JavaScript dependency
|
|
@@ -70,9 +70,10 @@ Each file is self-contained (PicoCSS base + colors + grid + all components).
|
|
|
70
70
|
| Progress | Colored progress bars | [progress.html](examples/progress.html) |
|
|
71
71
|
| Skeleton | Loading placeholders, text, title, avatar, image | [skeleton.html](examples/skeleton.html) |
|
|
72
72
|
| Spinner | Loading spinners, 11 colors, 3 sizes | [spinner.html](examples/spinner.html) |
|
|
73
|
-
| Table | Hover, striped, bordered, compact
|
|
73
|
+
| Table | Hover, striped, bordered, compact | [table.html](examples/table.html) |
|
|
74
74
|
| Toast | Fixed-position notifications, 6 positions, 11 colors | [toast.html](examples/toast.html) |
|
|
75
75
|
| Tabs | Standard, pills, aligned, fullwidth | [tabs.html](examples/tabs.html) |
|
|
76
|
+
| Var | Style `<var>` like `<code>`/`<kbd>`/`<samp>`, with italic | — |
|
|
76
77
|
|
|
77
78
|
## PicoCSS native
|
|
78
79
|
|
|
@@ -90,15 +91,16 @@ Each file is self-contained (PicoCSS base + colors + grid + all components).
|
|
|
90
91
|
|
|
91
92
|
## Grid
|
|
92
93
|
|
|
93
|
-
Flexbox 12-column grid with
|
|
94
|
+
Flexbox 12-column grid with 6 breakpoints:
|
|
94
95
|
|
|
95
96
|
| Breakpoint | Prefix | Min-width |
|
|
96
97
|
|------------|--------|-----------|
|
|
97
98
|
| Default | `col-` | 0 |
|
|
98
|
-
| Small | `col-sm-` |
|
|
99
|
-
| Medium | `col-md-` |
|
|
100
|
-
| Large | `col-lg-` |
|
|
101
|
-
| Extra-large | `col-xl-` |
|
|
99
|
+
| Small | `col-sm-` | 576px |
|
|
100
|
+
| Medium | `col-md-` | 768px |
|
|
101
|
+
| Large | `col-lg-` | 1024px |
|
|
102
|
+
| Extra-large | `col-xl-` | 1280px |
|
|
103
|
+
| Extra-extra-large | `col-xxl-` | 1536px |
|
|
102
104
|
|
|
103
105
|
```html
|
|
104
106
|
<div class="row">
|
|
@@ -173,7 +175,7 @@ mucss/
|
|
|
173
175
|
mu.grid.css # 12-column grid
|
|
174
176
|
mu.colors.css # Color utility classes
|
|
175
177
|
mu.utilities.css # Positioning utilities (sticky, fixed)
|
|
176
|
-
mu.component.*.css # UI components (
|
|
178
|
+
mu.component.*.css # UI components (18 files)
|
|
177
179
|
dist/ # Build output (21 CSS files)
|
|
178
180
|
documentation/ # Component and feature documentation
|
|
179
181
|
examples/ # HTML demos for each component
|