Быстрый старт

Как быстро начать новый проект с Pure

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

Чтобы добавить Pure воспользуйте бесплатными инстументами free unpkg CDN. Просто добавьте следующий <link> код в блок <head> вашего сайта

<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-1
.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-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-3-4
.pure-u-1
.pure-u-md-1-4