Migration

Coming from Pico CSS

Move a page or a project from Pico CSS v2.1.1 to Pico Reforged.

Pico Reforged keeps the public surface of Pico CSS v2.1.1: the CDN file names, the classes, the attribute hooks and the --pico-* variables. For most pages the migration is one URL.

Drop-in path

<!-- before -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" />

<!-- after -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@1/css/pico.min.css"
/>

Every file of v2.1.1 exists under the same name in css/, in the themes: pico, pico.classless, pico.conditional and pico.fluid.classless in all 20, pico.classless.conditional and pico.fluid.classless.conditional in 19 (upstream never had an azure file for those two). There are 24 more files for the extras.

In npm projects, replace @picocss/pico with @rusticstack/pico-reforged in your imports.

What changes

The source is plain CSS in cascade layers, not Sass. Your own unlayered CSS always beats the framework.
Colors are OKLCH with light-dark(). A computed color can differ slightly from v2.1.1.
The browser floor is Chrome and Edge 111, Firefox 128 and Safari 16.4. Stay on v2.1.1 if you need older browsers.
A <dialog> opened with showModal() animates on its own. .modal-is-open and the other classes still work.

Sass users

The Sass variables are now CSS variables or compiler options.

v2.1.1 Sass	Pico Reforged
`$theme-color`	`--theme jade`, or `@pico { theme: jade; }`
`$enable-classes: false`	`--no-classes`, or the class-less build
`$enable-semantic-container`	`--semantic-container`
`$enable-viewport: false`	`--fluid`
`$parent-selector: ".pico"`	`--scope .pico`
`$modules`	`--exclude components/modal`

Customizing a value is now an override in your own CSS: :root { --pico-border-radius: 0; }.

The full migration guide is in the repository: docs/migration.md.

Not the official Pico CSS

Pico Reforged is a separate project. It is not made, endorsed or supported by the Pico CSS author. Pico CSS was created by Lucas Larroche and is released under the MIT license, which this project keeps.