Getting started

Class-less version

Embrace minimalism with Pico’s .classless version, a semantic option for wild HTML purists who prefer a stripped-down approach.

Pico provides a .classless version (example).

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

/* Containers */ body > header, body > main, body > footer {  ... }

These 2 pages have the same style:

<!-- With pico.min.css --> <body>  <main class="container">  <h1>Hello, world!</h1>  </main> </body>
<!-- With pico.classless.min.css --> <body>  <main>  <h1>Hello, world!</h1>  </main> </body>

See the version picker to easily select the ideal Pico CSS version variant to match your project's needs.

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@2/css/pico.classless.min.css" >
<!-- Fluid viewport --> <link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.fluid.classless.min.css" >

Root container#

If you need to customize the default root container for <header>, <main>, and <footer>, you can recompile Pico with another CSS selector.

Useful for React, Gatsby, or Next.js.

/* Custom Class-less version for React */ @use "pico" with (   // Define the root element used to target <header>, <main>, <footer>  // with $enable-semantic-container and $enable-responsive-spacings  $semantic-root-element: "#root",   // Enable <header>, <main>, <footer> inside $semantic-root-element as containers  $enable-semantic-container: true,   // Enable .classes  $enable-classes: false )

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

/* Containers */ #root > header, #root > main, #root > footer {  ... }

Learn more about compiling a custom version of Pico with SASS.

Edit this page on GitHub