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

Начните свой новый web-проект с Pure.css.

Подключите Pure на странице

Можно подключить Pure на странице через CDN unpkg.com. Просто добавьте элемент <link> в тег <head> на вашей странице, перед остальными CSS проекта.

Добавьте мета-тег viewport

Мета-тег meta name="viewport" управляет шириной и масштабом окна просмотра на мобильных браузерах. Вы делаете адаптивный сайт, и поэтому ширина окна должна равняться ширине экрана устройства. Добавьте этот код внутрь тега <head>.

Сетки Pure CSS

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

Ниже Базовая (не-адаптивная) сетка с тремя столбцами. Её столбцы всегда будут иметь ширину 1/3, независимо от величины экрана устройства:

Одна Треть

Одна Треть

Одна Треть

Одна Треть

Одна Треть

Одна Треть

Адаптивные сетки

Система Адаптивных сеток Pure разработана как mobile-first (или приоритет-мобильным).

Для работы с адаптивными сетками понадобится дополнительно подключить на страницу файл grids-responsive.css:



    

Ниже список стандартных брейкпоинтов (контрольных точек) из файла grids-responsive.css:

Ключ CSS Media Query Ширина Класс
Нет Нет Любая .pure-u-*
sm @media screen and (min-width: 35.5em) 568px .pure-u-sm-*
md @media screen and (min-width: 48em) 768px .pure-u-md-*
lg @media screen and (min-width: 64em) 1024px .pure-u-lg-*
xl @media screen and (min-width: 80em) 1280px .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
Перевод c оригинального сайта purecss.io
© 2017 Aharito