Goodbye... Pico.

Lucas Larroche declared on Oct 4, 2026 that he was archiving PicoCSS and it really upset me. Here was a library that I promoted, used in several websites, and really saw as the future of minimalistic web development.

This was basically me after the news:

Starting last month sometime, I decided that I would rewrite the library to not only address some of the issues Lucas outlind such as using OKLCH colors, cascade layers, and the Popover API, but to also make some architectural decisions that I didn't agree. And guess what? Today's the day I finally pushed everything up on GitHub. There is a full demo on jsfiddle too: https://jsfiddle.net/mvsq4wbg/

The name I decided to go with is T'Pico, which is a double entendre not only representing the minimalistic nature of Pico's original vision but also as a play on the Cajun norm of putting "T" in front of people's names (like father "Bob" and son "T'Bob"); in a sense T'Pico is a child born out of PicoCSS.

I think one of the best new features that I added was the offcanvas component. This takes the existing paradigm of using an <aside> element to transform existing component, in this case it turns a normal dialog into an offcanvas that comes in and out of view from the "start" side of the viewport. An example of a basic offcanvas looks like this:

<dialog id="example-offcanvas" closedby="any" aria-labelledby="offcanvas-title">
  <aside>
    <article>
      <header>
        <button type="button" command="request-close" commandfor="example-offcanvas" aria-label="Hide offcanvas"></button>
        <h2 id="offcanvas-title">T'Pico Offcanvas</h2>
      </header>

      <p>
        Let slide into your view baby.
      </p>

      <footer>
        <button type="button" command="request-close" commandfor="example-offcanvas">
          Close
        </button>
      </footer>
    </article>
  </aside>
</dialog>

Another feature that existed in Pico as part of the class-based version that I ported over without using classes is the dropdown component. This takes a button and a list then leverages the native Popover attribute to display dropdowns:

<button type="button" popovertarget="example-dropdown">
  Settings
</button>
<ul id="example-dropdown" popover>
  <li><a href="#profile">Profile</a></li>
  <li><a href="#settings">Settings</a></li>
  <li><a href="#help">Help</a></li>
</ul>

Outside of implementing new things, I think more importantly is that there were some questionable practices that weren't carried over. For example, the RTL attribute in Pico was used to dictate the direction of components when in reality, MDN defines it as:

A locale property indicating that text is written from right to left.

Rather than hijacking this attribute to manage visual appearances of components, I felt like it was better left out entirely.

Full disclaimer if you decide to check out the repository: I basically gave ChatGPT my source code for T'Pico and told it to write the documentation for me. This saved me hours in building out the documentation. I know some will poo-poo on that, but it really helped me with the tedious stuff that I'm not really good at. In case you can't tell by this post, I cant spel are grammur goodly.

I look forward to hearing y'all's feedback and let's keep the move to more minimalistic web development going!