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