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