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.