Skip to content

Commit 7dbc266

Browse files
committed
docs: update file sizes to reflect post-phase-4 feature additions
1 parent 34360a5 commit 7dbc266

2 files changed

Lines changed: 11 additions & 10 deletions

File tree

README.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# nimble.css
22

3-
A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~3 KB gzipped.
3+
A minimal class/classless CSS library. Drop it in and your semantic HTML looks good — no classes required. ~4.4 KB gzipped.
44

55
- **Classless by default** — style every standard HTML element with zero markup changes
66
- **Automatic dark mode** — via `prefers-color-scheme` and `light-dark()`
77
- **OKLCH color system** — perceptually uniform, fully customizable via SCSS config
88
- **Cascade layers** — plays nicely alongside your own styles
9-
- **Tiny**11.9 KB minified, ~3.1 KB gzipped
9+
- **Tiny**19.0 KB minified, ~4.4 KB gzipped
1010

1111
## Demos
1212

@@ -55,8 +55,8 @@ Pick only what you need:
5555

5656
| Bundle | Minified | Contents |
5757
|---|---|---|
58-
| `nimble.min.css` | 11.9 KB | Everything |
59-
| `nimble-base.min.css` | 5.2 KB | Reset + colors + document + typography |
58+
| `nimble.min.css` | 19.0 KB | Everything |
59+
| `nimble-base.min.css` | 5.0 KB | Reset + colors + document + typography |
6060
| `nimble-reset.min.css` | 1.7 KB | Modern CSS reset only |
6161
| `nimble-utilities.min.css` | 572 B | Utility classes only |
6262

specs/nimble-css.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1331,27 +1331,28 @@ Utilities, extended demo, and final validation.
13311331
- [x] Measure `dist/nimble.min.css` against size budget — 11,924 B min / **3,131 B gzipped** (budget: <8 KB min+gz)
13321332
- [x] Verify: all four feature flags (`$enable-dialog`, `$enable-switch`, `$enable-details`, `$enable-utilities`) correctly exclude output when disabled
13331333
- Output: `nimble.css` 15,467 B / `nimble.min.css` 11,924 B / gzipped ~3.1 KB
1334+
- Post-phase additions (details animation, dialog, form restyling, button groups, meter/progress, landing page): `nimble.css` 25,279 B / `nimble.min.css` 19,454 B / gzipped ~4.4 KB / brotli ~3.9 KB
13341335

13351336
---
13361337

13371338
## Appendix: Size Budget
13381339

13391340
| Metric | Estimated | Actual |
13401341
|---|---|---|
1341-
| Full build (min+gz) | ~5.0 KB | **3.1 KB** |
1342-
| Full build (brotli) || **~2.6 KB** |
1343-
| Full build (min) || 11.9 KB |
1344-
| Full build (unmin) || 15.5 KB |
1342+
| Full build (min+gz) | ~5.0 KB | **4.4 KB** |
1343+
| Full build (brotli) || **~3.9 KB** |
1344+
| Full build (min) || 19.0 KB |
1345+
| Full build (unmin) || 24.7 KB |
13451346
| With all flags off (unmin) || ~13.0 KB |
1346-
| Budget ceiling | 8 KB min+gz | 3.1 KB (39% of budget) |
1347+
| Budget ceiling | 8 KB min+gz | 4.4 KB (55% of budget) |
13471348

13481349
The final output is well under all budget targets. The `light-dark()` function and CSS cascade layers compress extremely well because they reuse the same variable names repeatedly.
13491350

13501351
## Appendix: Comparison Matrix
13511352

13521353
| Feature | nimble.css | PicoCSS | Open Props Normalize | simple.css | new.css | MVP.css |
13531354
|---|---|---|---|---|---|---|
1354-
| Min+gz size | **~3 KB** | ~13 KB | ~3 KB* | ~4 KB | ~4.5 KB | ~8.5 KB |
1355+
| Min+gz size | **~4.4 KB** | ~13 KB | ~3 KB* | ~4 KB | ~4.5 KB | ~8.5 KB |
13551356
| CSS vars on :root | ~20 | 100+ | ~0 (on-demand) | ~15 | ~12 | ~15 |
13561357
| Breakpoints | 1 | 5 | 0 | 1 | 0 | 1 |
13571358
| Surface colors | Yes (4) | No | Yes | No | No | No |

0 commit comments

Comments
 (0)