bs-grid-system

Немного модифицированная bootstrap-сетка.

Установка

npm install bs-grid-system

Подключение

Импортируйте файлы пакета и вызовите миксин make-grid-system() для генерации стилей сетки. По умолчанию генерируется минимальная сетка, включающая только контейнер, строки и столбики (см. опции генерации сетки ниже). Для изменения настроек скопируйте в вашу source директорию файл bg-grid-config.scss, подключите его перед файлами пакета и задайте нужные опции.

@import ./my-custom-settings.scss
@import ./node_modules/bs-grid-system/bs-grid.scss

@include make-grid-system();

Определенные переменные

| Опция | Описание | ---:|:--- | $grid-breakpoints | Список точек переключения. По умолчанию задано пять точек, вы можете задать их сколько угодно. | $container⁠-⁠max⁠-⁠widths | Список ширин контейнера для каждой точки переключения, кроме минимальной (ноль) | $grid-columns | Количество колонок в сетке | $grid-gutter-widths | Ширины промежутков между колонками для каждой точки переключения | $grid-use-rem | Включает генерацию сетки с точками переключения, выраженными в единицах rem. Для работы необходим пакет vRhythm | $grid-add-box-sizing | Добавляет правило box-sizing: border-box для колонок и контейнеров. Вы можете отключить эту опцию, если у вас, например, задано глобальное правило *{box-sizing:border-box} | $grid-row-columns | см. bootstrap | $grid-classes | CSS классы сетки (см. ниже) | $grid-enable | Включение/отключение генерации разных частей сетки (см. ниже) | $utilites | Карта утилитарных классов (см. bootstrap)

CSS классы сетки ($grid-classes)

| Опция | По умолчанию | Описание |:---|:---|:--- | container | container | Контейнер с ограниченной шириной | container-fluid | container-fluid | Контейнер без ограничения ширины | row | row | Строки | col | col | Столбцы | offset | offset | Смещение столбцов | row-cols | row-cols | | no-gutters | no-gutters | Без внутренних отступов

Опции генерации сетки ($grid-enable)

| Опция | По умолчанию | Описание |:---|:---|:--- | container | true | Контейнер с ограниченной шириной | container-fluid | false | Контейнер без ограничения ширины | responsive-containers | false | Контейнеры для отдельных точек переключения | row | true | Строки | columns | true | Столбцы | offset-classes | false | Смещение столбцов | row-cols-classes | false | | no-gutters | true | Без внутренних отступов | utilities | false | Утилитарные классы

Использование

Использование классов и миксинов практически не отличается от bootstrap. См. документацию к bootstrap.