Что такое Pico CSS
Pico CSS — небольшой CSS-фреймворк, который оформляет обычные HTML-теги. Вы пишете семантическую разметку из учебника — <header>, <article>, <button>, <form> — и подключаете один файл стилей. Классы почти не нужны: заголовки, кнопки, поля и таблицы сразу выглядят аккуратно. Курс построен на Pico 2.
Бесклассовый фреймворк
Бесклассовый (classless) фреймворк — тот, что задаёт стили селекторам тегов и атрибутов, а не своим классам. Сравните одну и ту же кнопку:
| Фреймворк | Разметка кнопки |
|---|---|
| Bootstrap | <button class="btn btn-primary"> |
| Tailwind | <button class="px-4 py-2 rounded bg-blue-600 text-white"> |
| Pico | <button> |
У Pico есть и немного классов — для сетки, контейнера и вариантов кнопок, — но основа страницы обходится без них.
Когда Pico подходит
| Задача | Почему Pico |
|---|---|
| Прототип | Страница выглядит прилично через минуту |
| Документация, README-сайт | Хорошо читаемый текст, таблицы, код |
| Небольшой сайт, блог, портфолио | Мало CSS, чистый HTML |
| Учебные проекты | Не нужно учить сотни классов |
Если нужен уникальный дизайн или сложный интерфейс с десятками компонентов, лучше взять Bootstrap или Tailwind — об этом последний урок курса.
В курсе мы соберём личную страницу Анны: блог с записями, портфолио проектов и форму обратной связи.
Подключение через CDN
CDN — сеть серверов, которая раздаёт популярные файлы. Создайте папку проекта и в ней файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Блог Анны</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
</head>
<body>
<main class="container">
<h1>Привет, я Анна</h1>
<p>Пишу о вёрстке и делаю небольшие сайты.</p>
<button>Написать мне</button>
</main>
</body>
</html>Откройте файл в браузере: крупный заголовок, читаемый текст с отступами и синяя кнопка со скруглёнными углами. Класс container ограничивает ширину содержимого и центрирует его. Адрес @picocss/pico@2 всегда ведёт на последнюю версию Pico 2.
Как устроены примеры курса
Дальше примеры — это фрагменты содержимого <body>. Каждый начинается со строки <link>, чтобы окно превью под кодом подключило Pico само:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<h2>Последние записи</h2>
<p>Три заметки о CSS-сетке и одна о формах.</p>
<button>Читать блог</button>В превью — заголовок второго уровня, абзац и кнопка, оформленные без единого класса.
Частая ошибка
Писать разметку из одних <div> и <span>. Pico оформляет смысловые теги: <div> с текстом «Отправить» не станет кнопкой, а <div> вместо <nav> не превратится в меню. Чем точнее вы выбираете теги, тем больше Pico делает за вас.