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

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.

6 points | by anydigital 2 days ago

3 comments

  • Leftium 1 day ago
    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 1 day ago
      Do you have a comparison page, or a list of the annoyances you fixed from PicoCSS, accessible anywhere?
      [-]
      • Leftium 1 day ago
        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 19 hours ago
          Oh, indeed I can't see any reply other than this one :(

          Thanks for the link — that's pretty comprehensive!

          [-]
          • Leftium 19 hours ago
            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 1 day ago
        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...

  • anydigital 2 days ago
    https://github.com/anyblades/blades — new home for Pico CSS

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

  • virrdhiman 4 hours ago
    [flagged]