Notwithstanding Previous Misdemeanors
    Wondering what’s next for npm?Check out our public roadmap! »

    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.

    Install

    npm i chunker-grids

    DownloadsWeekly Downloads

    11

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    303 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar