Сетка

Все классы сетки прописаны в отдельном файле grid.css.

Это сделано для сохранения целостности сетки (ну, или если по русски, чтоб случайнойно не похерить что-то нужное).

Сетка стандартная, 12-колоночная.

Классы сетки

Размер Префикс Пример Ширина экрана Устройство
Класс по умолчанию sgrid-12 Любая ширина Все устройства
Mini mm mm-sgrid-12 до 479px Телефоны портрет
Small sm sm-sgrid-12 от 480px до 767px Телефоны пейзаж
Medium md md-sgrid-12 от 768px до 959px Планшеты портрет
Large lg lg-sgrid-12 от 960px до 1199px Мониторы и планшеты пейзаж
Xlarge xl xl-sgrid-12 от 1200px и больше Широкоформатные мониторы
XXL xxl xxl-sgrid-12 от 1400px и больше Широкоформатные мониторы, телевизоры

Классы pre и post помогают быстро задавать отступы спава и слева.

Задаются так-же, как и основые классы сетки (от 0 до 11). Нулевой отступ (например, mm-pre-0) может пригодиться в резиновой верстке.

Поддерживаются префиксы для адаптивной верстки.

Классы для отступов

Класс Пример Описание
pre pre-8 mm-pre-8 Задаст отступ слева, равный 8 колонкам
post post-8 mm-post-8 Задаст отступ справа, равный 8 колонкам

Сетка содерждит минимальный набор наиболее часто используемых классов.

Постепенно (по мере необходимости) классы будут дописываться.

Основные классы

Класс Описнание
.wrapper Класс-обертка. Задает ширину контентой области.
Для экранов с шириной до 1399px - 90% ширины.
Для экранов с шириной от 1400px - ширина фиксированная 1400px.
.box Обязательный класс-обертка для сетки. Задает минимальные стили. По умолчанию все дочерние элементы имеют свойтво float:left, внутренний отступ справа и слева по 10px. Сам элемент с классом .box имеет magrin-bottom:10px.
.table Дополнительный класс для родительского элемента.
Родительский элемент получает свойство display:table.
Дочерние элементы получают свойство display:table-cell.
.float Дополнительный класс для родительского элемента.
Дочерние элементы получают свойство float:left.
.inline Дополнительный класс для родительского элемента.
Дочерние элементы получают свойство display:inline-block.
.content Обязательный класс при искользовании default.js.
Задается контентной области, не имеет стилей по умолчанию, нужен для корректной работы скриптов.

Дополнительные классы

Класс Описнание
.hidden Дополнительный класс. Позволяет быстро скрыть любой элемент.
Поддерживает префиксы, например .mm-hidden скроет элемент на всех экранах с расширением меньше 480px.
.visible Дополнительный класс. Позволяет быстро скрыть любой элемент.
Поддерживает префиксы, например .sm-visible покажет элемент на всех экранах с расширением меньше 768px.
.relative Задает элементу относительное позиционирование
ВАЖНО: по умолчанию элементам сетки никакое позиционирование не задано!
.absolute Задает элементу абсолютное позиционирование.
.margin--0 Обнуляет внешние отступы у элемента.
.padding--0 Обнуляет внутренние отступы у элемента.
.float-right Выравнивает элемент по правому краю.
.float-left Выравнивает элемент по левому краю.
.clear Добавляет псевдоэлементу ::after очистку clear: both;

Дополнительная табличка, показывающая как работают .hidden и .visible при резиновой верстке

.hidden и .visible в резине

Класс Без префикса все экраны Микро до 479px Мини до 767px Средний до 959px Большой до 1199px Увеличенный от 1200px Экстра от 1400px
.visible Видимый Видимый Видимый Видимый Видимый Видимый Видимый
.mm-visible Скрытый Видимый Скрытый Скрытый Скрытый Скрытый Скрытый
.sm-visible Скрытый Видимый Видимый Скрытый Скрытый Скрытый Скрытый
.md-visible Скрытый Видимый Видимый Видимый Скрытый Скрытый Скрытый
.lg-visible Скрытый Видимый Видимый Видимый Видимый Скрытый Скрытый
.xl-visible Скрытый Скрытый Скрытый Скрытый Скрытый Видимый Видимый
.xxl-visible Скрытый Скрытый Скрытый Скрытый Скрытый Скрытый Видимый
.hidden Скрытый Скрытый Скрытый Скрытый Скрытый Скрытый Скрытый
.mm-hidden Видимый Скрытый Видимый Видимый Видимый Видимый Видимый
.sm-hidden Видимый Скрытый Скрытый Видимый Видимый Видимый Видимый
.md-hidden Видимый Скрытый Скрытый Скрытый Видимый Видимый Видимый
.lg-hidden Видимый Скрытый Скрытый Скрытый Скрытый Видимый Видимый
.xl-hidden Видимый Видимый Видимый Видимый Видимый Скрытый Скрытый
.xxl-hidden Видимый Видимый Видимый Видимый Видимый Видимый Скрытый

Чуть-чуть примеров

Классы сетки по умолчанию имеют margin-bottom:10px и padding-и по 10px справа и слева.

sgrid-12
sgrid-11
sgrid-1
sgrid-10
sgrid-2
sgrid-9
sgrid-3
sgrid-8
sgrid-4
sgrid-7
sgrid-5
sgrid-6
sgrid-6
sgrid-5
sgrid-7
sgrid-4
sgrid-8
sgrid-3
sgrid-9
sgrid-2
sgrid-10
sgrid-1
sgrid-11

Вложенность (По умолчанию .box)

sgrid-12

sgrid-6
sgrid-2
sgrid-2
sgrid-2

Вложенность (.inline)

sgrid-12

sgrid-6
sgrid-2
sgrid-2
sgrid-2