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...
- 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...