Pure.css - быстрый старт

В этой статье рассказываем о тот, как быстро добавить фрэймворк Pure себе на сайт и какие доплнительные минимальные действия нужно выполнить до полного комплекта.

Добавление фрэймворка Pure на сайт

Чтобы добавить Pure необходимо воспользуйте бесплатным инстументом free unpkg CDN. Для этого в заголовоке сайта  (блок  ) прописываем следующую строку:

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css" integrity="sha384-G9DpmGxRIF6tpgbrkZVcZDeIomEU22LgTguPAI739bbKytjPE/kHTK5YxjJAAEXC" crossorigin="anonymous">

Данная ссылка актуальна на 2022 год, но вы можете проверить самостоятельно наличие более свежей версии на на официальном сайте Pure  или же воспользоваться альтернативными диспетчерами пакетов.

Добавление метаэлемента Viewport

Элемент области просмотра  позволяет управлять шириной и масштабом страницы в мобильных браузерах. Поскольку задачей ставиться создать адаптивный веб-сайт,  в котором ширина любой страницы сайта была всегда равна ширине устройства на котором он просматривается, то для этих целей необходимо в блок  добавить следующую строку:

<meta name="viewport" content="width=device-width, initial-scale=1">

О системе сеток Pure

Система сеток Pure очень проста. Вы создаете строку с помощью класса .pure-g и добавляете в неё столбцы с помощью классов .pure-u-*.

Пример кода сетки с тремя столбцами:

Так будет выглядеть эта сетка в Pure:

На данный момент мы создали сетку. Пока ещё не адаптивную. Этот пример показывает, как легко можно создавать сетки не парясь о разметке

Адаптивная система сеток в Pure

Как ранее было сказано, у Pure есть иинструменты переводящие обычные сетки в адаптивный (подстраивающийся под ширину устройства) режим. Для этого в блок хеад сайта необходимо добавить ещё одну строку - ссылку на файл медиа запросов, который укажет браузеру на точки останова (границы перехода страницы в другой режим).

Ниже показаны базовые точки останова, включенные в grids-responsive.css по умолчанию. Но вы можете их заменить на свои.

На скринах ниже показано как ведёт себя адаптивная Pure сетка при изменении размеров экрана

На веь экран:

В половину экрана:

Мобильный просмотр:

О том, что такое Pure, можно почитать здесь: https://slaed-cms.ru/pages-view-1071.html