Quick start

Pico Reforged styles native HTML elements. Link the stylesheet, write semantic markup, and you are done. There is nothing to compile for the CDN route.

Link the stylesheet

Add this to the <head> of your page. The link uses @1, the newest 1.x release.

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

Prefer npm? Run npm install @rusticstack/pico-reforged and see Installation.

Starter template

Set the viewport, wrap your content in <main class="container">, and use plain elements inside.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@rusticstack/pico-reforged@1/css/pico.min.css"
    />
    <title>Hello, world</title>
  </head>
  <body>
    <main class="container">
      <h1>Hello, world</h1>
    </main>
  </body>
</html>

A first look

Every example in these docs is a live page in a sandboxed frame. The theme and color scheme you pick in the header apply to it.

<main class="container">
  <hgroup>
    <h1>Hello, world</h1>
    <p>Plain HTML, styled.</p>
  </hgroup>
  <p>
    Buttons, forms, tables and dialogs all work without classes.
  </p>
  <button>Primary</button>
  <button class="secondary">Secondary</button>
  <button class="contrast">Contrast</button>
  <button class="outline">Outline</button>
  <form>
    <label>
      Email
      <input type="email" name="email" placeholder="you@example.com" />
    </label>
    <button type="submit">Subscribe</button>
  </form>
</main>

Light and dark

The page follows the visitor's system setting through color-scheme. To force one, set data-theme="light" or data-theme="dark" on <html>, or on any element to switch only that part of the page.

<html lang="en" data-theme="dark">

Pick a theme

The default theme is azure. For another color, link a themed file instead, for example css/pico.jade.min.css. See Themes.

Next steps

• Installation for npm, Vite, Next.js and downloads.
• Usage to choose between the class, class-less, conditional and fluid builds.
• Version picker for every file name.