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 {
+  …
+}
+