Разработчик, впервые подключающий Pure CSS к проекту, чаще всего упускает один шаг: тег <link> со стилями фреймворка должен стоять до собственной таблицы стилей, иначе кастомные правила перекрываются базовыми сбросами Pure, и макет «ломается». Эта ошибка встречается чаще, чем проблемы с самой установкой.
Pure — это легковесный CSS-фреймворк, изначально созданный командой Yahoo и ныне поддерживаемый сообществом. Он состоит из независимых модулей: сетки, форм, кнопок, таблиц и меню. Ниже разберём все рабочие способы установки — от простого подключения через CDN до установки через пакетный менеджер — и покажем, как проверить, что фреймворк действительно заработал.
Что такое Pure и когда его стоит использовать
Pure — это набор CSS-модулей без JavaScript. В отличие от Bootstrap или Tailwind, он не навязывает компоненты и весит очень мало даже в неминифицированном виде. Это делает его удобным выбором для лендингов, админок и проектов, где важна скорость загрузки страницы.
Фреймворк подходит вам, если нужно:
- 🧱 Адаптивная сетка без лишнего кода и зависимостей;
- 🎨 Аккуратные стили форм, кнопок и таблиц «из коробки»;
- ⚡ Минимальный вес итогового CSS-файла;
- 🔧 Возможность подключать только нужные модули, а не весь пакет.
Если проекту требуются готовые интерактивные компоненты (модальные окна, слайдеры, выпадающие меню с логикой), Pure придётся дополнять собственным JavaScript — учитывайте это при выборе.
Способ 1: Подключение через CDN
Самый быстрый вариант — подключить Pure с публичного CDN, например unpkg или cdnjs. Ничего скачивать не нужно: достаточно добавить одну строку в секцию <head> вашего HTML-файла.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss/build/pure-min.css">Для адаптивной сетки отдельно подключается модуль grids-responsive-min.css — без него классы вида pure-u-md-1-2 работать не будут. Также рекомендуется добавить метатег <meta name="viewport" content="width=device-width, initial-scale=1">, иначе адаптивность на мобильных устройствах не сработает корректно.
Проверка простая: откройте страницу в браузере, нажмите F12 и во вкладке Network убедитесь, что файл pure-min.css загрузился со статусом 200. Если статус 404 или запрос заблокирован — проверьте URL и доступ в интернет.
Способ 2: Установка через npm
Если проект собирается через Webpack, Vite или другой сборщик, логичнее установить Pure как зависимость. Для этого нужен установленный Node.js — проверьте его наличие командой node -v в терминале.
npm install purecss --saveПосле установки файлы фреймворка окажутся в папке node_modules/purecss/build/. Подключить их можно двумя путями: импортировать в свой CSS/JS через @import "purecss"; (если сборщик настроен на обработку стилей) или скопировать нужные файлы в папку статики и подключить обычным тегом <link>.
⚠️ Внимание: простое добавление пакета вnode_modulesне подключает стили к странице. Без импорта или тега<link>браузер про Pure ничего не узнает — это самая частая причина «фреймворк установлен, но не работает».
☑️ Установка Pure через npm
Способ 3: Скачивание файлов вручную
Третий вариант — скачать архив фреймворка с официального сайта pure-css.github.io или со страницы релизов на GitHub. Распакуйте архив и скопируйте нужные .css-файлы в папку стилей вашего проекта, например в css/.
Затем подключите файлы относительным путём:
<link rel="stylesheet" href="css/pure-min.css">Этот способ даёт полный контроль над файлами и работает без интернета, но обновлять версию придётся вручную. Следите за тем, чтобы путь в href совпадал с реальным расположением файла — опечатка в пути приводит к тихой ошибке 404, которую видно только в инструментах разработчика.
Сравнение способов установки
Чтобы выбрать подходящий метод, ориентируйтесь на тип проекта и требования к обновлениям. Сводная таблица поможет сравнить варианты:
| Критерий | CDN | npm | Локальные файлы |
|---|---|---|---|
| Скорость подключения | Максимальная | Средняя | Средняя |
| Работа без интернета | Нет | Да | Да |
| Обновление версии | Смена URL | npm update | Вручную |
| Подходит для сборщиков | Нет | Да | Частично |
Для учебного проекта или прототипа CDN — оптимальный выбор. Для production-сайта с пайплайном сборки — npm. Локальные файлы уместны, когда нужна предсказуемость и независимость от внешних сервисов.
Подключение отдельных модулей Pure
Одна из сильных сторон Pure — модульность. Необязательно грузить весь фреймворк: можно взять только то, что реально используется. В папке build лежат отдельные файлы: base-min.css, grids-min.css, forms-min.css, buttons-min.css, tables-min.css, menus-min.css.
Например, для страницы с формой обратной связи достаточно базового модуля и форм:
<link rel="stylesheet" href="css/base-min.css">
<link rel="stylesheet" href="css/forms-min.css">
Обратите внимание: модуль base — фундамент, остальные модули рассчитаны на его наличие. Подключать кнопки или таблицы без базы технически можно, но стили могут отображаться не так, как задумано.
Какие классы проверить после установки
Добавьте на страницу кнопку с классом pure-button и контейнер pure-g с колонкой pure-u-1-2. Если кнопка стилизована, а колонка заняла половину ширины — фреймворк подключён корректно.
Типичные ошибки и их решение
Что делать, если Pure установлен, но стили не применяются? Начните с проверки вкладки Network в инструментах разработчика — там видно, загрузился ли CSS-файл вообще. Дальше действуйте по списку типичных причин:
- 🔍 Неверный путь к файлу — проверьте
hrefи регистр букв в имени; - 📦 Файл не импортирован после
npm install— добавьте импорт или тег link; - 🧹 Кэш браузера — обновите страницу с очисткой кэша (Ctrl+F5);
- ⚔️ Конфликт с другими стилями — проверьте порядок подключения файлов;
- 📱 Отсутствует viewport-метатег — адаптивная сетка не сработает на мобильных.
⚠️ Внимание: если на странице уже подключён другой CSS-фреймворк (например, Bootstrap), их базовые сбросы стилей будут конфликтовать. Совмещать два фреймворка на одной странице без необходимости не стоит.
Ещё одна ситуация: сетка работает на десктопе, но «схлопывается» на телефоне. Почти всегда причина в том, что подключён grids-min.css вместо grids-responsive-min.css — адаптивные классы существуют только в responsive-версии модуля.
Проверка работоспособности после установки
Финальный шаг — убедиться, что фреймворк не просто подключён, а реально применяет стили. Создайте минимальную страницу и добавьте на неё элемент с классом pure-button и сетку из двух колонок pure-u-1-2. Откройте файл в браузере.
Если кнопка выглядит стилизованной (скруглённые углы, фирменный вид), а колонки встали в ряд — установка прошла успешно. Если элементы выглядят как стандартный HTML без оформления, возвращайтесь к разделу об ошибках и проверяйте загрузку файла в Network.
Главный признак корректной установки Pure — файл CSS загружается со статусом 200, а классы pure-* визуально меняют элементы страницы. Всё остальное — выбор способа доставки файла, который зависит от вашего проекта.
Часто задаваемые вопросы
Можно ли использовать Pure вместе с Bootstrap?
Технически можно, но не рекомендуется: базовые сбросы стилей обоих фреймворков будут конфликтовать, и предсказать итоговое отображение сложно. Лучше выбрать один фреймворк для проекта.
Нужен ли JavaScript для работы Pure?
Нет. Pure — это чисто CSS-фреймворк. Однако интерактивные элементы (выпадающие меню, мобильная навигация) потребуют собственного JavaScript-кода.
Почему адаптивные классы сетки не работают?
Наиболее вероятные причины: подключён grids-min.css вместо grids-responsive-min.css либо отсутствует метатег viewport в секции <head>. Проверьте оба момента.
Как обновить Pure до новой версии?
При установке через npm выполните npm update purecss. При CDN-подключении замените номер версии в URL. При локальных файлах скачайте свежий релиз и замените старые файлы, предварительно проверив изменения в описании релиза.
Подходит ли Pure для больших коммерческих проектов?
Да, фреймворк распространяется по свободной лицензии и используется в production-проектах. Его модульность и малый вес — преимущество для сайтов, где важна скорость загрузки. Однако оцените, хватит ли вам отсутствия готовых JS-компонентов.