Menu
Pico Reforgedv2.0

Suggested

↑↓ to moveEnter to openEsc to close

Color scheme

Primary color

Theme: azure

Getting startedIntroduction

Introduction

What Pico Reforged is, why it exists, and where it comes from.

On this page

Pico Reforged is a small CSS framework for semantic HTML. You write <button>, <table>, <dialog> and <form>, and they look right without a class on them. A gzipped pico.min.css is about 11.7 kB (10.3 kB with brotli).

It is a fork of Pico CSS v2.1.1 rewritten in plain modern CSS. The same class names, attribute hooks and --pico-* variables work, so a page built for Pico CSS keeps working. See Coming from Pico CSS.

No classes needed
<article>
  <header><strong>Semantic HTML</strong></header>
  <p>Headings, forms, tables and dialogs are styled by their tag.</p>
  <footer>
    <button>Save</button>
  </footer>
</article>

Why a fork

Pico CSS v2.1.1 is the last upstream release and the repository is archived. The maintainer said what a successor would need: plain CSS instead of Sass, newer platform features, and a native tool that strips unused CSS. Pico Reforged is that attempt. The reasons are written down in ADR 0001.

What is different

  • Plain CSS in src/, no Sass. Native nesting, custom properties and cascade layers.
  • Colors are OKLCH. Light and dark values are written once with light-dark().
  • Every rule sits in the pico layer, so your own unlayered CSS wins without !important. The order is pico.tokens, pico.theme, pico.core, pico.extras, pico.utilities.
  • 20 color themes, plus a custom theme from one color with pico-reforged build --theme "#e5484d".
  • Class, class-less, conditional (scoped to .pico) and fluid class-less builds, with the same CDN file names as v2.1.1. See the version picker.
  • Opt-in extras for apps: tabs, alert, toast, badge, avatar, skeleton, app shell, data table, pagination, stepper and empty state.
  • A CLI and Vite and PostCSS integrations that remove unused rules. The default purge mode is safe, and aggressive is opt-in.
  • Popover and anchor positioning patterns for menus and tooltips, next to the existing details.dropdown and [data-tooltip] markup.

What stays the same

There is no JavaScript to load. The one thing you script yourself is opening a <dialog> with showModal(). The browser floor is Chrome and Edge 111, Firefox 128 and Safari 16.4, see browser support.

Credit

Pico CSS was created by Lucas Larroche and is released under the MIT license. Pico Reforged is a separate project by rusticstack, also MIT. It is not the official Pico CSS, it is not made or endorsed by its author, and it does not use the Pico CSS logo. The origin is credited in the banner of every built file and in the license.

Next steps