Сетка на css grid layout

npm install -S chunker-grids

yarn add -S chunker-grids

Вводная информация

Префиксы отвечающие за медиа запросы, добавляем их когда нужно чтобы свойство применялось на определённом устройстве:

Префикс | Устройство | Ориентация ----------|-----------------|------------ sp | смартфон | книжная sl | смартфон | альбомная s | смартфон | любая tp | планшет | книжная tl | планшет | альбомная t | планшет | любая d | стационарные ПК | -

Сетка

Класс | Префикс | Счётчик | Счётчик | Пример | Описание ----------------|-------------------------------------------------|-------------------------|-------------------------|-----------------------|--------- .grid | | 0-64 (с шагом 8) | | .grid | делает блок сеткой на 12 колонок. .gap | s, t | 0-64 (с шагом 8) | | .gap-8 | устанавливает вертикальные и горизонтальные отступы в 8rem. .gap-col | s, t | 0-64 (с шагом 8) | | .gap-col-16 | устанавливает вертикальные отступы 16rem. .gap-row | s, t | 0-64 (с шагом 8) | | .gap-row-s-8 | устанавливает горизонтальные отступы на телефоне в 8rem. .с | sp, sl, s, tp, tl, t, d | 1-12 | | .с-tp-8 | устанавливает ширину колонки на планшете с книжной ориентацией в 8/12. .r | sp, sl, s, tp, tl, t, d | 1-6 | | .r-2 | устанавливает высоту колонки 2/6. .o | sp, sl, s, tp, tl, t, d | 0-1 (величина сдвига) | 1-12 (ширина колонки) | .o-2-2 | устанавливает смещение колонки на 2 и ширину колонки 2/12.

Вспомогательные классы

Класс | Префикс | Пример | Описание ----------------|-------------------------|-----------------------|--------- .flex | sp, sl, s, tp, tl, t, d | .flex-tl | устанавливает свойство display в значение flex на планшете с альбомной ориентацией .block | sp, sl, s, tp, tl, t, d | .block | устанавливает свойство display в значение block .inline-block | sp, sl, s, tp, tl, t, d | .inline-block-sp | устанавливает свойство display в значение inline-block на телефоне с книжной ориентацией .none | sp, sl, s, tp, tl, t, d | .none-s | устанавливает свойство display в значение none на телефоне

Класс | Описание ----------------|--------- .flex-row | направление основной оси по горизонтали. .flex-column | направление основной оси по вертикали. .flex-nowrap | выстраивать элементы в одну строку. .flex-wrap | выстраивать элементы в несколько строк.

Класс | Префикс | Счётчик | Пример | Описание ----------------|-------------------------------------------------|-----------------|-----------------------|--------- .flex-grow | | 1-6 | .flex-grow-1 | устанавливает жадность элемента в значение 1. .order | sp, sl, s, tp, tl, t | 1-12 | .order-3 | устанавливает позицию элмента равную 3 примечание: (позиция элемента будет работать, только если позиция указана у всех соседей) .ai | start, center, end, stretch | | .ai-center | свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярно главной оси контейнера.

Класс | Префикс | Постфикс | Пример | Описание ----------------|----------------------|-------------------------------------------------|-----------------------|--------- .jc | sp, sl, s, tp, tl, t | start, center, end, space-between, space-around | .jc-start | устанавливает свойство justify-content распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера.

Класс | Префикс | Счётчик | Пример | Описание ----------------|------------|------------------- |------------------------|--------- .m | s, t | 0-80 (с шагом 8) | .m-8 | устанавливает внешние отступы в 8rem .mt | s, t | 0-80 (с шагом 8) | .mt-24 | устанавливает верхний внешний отступы в 24rem .mr | s, t | 0-80 (с шагом 8) | .mr-16 | устанавливает правый внешний отступы в 16rem .mb | s, t | 0-80 (с шагом 8) | .mb-80 | устанавливает нижний внешний отступы в 80rem .ml | s, t | 0-80 (с шагом 8) | .ml-s-0 | устанавливает левый внешний отступы в 0rem на телефоне .my | s, t | 0-80 (с шагом 8) | .ml-t-16 | устанавливает верхний и нижний внешние отступы в 16rem на планшете .mx | s, t | 0-80 (с шагом 8) | .ml-8 | устанавливает левый и правый внешние отступы в 8rem | | | | .p | s, t | 0-40 (с шагом 8) | .p-8 | устанавливает внутренние отступы в 8rem .pt | s, t | 0-40 (с шагом 8) | .pt-24 | устанавливает верхний внутренний отступы в 24rem .pr | s, t | 0-40 (с шагом 8) | .pr-16 | устанавливает правый внутренний отступы в 16rem .pb | s, t | 0-40 (с шагом 8) | .pb-40 | устанавливает нижний внутренний отступы в 40rem .pl | s, t | 0-40 (с шагом 8) | .pl-s-0 | устанавливает левый внутренний отступы в 0rem на телефоне .py | s, t | 0-40 (с шагом 8) | .pl-t-16 | устанавливает верхний и нижний внутренние отступы в 16rem на планшете .px | s, t | 0-40 (с шагом 8) | .pl-8 | устанавливает левый и правый внутренние отступы в 8rem

.wrapper_{ sp, sl, tp, tl, text } — max-width.

• .wrapper — 1200rem и выравнивание по центу (по умолчанию). Имеет модификаторы:
  • .wrapper_sp — 320rem;
  • .wrapper_sl — 480rem;
  • .wrapper_tp — 768rem;
  • .wrapper_tl — 1024rem;
  • .wrapper_text — 600rem обертка над текстовыми блоками;

License

Copyright (c) 2018 Igor Volkov

Licensed under the MIT license.