Сетки

Введение в чистые сетки

С Pure Grids легко работать, и они очень мощные. Следует помнить о нескольких простых концепциях:

Классы сетки против классов единиц

Чистые сетки состоят из двух типов классов: класс сетки ( pure-g ) и классы единиц ( pure-u или pure-u-* ).

Ширина единиц указана в долях.

Единицы имеют различные имена классов, которые представляют их ширину. Например, pure-u-1-2 ширина составляет 50%, а pure-u-1-5 ширина - 20%.

Все дочерние элементы сетки должны быть единицами

Дочерние элементы, содержащиеся в элементе с pure-g именем класса, должны быть единицей сетки с именем pure-u или pure-u-* классом.

Контент помещается в блоки сетки

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

Начнем с простого примера. Вот сетка с тремя столбцами:

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

Размеры сеток

Pure поставляется с сеткой на основе 5 и 24 . Ниже показаны доступные единицы, которые могут быть добавлены к имени pure-u-* класса, где * одна из долей единиц, перечисленных ниже. Например , блок имя_класс для ширины 50%: pure-u-1-2 .

Единицы на основе 5ths

Единицы на основе 24ths

Пользовательские размеры единиц

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

Чистые отзывчивые сетки

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

В том числе на вашей странице

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

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css" /> 

Обычная сетка Pure против отзывчивой сетки

Лучший способ понять разницу между обычной сеткой Pure и адаптивной сеткой - это на примере. Фрагмент ниже показывает, как пишутся обычные сетки 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 по умолчанию имеют следующие имена классов и точки останова медиа-запросов.

Использование относительных единиц для регулировки ширины содержимого

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

Если вы действительно хотите использовать другие единицы em , вы всегда можете изменить параметры мультимедийных запросов по умолчанию на странице «Начало работы». Преобразовать из em в px довольно просто:

1em == 16px * 

* Em для преобразования в px зависит от размера шрифта браузера, который, как правило составляет 16px, но может быть изменена пользователем в своих настройках браузера.

Пример чистых отзывчивых сеток

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

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

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

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

Адаптивные изображения

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

Применение отступов и границ к элементам сетки

Чтобы добавить границы и отступы к Pure Grids, у вас есть два варианта. Первый вариант - вложить в <div> каждый блок Grid и стилизовать дочерний контейнер:

<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 {
        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 сохраняет вашу разметку более чистой, но имеет один незначительный недостаток. Установка этого свойства для всех единиц сетки затрудняет переопределение или сброс значения позже. Как неопытная библиотека, Pure позволяет box-sizing сохранить значение по умолчанию, content-box а выбор остается за вами.

Использование сеток с вашим семейством шрифтов

Чистые Сетки используют стек конкретных шрифты для обеспечения наибольшей совместимости OS / браузера, и по умолчанию сетевых узлы будут font-family: sans-serif; применены - это шрифт по умолчанию база стеки Pure ( в Normalize.css) относится к <html> , <button> , <input> , <select> и <textarea> элементам. К счастью, при использовании Pure довольно легко убедиться, что стек шрифтов вашего проекта применяется ко всему контенту. Вместо того, чтобы применять ваш font-family только к <body> элементу, примените его следующим образом:

<style>
/*
When setting the primary font stack, apply it to the Pure grid units along
with "html", "button", "input", "select", and "textarea". Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
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. Однако, если вам нужны только Grids, а не другие модули, вы можете вытащить их отдельно. Просто включите эти <link> элементы в свой <head> .

<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css">