Pico builds and installing with npm

Pico ships not as one file but as a set of builds — ready CSS files with different settings. You pick the one that suits the project and link it the same way as in the previous lesson.

Regular and classless builds

The classless build needs no container: Pico limits the width of <header>, <main> and <footer> itself when they sit directly in <body>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
 
<main>
  <h1>Anna's blog</h1>
  <p>Notes on layout, CSS and small websites.</p>
</main>

The preview shows text with side margins, as in the previous lesson, although there is no container class. The classless build is good for docs and simple pages; once you need a column grid, switch to pico.min.css.

Color variants

Pico's main color is azure. Other colors have their own files: pico.jade.min.css, pico.amber.min.css, pico.purple.min.css and about fifteen more. Classless ones too: pico.classless.jade.min.css.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.jade.min.css">
 
<p>New post: <a href="#">A grid without media queries</a></p>
<button>Subscribe</button>

The link and the button turned jade green. More on colors in the customization chapter.

Installing with npm

If the site is built with a bundler, Pico is installed as a package. Create a Vite project and install Pico:

npm create vite@latest anna-blog -- --template vanilla
cd anna-blog
npm install @picocss/pico

Then import the styles in the main script file src/main.js — Vite adds them to the page itself:

// src/main.js
import '@picocss/pico/css/pico.min.css';

Run npm run dev and open http://localhost:5173: the default Vite page is already styled by Pico. The package files live in node_modules/@picocss/pico/css/ — the same builds as on the CDN. Better delete the starter src/style.css from the Vite template along with its import, or it overrides part of Pico's styles.

Common mistake

Linking the classless build and writing class="grid" or class="secondary". pico.classless.min.css has no such classes, so the markup stays unstyled. If you need classes, link pico.min.css.