Сетка на 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.