Узнайте, как полностью кастомизировать компонент Alert из Bootstrap с помощью SCSS-переменных и переопределения стилей в рамках дизайн-системы.

В предыдущей статье мы рассмотрели различные уровни кастомизации и как изменить кнопку Primary в соответствии с желаемым дизайном. К концу статьи вы изменили переменные Bootstrap и добавили новый файл: _btn.scss.

Папки forms и vendor

Сегодня мы разберём основные отличия между двумя папками стилей — forms и vendor, а также рассмотрим кастомизацию более сложного компонента — Alert из CSS-фреймворка Bootstrap.

Папки forms и vendor похожи по назначению — обе содержат переопределённые стили для элементов форм и компонентов, которые невозможно изменить через переменные. Это означает, что если вы подключаете стороннюю библиотеку и хотите изменить её внешний вид, то такие стили должны размещаться в одной из этих папок.

Однако ключевое различие — в их названии. Папка forms используется только для стилей, связанных с элементами форм. А папка vendor предназначена для всех остальных стилей — включая элементы форм, если их необходимо изменить внутри конкретного компонента. На практике это редкий случай, так как одной из основ дизайн-системы является последовательность.

Текущая структура проекта выглядит следующим образом:

/src
  /styles
    /common
    /components
    /forms
      ├── _btn.scss
    /mixins
    /variables
      ├── _bootstrap.scss
      ├── _palette.scss
      ├── variables.scss
    /vendor
    ├── app.scss
    ├── vendor.scss
  styles.scss

Изменение компонента Alert

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

Компоненты Alert во всём проекте.
Специфичные компоненты (например, success, warning, с иконками, с кнопкой закрытия и т.д.).
Компоненты Alert как составная часть другого компонента (например, Alert внутри модального окна).
Alert внутри вашего собственного пользовательского компонента.

Первым шагом нужно проанализировать желаемые изменения и определить, на каком уровне их вносить. Давайте сравним дизайн компонентов и их дефолтное состояние в Bootstrap.

Custom design and Bootstrap Alert component — Дизайн и компонент Alert в Bootstrap

Как видно на изображении выше, нам нужно реализовать изменения на первых двух уровнях. Основные стили: font-family, font-weight, padding, color, border-width, border-radius должны применяться ко всем компонентам Alert. Свойство background-color нужно изменить для отдельных вариаций: success, warning, info и danger.

Переменные Bootstrap

Теперь откроем файл с переменными Bootstrap — _bootstrap.scss — и посмотрим, какие переменные мы можем использовать, чтобы добиться желаемого результата:

...
$font-family-sans-serif: Satoshi, sans-serif;
...
$alert-padding-y: 16px;
$alert-padding-x: 16px;
$alert-border-radius: 4px;
$alert-border-width: 0px;
...

Так как шрифт Satoshi не установлен по умолчанию в операционных системах, его необходимо вручную скачать и установить с указанного сайта. В следующих статьях мы рассмотрим, как правильно подключать кастомные шрифты в проект.

Первая строка задаёт font-family по умолчанию для всего проекта, включая компоненты Alert. Остальные переменные настраивают сам компонент: padding, border-radius и border-width.

На следующем этапе мы изменим цвет текста и фона для конкретных вариантов Alert — это делается в файле _palette.scss. Пожалуйста, обновите следующие переменные:

...
$success-text-emphasis: #141414;
$info-text-emphasis: #141414;
$warning-text-emphasis: #141414;
$danger-text-emphasis: #141414;
...
$success-bg-subtle: #69d68f;
$info-bg-subtle: #91d5ff;
$warning-bg-subtle: #ffe1b8;
$danger-bg-subtle: #ffaf85;
...

Важно: во второй статье была допущена ошибка — при импорте кастомных переменных Bootstrap в файл vendor.scss, строку импорта нужно поместить сразу после импорта стандартных переменных Bootstrap. Это критично для корректной работы, так как Bootstrap преобразует SCSS-переменные в CSS-переменные. Правильная структура файла:

...
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';

// custom variables
@import 'variables/variables';

@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/utilities';
...

Результат внесённых изменений можно увидеть на изображении ниже. Как видите, компонент почти соответствует требуемому дизайну:

Alert component after modification — Компонент Alert после изменений

Переопределение стилей в папке vendor

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

Создайте новый файл — _alert.scss — и поместите его в папку /src/styles/vendor:

// alert
.alert {
    font-weight: 500;
}

Используйте такой подход для всех сторонних компонентов, стили которых вы хотите переопределить. Просто создайте файл с названием компонента и поместите туда соответствующие стили. Так вы сохраните чистую и понятную структуру проекта.

Затем откройте файл app.scss и импортируйте новый файл:

// forms styles
@import './forms/_btn';

// vendor styles
@import './vendor/_alert';

И финальный результат:

Final Alert component — Финальный вариант компонента Alert

Заключение

В этой статье мы разобрали, как кастомизировать компонент Alert из Bootstrap так, чтобы он соответствовал вашему дизайну. В итоге вы:

Изменили переменные Bootstrap, связанные с компонентом Alert и цветовой палитрой.
Создали файл _alert.scss с переопределениями стилей, которые нельзя задать через переменные.

Это последняя статья в текущей серии по интеграции Bootstrap. В будущих публикациях мы продолжим изучать лучшие практики разработки и поддержки дизайн-систем. Следите за обновлениями!

Как использовать любой CSS-фреймворк в вашем проекте — Часть 5