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

Узнайте, как полностью кастомизировать компонент 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

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

1. Компоненты Alert во всём проекте.

2. Специфичные компоненты (например, success, warning, с иконками, с кнопкой закрытия и т.д.).

3. Компоненты Alert как составная часть другого компонента (например, Alert внутри модального окна).

4. Alert внутри вашего собственного пользовательского компонента.

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

Переменные 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'; ...

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

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

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

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

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

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

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

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

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

Заключение

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

1. Изменили переменные Bootstrap, связанные с компонентом Alert и цветовой палитрой.

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

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