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