chunker-grids

1.2.2 • Public • Published

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

Package Sidebar

Install

npm i chunker-grids

Weekly Downloads

1

Version

1.2.2

License

MIT

Unpacked Size

303 kB

Total Files

24

Last publish

Collaborators

  • bermilion