Сборки Pico и установка через npm

Pico поставляется не одним файлом, а набором сборок — готовых CSS-файлов с разными настройками. Вы выбираете одну, подходящую проекту, и подключаете её так же, как в прошлом уроке.

Обычная и бесклассовая сборка

В бесклассовой сборке контейнер не нужен: Pico сам ограничивает ширину у <header>, <main> и <footer>, если они лежат прямо в <body>:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css">
 
<main>
  <h1>Блог Анны</h1>
  <p>Заметки о вёрстке, CSS и небольших сайтах.</p>
</main>

В превью текст с полями по краям, как в прошлом уроке, хотя класса container нет. Бесклассовая сборка хороша для документации и простых страниц; если понадобится сетка из колонок — переходите на pico.min.css.

Цветные варианты

Основной цвет Pico — голубой (azure). Для других цветов есть отдельные файлы: pico.jade.min.css, pico.amber.min.css, pico.purple.min.css и ещё полтора десятка. Бесклассовые тоже: pico.classless.jade.min.css.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.jade.min.css">
 
<p>Новая запись: <a href="#">Сетка без медиазапросов</a></p>
<button>Подписаться</button>

Ссылка и кнопка стали нефритово-зелёными. Подробнее о цветах — в главе о настройке.

Установка через npm

Если сайт собирается сборщиком, Pico ставят как пакет. Создайте проект на Vite и установите Pico:

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

Затем подключите стили в главном файле скриптов src/main.js — Vite сам добавит их на страницу:

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

Запустите npm run dev и откройте http://localhost:5173: стандартная страница Vite уже оформлена Pico. Файлы пакета лежат в node_modules/@picocss/pico/css/ — там те же сборки, что и на CDN. Стартовый src/style.css из шаблона Vite лучше удалить вместе с его импортом, иначе он перебьёт часть стилей Pico.

Частая ошибка

Подключить бесклассовую сборку и писать class="grid" или class="secondary". В pico.classless.min.css этих классов нет, и разметка останется без оформления. Нужны классы — подключайте pico.min.css.