Settings

Theme

Pico CSS is no longer maintained (final release v2.1.1)

8 points by anydigital · 8 comments · 1 min read


Official announcement: https://picocss.com/docs/maintenance

For those looking for active alternatives or forks, Blades CSS (https://blades.dev/) launched earlier this year as a fully compatible, actively maintained successor, and is already adopted by the Flask/Jinja community website, Grav CMS v2, and FastHTML.

2 threads
Leftium

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

  • waldir

    Do you have a comparison page, or a list of the annoyances you fixed from PicoCSS, accessible anywhere?

    • Leftium

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

      • waldir

        Oh, indeed I can't see any reply other than this one :(

        Thanks for the link — that's pretty comprehensive!

        • Leftium

          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)

    • Leftium

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

anydigitalOP

https://github.com/anyblades/blades — new home for Pico CSS

https://github.com/anyblades/pico — underlying fork

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection