Usage

Pico Reforged comes in a few builds. They share the same tokens, themes and element styles. What differs is whether classes are available, where the styles apply, and how wide the page container is. All of them are ready-made files in css/, see the version picker for the names.

Class build#

The default build styles elements by tag and adds optional classes: .container, .container-fluid, .grid, .secondary, .contrast, .outline, .overflow-auto and a few more. Wrap the page in a .container, and the width follows the breakpoints.

<main class="container">
  <h1>Class build</h1>
  <div class="grid">
    <button>Primary</button>
    <button class="secondary">Secondary</button>
    <button class="outline">Outline</button>
  </div>
</main>

For a full-width container in this build, use class="container-fluid". See Container.

Class-less build#

Every selector that needs a class is dropped. Elements are styled by tag and by ARIA or attribute hooks, and body > header, body > main and body > footer become centered containers, so you need no .container. The details and a live example are on the Class-less version page.

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

Conditional build#

The conditional files prefix every rule with .pico, so the styles reach only what is inside that element. The rest of the page is left to your own CSS or another framework.

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

<main class="pico">
  <h1>Styled by Pico Reforged</h1>
  <button>Primary</button>
</main>
<p>Not styled.</p>

The :root and html rules, the *, body and .container rules and the .modal-is-* classes on html stay global, as in Pico CSS v2.1.1. The scoped class-less files read the semantic container as .pico body > main, so put class="pico" on <html> there.

For another selector, build the file yourself:

npx pico-reforged build --scope .docs --minify --out docs.css

Fluid class-less build#

pico.fluid.classless.min.css is the class-less build with no maximum width on the semantic container. Header, main and footer fill the viewport and keep their padding. A scoped variant exists too, but only with a theme, for example pico.fluid.classless.conditional.jade.min.css.

Light and dark#

All builds follow the system setting. Set data-theme on <html> to force a scheme for the page, or on any element to force it for that element only. The color tokens are recomputed inside it, so a light card on a dark page works.

<section data-theme="dark" style="padding: 1rem; background: var(--pico-background-color)">
  <h3>Dark section</h3>
  <p>This section is always dark.</p>
  <article data-theme="light">
    <p>This card is always light.</p>
    <button>Action</button>
  </article>
</section>

To let visitors switch, toggle the attribute in a script and keep the choice in localStorage.

Combining#

Builds and options mix. A themed, scoped class-less file is pico.classless.conditional.jade.min.css. For a combination that has no ready-made file (a custom color, fewer modules, extras built in), use the CLI:

npx pico-reforged build --entry classless --theme "#e5484d" --extras tabs --minify --out public/pico.css

Related pages: Themes, Integrations, Extras.