Добавление фрэймворка Pure на сайт
Чтобы добавить Pure воспользуйте бесплатными инстументами free unpkg CDN. Просто добавьте следующий <link> код в блок <head> вашего сайта
Быстрый старт
Как быстро начать новый проект с Pure
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/pure-min.css" integrity="sha384-G9DpmGxRIF6tpgbrkZVcZDeIomEU22LgTguPAI739bbKytjPE/kHTK5YxjJAAEXC" crossorigin="anonymous">Добавление метаэлемента Viewport
Элемент области просмотра <mate> позволяет управлять шириной и масштабом области просмотра в мобильных браузерах. Поскольку вы создаете
адаптивный веб-сайт и хотите, чтобы его ширина была равна собственной ширине устройства, то следующий код в блок <head> вашего сайта.
<meta name="viewport" content="width=device-width, initial-scale=1">О системе сеток Pure
Система сеток Pure очень проста. Вы создаете строку с помощью класса .pure-g и создаете столбцы в этой строке с помощью классов pure-u-*.
Вот сетка с тремя столбцами:
<div class="pure-g">
<div class="pure-u-1-3"><p>Одна третья</p></div>
<div class="pure-u-1-3"><p>Одна третья</p></div>
<div class="pure-u-1-3"><p>Одна третья</p></div>
</div>Третьи
Третьи
Третьи
Адаптивные сетки
Система сеток Pure такжеориентирована на мобильные устройства и адаптивна, и вы можете настроить сетку, указав точки останова CSS Media Query и имена классов сетки.
Вам также необходимо добавить на странице файл grids-responsive.css:
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">
Далее базовые точки останова, включенные в grids-responsive.css:
| Ключ | CSS Media Query | Применяется | Имя класса |
|---|---|---|---|
| Отсутствует | Отсутствует | Всегда | .pure-u-* |
sm |
@media screen and (min-width: 35.5em) |
≥ 568 пикселей | .pure-u-sm-* |
md |
@media screen and (min-width: 48em) |
≥ 768 пикселей | .pure-u-md-* |
lg |
@media screen and (min-width: 64em) |
≥ 1024 пикселей | .pure-u-lg-* |
xl |
@media screen and (min-width: 80em) |
≥ 1280 пикселей | .pure-u-xl-* |
Вот пример того, что вы могли бы сделать. Попробуйте изменить размер экрана, чтобы увидеть как отреагирует сетка.
.pure-u-1
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-3-4
.pure-u-md-3-4
.pure-u-1
.pure-u-md-1-4
.pure-u-md-1-4