Theming Bootstrap

Настройте Bootstrap 4 с помощью наших новых встроенных переменных Sass по глобальным настройкам стиля для простых тем и изменений компонентов.

Введение

В BS3 оформление тем в большой степени управлялось переменными LESS, обычным CSS и отдельными файлами тем CSS, включенными в папку dist. Приложив некоторые усилия, можно было полностью изменить стиль BS3 без изменения исходных файлов. В BS4 это делается немного по-другому.

В BS4 настройка тем происходит через переменные Sass, карты Sass и обычное CSS. Тут больше нет специальных CSS-файлов для тем; вместо этого можно включать встроенные темы для добавления градиентов, теней и др.

Sass

Использование наших исходников Sass даст вам инструменты переменных, карт, миксинов и прочего.

Структура файлов

По возможности старайтесь избегать изменения «коренных» файлов BS4. Для Sass это значит, что вам следует создать собственную таблицу стилей, импортировать в нее Bootstrap, и уже там изменять и дополнять его стили.

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Если вы загрузили исходные файлы и не используете диспетчер пакетов, вам нужно вручную настроить что-то похожее на эту структуру, сохраняя исходные файлы Bootstrap отдельно от ваших собственных.

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

Импорт

В своем custom.scss вы импортируете исходники Sass. Тут есть две опции: включить весь Bootstrap или части, вам нужные. Мы советуем делать второе, хотя тут надо знать, что в наших компонентах есть некоторые зависимости и требования. Вам также понадобится включить некоторые скрипты JS для наших плагинов.

// Custom.scss
// Option A: Подключите весь Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Подключите Bootstrap частями

// Требуемое
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Опциональное
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

Так вы можете изменять любую переменную и карту Sass в вашем файле custom.scss. Также вы можете добавлять части Bootstrap в секции // Опциональное.

Значения переменных по умолчанию

Каждая переменная Sass в Bootstrap имеет флаг (т.е. предварительно заданную последовательность битов, содержащую значение в двоичном исчислении) !default, что позволяет переопределить значение этой переменной Sass, заданное по умолчанию, в ваших собственных файлах Sass без необходимости копаться в исходниках Bootstrap. «Копипастируйте» переменные как вам необходимо, изменяйте значения, удаляйте !default flag. Если переменная уже была назначена, ее значение не будет переназначено значениями Bootstrap по умолчанию.

Переназначение переменных (когда переменные потом можно переназначать в файлах, или из командной строки, или просто переназначение - непонятно) внутри одного файла Sass может идти в коде до или после переменных по умолчанию. Однако, переназначая переменные в файлах Sass, ваши новые значения должны быть назначены до того как вы импортируете файлы Sass Bootstrap.

Вот пример кода, изменяющего background-color и color для <body>, при импорте и компиляции Bootstrap через npm:

// Ваши переназначения
$body-bg: #000;
$body-color: #111;

// BS4 и его переменные по умолчанию
@import "node_modules/bootstrap/scss/bootstrap";

Повторяйте это сколько надо для любой переменной в Bootstrap, включая глобальные настройки ниже.

Карты и циклы

Bootstrap 4 включает «карты Sass» – массивы парных значений, которые предназначены для облегчения генерации родственных «семейств» CSS. Мы пользуемся картами Sass при работе с цветами, брейкпойнтами сетки и т.д. Как и переменные Sass, все карты Sass включают «!default flag» и могут быть переназначены и расширены.

Некоторые из карт Sass "слиты" с пустыми картами. Это сделано для возможности легкого расширения данной карты, но слегка усложняет удаление элементов из данной карты.

Изменение карты

К примеру, для изменения существующего в нашей карте $theme-colors цвета, добавьте следующий код в ваш стандартный Sass файл:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

Добавление в карту

Чтобы добавить новый цвет в $theme-colors, добавьте новый ключ и значение:

$theme-colors: (
  "custom-color": #900
);

Удаление из карты

Для удаления цветов из карты $theme-colors или любой другой - map-remove:

$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Требуемые ключи

В BS4 наличествуют некие уникальные ключи внутри карт Sass, т.к. мы сами создали и расширяем их. По мере вашей настройки включенных карт вы можете обнаружить ошибки там, где используете специальный ключ карты Sass.

Например, мы используем ключи primary, success и danger из карты $theme-colors для ссылок, кнопок и состояний форм. Изменение значений этих ключей не должно в теории вызвать проблем, но их удаление может вызвать проблемы при компиляции Sass. В таких случаях вам потребуется модифицировать код Sass, который использует эти значения.

Отдельные переменные для цветов — это хорошо, но, когда их становится большое количество, работа с цветами может стать проблематичной. Имея map только для цветов, можно разделить ее на sub-maps для различных тем.

Map идеально подходит для конфигурации проекта. Идея проста: вы связываете значения с ключами, и потом имеете доступ к ним в любой точке проекта с помощью map-get($map, $key).

Функции

Bootstrap использует несколько функций Sass, но лишь эти могут использоваться в изменении тем. Мы включили эти 3 функции для получения значения из карт цветов:

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

Эти функции позволяют выбрать один цвет из карты Sass, как если бы вы использовали переменную цвета в BS3.

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

Также есть функция для получения уровня цвета из карты $theme-colors. Отрицательные значения уровня осветлит цвет, и наоборот – больше значение – темнее цвет.

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

На практике лучше вызвать функцию и передать ей два значения: название цвета из $theme-colors (т.е. primary или danger) и числовое значение уровня.

.custom-element {
  color: theme-color-level(primary, -10);
}

Для создания функций уровней для дополнительных карт Sass или даже общую карту, если вы хотите большей подробности, дополнительные функции можно добавить в ваш Sass.

Контраст цветов

Мы добавили одну дополнительную функцию в Bootstrap – функцию контраста цвета, color-yiq. Она использует YIQ color space для автоматического возврата цвета светлого (#fff) или темного (#111) контраста, базируясь на определенном базовом цвете. Эта функция особенно полезна для миксинов или циклов, когда вы создаете множественные классы.

Например, генерация образцов цветов из нашей карты $theme-colors:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

Она также может применяться для единовременных нужд при работе с контрастами:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

Вы также можете задать базовый цвет с помощью наших функций карт цвета:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Параметры Sass

Настраивайте BS4 с помощью наших файлов, содержащих встроенные переменные, и с легкостью «преодолевайте» глобальные предпочтения CSS с помощью новых переменных Sass $enable-*. Переопределите переменную и перекомпилируйте с npm run test.

Вы можете найти и настроить эти переменные ключевых глобальных настроек в нашем файле _variables.scss.

Переменная	Значения	Описание
`$spacer`	`1rem` (default), или любое значение > 0	Определяет значение пустого пространства по вертикали или горизонтали, для создания наших классов спейсинга.
`$enable-rounded`	`true` (default) or `false`	Задействует предопределенные стили `border-radius` разным компонентам.
`$enable-shadows`	`true` or `false` (default)	Задействует предопределенные стили `box-shadow` разным компонентам.
`$enable-gradients`	`true` or `false` (default)	Задействует предопределенные стили `background-image` разным компонентам.
`$enable-transitions`	`true` (default) or `false`	Задействует предопределенные стили `transition` разным компонентам.
`$enable-hover-media-query`	`true` or `false` (default)	...
`$enable-grid-classes`	`true` (default) or `false`	Задействует генерацию классов CSS для «сеточной» системы (т.е. `.container`, `.row`, `.col-md-1`, т.д.).
`$enable-caret`	`true` (default) or `false`	Enables pseudo element caret on `.dropdown-toggle`.
`$enable-print-styles`	`true` (default) or `false`	Задействует стили для оптимизации печати.

Цвет

Многие из компонентов и утилит Bootstrap созданы с помощью серий цветов, заданных в карте Sass. Эта карта может быть использована в цикле для быстрой генерации серий блоков кода CSS.

Все цвета

Все цвета, существующие в BS4, доступны в виде переменных и карт Sass в нашем файле scss/_variables.scss. В последующих малых релизах BS4 добавим дополнительные цветовые возможности, подобных серой палитре, которая уже добавлена.

Blue (Голубой)

Indigo (Индиго)

Purple (Пурпурный)

Pink (Розовый)

Red (Красный)

Orange (Оранжевый)

Yellow (Желтый)

Green (Зеленый)

Teal (Морской волны)

Cyan (Небесный)

Вот как использовать это в Sass:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

Цветовые классы также доступны для настройки параметров color and background-color.

Цветовые классы (Color utility classes) в BS4 – класс с единственной целью и функцией, который всегда и везде делает одно и то же.

В будущем мы нацелены на оснащение карт и переменных Sass возможностью добавлять оттенки каждого цвета, как мы сделали для палитры серого (внизу).

Цвета тем

Мы используем «субсеты» (т.е. буквально «поднабор», где X - часть набора, входящая в набор Z) цветов, чтобы создать уменьшенную цветовую палитру для генерации цветовых схем, которые доступны как переменные и карта Sass в файле scss/_variables.scss.

Primary (Главный)

Secondary (Второстепенный)

Success (Успех)

Danger (Опасность)

Warning (Предупреждение)

Info (Инфо)

Light (Светлый)

Dark (Темный)

Оттенки серого

Большой набор переменных серого и карта Sass в файле scss/_variables.scss для последовательно идущих оттенков в вашем проекте.

100

200

300

400

500

600

700

800

900

В файле _variables.scss вы найдете наши переменные цветов и карту Sass. Вот пример карты Sass для $colors.

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Добавляйте, удаляйте или изменяйте значения цветов в карте, чтобы обновить их в прочих местах BS4. К сожалению, сегодня не каждый компонент BS4 использует (или поддерживает) эту цветовую карту Sass. Мы постараемся исправить это. А пока планируйте заранее использование переменных ${color} и цветовой карты Sass.

Компоненты

Многие из компонентов и утилит Bootstrap созданы с помощью циклов @each, которые производят итерацию по карте Sass. Это особенно полезно для генерации вариаций компонента с помощью $theme-colors и создания отзывчивых вариантов для каждого брейкпойнта. Когда вы настраиваете эти карты Sass и компилируете их заново, эти циклы автоматически отобразят сделанные изменения.

Модификаторы

Многие из компонентов Bootstrap созданы с поддержкой класса изменения базовых модификаторов. Это означает, что большая часть стилей содержится в базовом классе (например, .btn), тогда как вариации стиля ограничены классами модификатора (напимер, .btn-danger). Эти классы модификаторов черпают себя из карты $theme-colors, для возможности настройки числа и имени таковых классов.

Вот два примера того, как мы проходим циклом по карте $theme-colors для генерации модификаторов компонента .alert и всех наших утилит бэкграунда .bg-*.

// Создает классы алерт-модификатора
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Создает утилиты цвета `.bg-*`
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

Отзывчивый

Эти циклы карт Sass можно использовать не только в цветовых картах. Вы также можете создавать свои отзывчивые вариации компонентов или утилит. Например, вот наши утилиты центрирования "отзывчивого" текста: здесь мы вводим в цикл @each карты Sass $grid-breakpoints медиа-запрос.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

В любом случае, когда вы изменяете вашу карту $grid-breakpoints, ваши изменения будут восприняты всеми циклами, производящими итерации над этой картой.

Переменные CSS

В Bootstrap 4 есть около 24 стандартных свойств CSS (переменных), в его компилированном CSS. Эти свойства обеспечивают легкий доступ к широко используемым значениям, таким как цветовые темы, брейкпойнты, главные наборы шрифтов, онлайн-редактор кода или общее прототипирование при работе в "инспекторе" браузера, "песочнице" или общем прототипировании.

Доступные переменные

Вот список переменных (заметим: необходим :root). Они расположены в нашем файле _root.scss.

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

Примеры

Переменные CSS имеют гибкость, подобную переменным Sass, но без необходимости компилировать для правильной их работы в браузере. Например, в коде ниже мы переназначаем шрифт и оформление ссылок нашей страницы переменными CSS.

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

Вы также можете использовать наши переменные брейкпойнтов в ваших медиа-запросах:

.content-secondary {
  display: none;
}

@media (min-width(var(--breakpoint-sm))) {
  .content-secondary {
    display: block;
  }
}