Apparently the other reply got auto-flagged because it was detected as genai. Let me paraphrase that comment (easier than reading that entire MD document, which was AI-written):
The main annoyances:
- oversized buttons
- 100+ root custom properties in devtools
- fighting against too many breakpoints (unpredictable font/container sizing)
---
I also changed/added some features:
- much smaller core: only 4.1 KB Brotli
- CSS cascade layers so app CSS can override more easily
- a surface color system (a la Open Props)
- OKLCH colors with auto derived hover/focus states and light-dark() theming
- centered layout with real gutters, plus content bleed outside gutters
- .no-nimble opt-out class (instead of .pico opt-in)
- ability to configure universal control-density (buttons, inputs, selects)
- fighting against breakpoint-heavy font and container sizing
- container "padding" that could disappear at exact breakpoints
- having to fight framework styles with specificity
Nimble uses more compact controls, ~20 semantic variables, simpler grid-based centering with real gutters, and cascade layers so normal app CSS wins.
---
I also added some features/changed:
- much smaller core: Nimble is only 4.1 KB Brotli
- cascade layers, so normal app CSS can override the library without specificity fights
- a surface hierarchy for page/card/input/overlay backgrounds (a la Open Props)
- OKLCH colors with derived hover/focus states and light-dark() theming
- centered layout with real gutters, plus bleed-edge, bleed-wide, and bleed-full
- .no-nimble to opt third-party component subtrees out of Nimble styling
- shared control-density customization for buttons, inputs, selects, etc.
- .nc-join for visually joined controls without coupling that styling to ARIA role="group" (this kept confusing coding agents; technically they should not be coupled)
My nimble.css is inspired by PicoCSS: https://leftium.github.io/nimble.css/demo/pico.html
But it's not a drop-in replacement. (I fixed several annoyances I had while using PicoCSS.)
Do you have a comparison page, or a list of the annoyances you fixed from PicoCSS, accessible anywhere?
For some reason my detailed reply got flagged...
So if you can't see it: feature-comparison matrix plus notes from migrating several real projects from Pico:
https://github.com/Leftium/nimble.css/blob/main/specs/pico-m...
Oh, indeed I can't see any reply other than this one :(
Thanks for the link — that's pretty comprehensive!
Apparently the other reply got auto-flagged because it was detected as genai. Let me paraphrase that comment (easier than reading that entire MD document, which was AI-written):
The main annoyances:
- oversized buttons
- 100+ root custom properties in devtools
- fighting against too many breakpoints (unpredictable font/container sizing)
---
I also changed/added some features:
- much smaller core: only 4.1 KB Brotli
- CSS cascade layers so app CSS can override more easily
- a surface color system (a la Open Props)
- OKLCH colors with auto derived hover/focus states and light-dark() theming
- centered layout with real gutters, plus content bleed outside gutters
- .no-nimble opt-out class (instead of .pico opt-in)
- ability to configure universal control-density (buttons, inputs, selects)
The main annoyances:
- oversized buttons
- 100+ root custom properties cluttering DevTools
- fighting against breakpoint-heavy font and container sizing
- container "padding" that could disappear at exact breakpoints
- having to fight framework styles with specificity
Nimble uses more compact controls, ~20 semantic variables, simpler grid-based centering with real gutters, and cascade layers so normal app CSS wins.
---
I also added some features/changed:
- much smaller core: Nimble is only 4.1 KB Brotli
- cascade layers, so normal app CSS can override the library without specificity fights
- a surface hierarchy for page/card/input/overlay backgrounds (a la Open Props)
- OKLCH colors with derived hover/focus states and light-dark() theming
- centered layout with real gutters, plus bleed-edge, bleed-wide, and bleed-full
- .no-nimble to opt third-party component subtrees out of Nimble styling
- shared control-density customization for buttons, inputs, selects, etc.
- .nc-join for visually joined controls without coupling that styling to ARIA role="group" (this kept confusing coding agents; technically they should not be coupled)
---
Feature-comparison matrix plus notes from migrating several real projects from Pico: https://github.com/Leftium/nimble.css/blob/main/specs/pico-m...
https://github.com/anyblades/blades — new home for Pico CSS
https://github.com/anyblades/pico — underlying fork
[flagged]