Сетки

Полностью настраиваемые и отзывчивые CSS-сетки

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

Сетки Pure просты в использовании и очень мощны. Всё, что нужно для использования, это усвоить несколько простых правил:

Классы сеток и классы ячеек
Сетки Pure состоят из двух типов классов: "сеточных классов" (pure-g или pure-g-r) и "классов ячеек" (pure-u или pure-u-*)
Длина ячеек задаётся частями от целого
Ячейки имеют различтые имена классов, определяющие их длину. Например, pure-u-1-2 имеет длину 50% от родительского блока, тогда как pure-u-1-5 будет иметь длину 20%.
Все дочернии элементы блока сетки, должны быть ячейками
Дочерние элементы, содержащиеся внутри элемента с классом pure-g, должны быть ячейками сетки с классами pure-u или pure-u-*.
Контент всегда находится внутри ячеек сетки
Весь контент, который выводится на страницу - должен находиться внутри ячейки сетки. Это гарантирует, что содержимое будет отображаться на странице правильно.

Начнем с простого примера. Вот сетка из трёх колонок:

<body>
	<div class="pure-g">
		<div class="pure-u-1-3">
			<!--
			По умолчанию, ячейки сетки не имеют свойств margin/padding.
			Если вы хотите добавить их, поместите контент внутрь
			дочернего контейнера и задайте эти свойства ему.
			-->
			<p>Треть</p>
		</div>

		<div class="pure-u-1-3">
			<p>Треть</p>
		</div>

		<div class="pure-u-1-3">
			<p>Треть</p>
		</div>
	</div>
</body>

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

Блоки с размерами кратными 5 и 24 - составляют базовую сетку. Ниже приведены основные размеры ячеек сеток Pure и значения, какие неоходимо добавить к имени класса 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 постоянно работает над созданием инструментов для помощи в построении сеток Pure. Первое низкоуровневое рещение, это доступный к использованию уже сегодня, Pure Grids Rework Plugin (этот инструментпредназначен для построения сетоток Pure с заданными параметрами).

Сетки Pure для адаптивного дизайа

Основу адаптивных сеток Pure - задаёт родительский блок. Для него добавляется имя класса pure-g-r (где "r" - значает адаптивность). Вы можете всё время использовать pure-g-r вместо pure-g и всё будетработать, как надо. Все дочернии элементы с классами pure-u-*-*, будут автоматически адаптироаться и сжиматься до 100%-ой ширины блока при изменении размера экрана устройства до 767px или меньше.

Регулярные сетки против адаптивных

Первый сниппет, что приведён ниже, показывает, как адаются регулярные сетки в Pure. Эта сетка неадаптивная. Колонки в ней всегда будут шириной в одну треть от ширины экрана, вне зависимости от его размера. Во втором сниппете имя класса изменено с pure-g на pure-g-r, в результате чего, при изменении размера окна браузера до 767px (по умолчанию) и ниже, колонки превращаются в строки и меняют свой размер с одной трети до 100% ширины сетки.

<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>
<div class="pure-g-r">

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

</div>

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

Измените размер окна браузера и посмотрие, как будутменять свои размеры ячейки сеток.

Быстрый

Библиотека YUI - это легковесное ядро и модульная архитектура, которые делают её быстрой, надёжной и масштабируемой. Используемый разработчиками интерфейсов в компании Yahoo, YUI работает на наиболее популярных в мире сайтах.

Полноценный

YUI интуитивно понятеное и хорошо документированое API, позволяет вам работать с DOM и создавать поддерживаемые и производительные приложения для настольных компьютеров, мобильных устройств и серверов.

Пригодный для разработки

Постоянно растущее ообщество, тщательно спроектированная архитектура, а также всеобъемлющий набор инструментов, поможет вам, как профессионалу писать код, как для простых веб-страниц, так и для сложных веб-приложений.

Свободный и открытый

YUI является бесплатным для всех видов использования и разрабатывается в открытом репозитории на GitHub. Основныех членов команды разработки, всегда можно найти на форумах и IRC-канале #yui на Freenode. Вы всегда можете задатьим вопрос!

Пример изображения для адаптивных сеток.

Колонка в 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-g для элемента-обёртки сетки, вместо pure-g-r и будьте уверены, что ячейки сетки не поменяют своего местоположения на маленьких экранах мобильных устройств. Это хороший способ отображать сетки на небольших экранах, например, телефонов.

Треть

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

Треть

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

Треть

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

спомогательные классы для сеток Pure

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

Имена вспомогательных классов Описание
pure-hidden-phone Содержимое блока с этим классом будет скрыто при размере экрана меньше 768px
pure-hidden-tablet Содержимое блока с этим классом будет скрыто при размерах экранов между 768px и 979px включительно
pure-hidden-desktop Содержимое блока с этим классом будет скрыто при размере экрана более 980px

Применение свойств padding и border к ячейкам сеток Pure

Чтобы применить свойства padding и border для ячейки сеток Pure, есть два варианта. Первый вариант заключается в помещении внутрь блока ячейки контейнера <div> и задания собственного стиля данному дочернему контейнеру:

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

Использование собственных шрифтов в ячейках сеток

В сетках Pure использется определенный набор шрифтов для обеспечения наибольшей совместимости ОС и браузера, а к ячейкам сетки по умолчанию применено правило font-family: sans-serif; - этот базовый набор шрифтов по умолчанию определён в базовой части Pure (Normalize.css) и применён к элементу <body>. К счастью, и в этом довольно легко убедиться, что ваше значение для свойства font-family также применимо к контенту в сетках Pure. И ели вы хотите изменить шрифт на свой только в блоках сетки, то вместо применения свойства font-family к элементу <body>, примените его к классам сетки, как показано ниже:

<style>
/*
При задании основного шрифта на странице, примените его вместе к стилям для
ячеек сеток и элементов `html`, `button`, `input`, `select`, `textarea`. Сетки Pure используют специфичные
настройки шрифтов, для обеспечения наибольшей соместимости с сочетанием ОС
и браузера.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
	/* Set your content font stack here: */
	font-family: Georgia, Times, "Times New Roman", serif;
}
</style>

Хотите просто использовать только Сетки?

"Сетки", являются частью CSS-фреймворка Pure. Тем не менее, если вы просто хотите использовать один лишь модуль для работы с "Сетками", вы можете подключить его отдельно. Просто встаьте элемент <link> в <head> вашей страницы:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/grids-min.css">