Сетки

Полностью настраиваемые адаптивные сетки.

Введение в сетки Pure

Сетки Pure обладают мощным функционалом, но очень просты в работе. Нужно помнить всего несколько вещей:

Класс сетки vs. классы ячеек
Сетки Pure состоят из двух видов классов: класс сетки (pure-g) и классы ячеек (pure-u или pure-u-*)
Ширина ячейки - это дробь
Ширина ячейки определяется её классом. Например, pure-u-1-2 будет иметь ширину 50% (1/2), а pure-u-1-5 будет шириной в 20% (1/5).
Все дочерние элементы сетки должны быть ячейками
Все потомки, содержащиеся внутри тега с классом pure-g, должны быть ячейками с классами pure-u или 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 есть сразу две сетки - 5ти и 24х колоночная. Ниже представлены все доступные классы для ячеек pure-u-*, где вместо звёздочки * нужно подставить какое-либо сочетание из списка ниже. Например, класс для ячейки шириной 50% будет: pure-u-1-2.

Сетка из 5-ти колонок

1-5
2-5
3-5
4-5
1
1-1
5-5

Сетка из 24-х колонок

1-24
1-12
2-24
3-24
1-8
4-24
1-6
5-24
1-4
6-24
7-24
1-3
8-24
3-8
9-24
5-12
10-24
11-24
1-2
12-24
13-24
7-12
14-24
5-8
15-24
2-3
16-24
17-24
3-4
18-24
19-24
5-6
20-24
7-8
21-24
11-12
22-24
23-24
1
1-1
24-24

Нестандартные ячейки

Мы работаем над инструментами, позволяющими как угодно настраивать сетки Pure CSS. Первый инструмент доступен уже сегодня - это плагин Pure Grids Rework Plugin.

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

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

Как подключить на страницу

Поскольку медиа-запросы не могут быть переопределены средствами CSS, мы не включаем адаптивную сетку в состав ядра pure.css. Вам нужно будет подключить её отдельно при помощи следующих тегов <link> в блоке <head> на вашей странице.

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->

В этом коде два тега <link>. Первый тег подключает файл grids-responsive-old-ie.css внутри условного оператора IE. Это сделано для пользователей старых настольных компьютеров с браузерами IE 8 и ниже, чтобы они также могли просматривать ваш сайт. Подключайте этот файл, если планируете поддержку старых браузеров.

Второй тег подключает современную адаптивную сетку, ориентированную в том числе и на мобильные гаджеты — для пользователей всех современных устройств.

Базовая сетка vs. Адаптивная сетка

Разницу между Базовой и Адаптивной сетками проще всего понять на примере. Ниже вы увидите код Базовой сетки Pure. Она не адаптивная. Ширина ячейки в ней всегда одна треть width: 33.33%, независимо от ширины экрана.

<div class="pure-g">
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
    <div class="pure-u-1-3"> ... </div>
</div>

А теперь посмотрим на Адаптивную сетку. Ячейки этой сетки растянутся во всю ширину width: 100% на маленьких экранах, но сожмутся до ширины в одну треть width: 33.33% на экранах от среднего и более.

<div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
    <div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>

Стандартные медиа-запросы

Работая с Адаптивной сеткой, можно управлять её поведением на определённых контрольных точках (брейкпоинтах) через имена классов. Стандартные классы и медиа-запросы адаптивной сетки Pure вылядят так:

Ключ 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-*

Относительные единицы для ширины

Возможно, вы уже заметили, что в CSS-коде мы пользуемся em вместо px для медиа-запросов. Это сознательное решение, позволяющее веб-странице реагировать должным образом при изменении её масштаба. Ознакомьтесь с этой статьёй Брэда Фроста об относительных единицах в медиа-запросах.

Примеры адаптивных сеток Pure

В примере ниже создана адаптивная сетка из одного ряда с четырьмя ячейками. На маленьких экранах ширина ячеек - во весь экран, они располагаются друг над другом. На средних экранах их ширина width: 50%, а на больших экранах width: 25%.

Класс .pure-u-1 здесь «отвечает» за малые экраны, .pure-u-md-1-2 за средние, а класс .pure-u-lg-1-4 - за большие. Попробуйте поменять размеры страницы и увидите, как сетка реагирует на это.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Dolor Sit Amet

Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Proident laborum

In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Praesent consectetur

Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.

By Sylwia Bartyzel from unsplash.com

Ячейка 2/5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fermentum dui turpis.

Ячейка 3/5

Quisque ac magna eget est porta varius ut eget quam. Curabitur tincidunt gravida nisl.

Fusce accumsan, sem vitae tempus tempor, nulla lectus interdum felis, eget molestie urna mauris vel elit. Curabitur vel ipsum nulla.

Сетка на мобильных устройствах

Базовая система сеток Pure ориентирована на мобильные. Если нужна сетка для малых экранов - добавьте класс pure-u-* к ячейкам.

Треть

Эта ячейка всегда будет шириной в 1/3.

Треть

Эта ячейка всегда будет шириной в 1/3.

Треть

Эта ячейка всегда будет шириной в 1/3.

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

При работе с адаптивными сетками часто нужно, чтобы картинки увеличивались и уменьшались вместе с другим контентом, сохраняя пропорции. Для этого просто добавьте класс .pure-img к картинке. Пример ниже.

Peyto Lake
Train
T-Shirt Store
Mountain
Miami
BCE Place, Toronto
Banff
Boston North Point Park

Работа со свойствами padding и border для ячеек

Есть два варианта. Первый вариант — вложить <div> внутрь каждой ячейки и применить к CSS-правила к нему:

<style>
    .l-box {
        padding: 1em;
    }
</style>

 ...

<div class="pure-g">

    <div class="pure-u-1-2">
        <div class="l-box"> ... </div>
    </div>

    <div class="pure-u-1-2">
        <div class="l-box"> ... </div>
    </div>

</div>

Второй вариант - добавление границ и паддингов непосредственно к самой ячейке сетки. Это может сломать вёрстку, но проблема легко решается изменением поведения самой сетки при помощи правила box-sizing: border-box

<style>
    .pure-g > div {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .l-box {
        padding: 1em;
    }
</style>

...

<div class="pure-g">

    <div class="pure-u-1-2 l-box"> ... </div>
    <div class="pure-u-1-2 l-box"> ... </div>

</div>

Применение box-sizing: border-box позволит сохранить код страницы чистым, но есть 2 небольших недостатка.

  1. Устаревшие браузеры типа IE 7 и ниже не поддерживают box-sizing.
  2. Установка этого свойства для всех ячеек затрудняет переопределение или отмену этого поведения впоследствии.

Следуя своей философии «не навязывать», Pure сохраняет у свойства box-sizing стандартное значение content-box и оставляет выбор за вами.

Свои шрифты в сетках Pure

В сетках Pure для кросс-браузерности используется свой шрифтовый стек, по умолчанию к ячейкам применено свойство font-family: sans-serif;.

Этот стандартный стек Ядра Pure (Normalize.css) применяется и к тегам <html>, <button>, <input>, <select> и <textarea>.

К счастью, при работе с Pure довольно легко сменить набор шрифтов для всего контента . Для этого делайте так:

<style>
    /*
    Примените свой font-family к ячейкам сетки Pure, а также к тегам
    `html`, `button`, `input`, `select`, and `textarea`.
    */

    html, button, input, select, textarea,
    .pure-g [class *= "pure-u"] {
         /* Set your content font stack here: */
         font-family: Georgia, Times, "Times New Roman", serif;
    }
</style>

Когда нужны только сетки

Сетки - часть Pure CSS. Несмотря на это, если вам не нужны другие модули, а нужны только Сетки, вы можете подключить их отдельно. Включите такие теги <link> в блок <head> на веб-странице.

<!--[if lte IE 8]>
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css">
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-min.css">
  <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]-->
Перевод c оригинального сайта purecss.io
© 2017 Aharito