Bs-grid-system NPM

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`	Утилитарные классы