am-grid
Адаптивная настраиваемая сетка для БЭМ
Библиотека am-grid
Описание
Адаптивная настраиваемая сетка для БЭМ.
Все параметры сетки регулируются через variables-файл в соответствующем type-модификаторе.
Структура сетки
container <- центрально позиционированный элемент, задаёт ширину в зависимоти от ширины экрана устройства
row <- контрейнер для набора элементов сетки. Хранит и чистит флоаты, а так же следит за отступами
col <- колонка, кирпичик сетки. Может быть шириной от 1 до max колонок сетки
Существуют 4 основных размера сетки:
xs - телефоны
sm - планшеты/нетбуки
md - десктоп
lg - большие мониторы
Для любого col можно модификатором задать количество колонок, которые он займёт внутри каждой сетки. Пример:
am-grid__col am-grid__col_xs_12 am-grid__col_sm_4
Этот col займёт всю ширину в 12 колонок на мобильной сетке и 4 колонки на всех остальных сетках.
Текущая сетка подставляется автоматически, в зависимости от ширины экрана браузера.
Для смещения элемента col используется модификатор offset
am-grid__col_sm-offset_4 - смещение на 4 столбца вправо
Для перестановки колонок местами используются модификаторы push и pull
<div class="am-grid__col_md_9 am-grid__col_md-push_3"></div>
<div class="am-grid__col_md_3 am-grid__col_md-pull_9"></div>
При рендеринге эти две колонки будут поменены местами
Данная система основана на bootstrap-сетке
http://getbootstrap.com/css/#grid