Class-less version

For wild HTML purists!

Pico provides a .classless version (example).

In this version, <header>, <main>, and <footer> act as containers to define a centered or a fluid viewport.

// Containers
body > header,
body > main,
body > footer {
  …
}

Usage:

Use the default .classless version if you need centered viewports:

<link rel="stylesheet" href="css/pico.classless.min.css">

Or use the .fluid.classless version if you need a fluid container:

<link rel="stylesheet" href="css/pico.fluid.classless.min.css">

These .classless versions are also available on jsDelivr CDN:

// Centered viewport
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.classless.min.css">

// Fluid viewport
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.fluid.classless.min.css">

If you need to customize the default parent (<body>) for <header>, <main>, and <footer>, you can recompile Pico by defining another CSS selector.

Useful for React, Gatsby or Next.js.

/* Custom Class-less version for React */

// Set the root element
$semantic-root-element: "#root";

// Enable <header>, <main>, <footer> inside $semantic-root-element as containers
$enable-semantic-container: true;

// Enable .classes
$enable-classes: false;

// Import Pico
@import "@picocss/pico/scss/pico";

The code above will compile Pico with the containers defined like this:

// Containers
#root > header,
#root > main,
#root > footer {
  …
}