В этой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

В третьей части мы разобрали, как извлечь цветовую систему из Bootstrap и структурировать её под свои нужды. В результате у вас должен был получиться отдельный файл _palette.scss, содержащий все цветовые переменные и их оттенки.

Уровни кастомизации

В этой статье мы исследуем, как модифицировать простую кнопку Primary, чтобы она соответствовала вашему дизайну. Есть несколько уровней, на которых можно менять стили кнопок. Для начала нужно понять, что именно мы хотим изменить:

все кнопки проекта;
кнопку с определёнными характеристиками (например, primary, default, large, small и т.д.);
кнопку внутри другого компонента (например, кнопка Primary внутри компонента Datepicker);
кнопку внутри вашего собственного компонента.

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

В таблице используются имена папок forms, vendor и components, находящиеся в /src/styles. В следующих статьях мы подробно разберём, чем они отличаются.

Кастомизация кнопки Primary

Давайте изменим кнопку Primary в соответствии с кастомным дизайном. Слева на изображении выше — желаемый результат, к которому мы стремимся. А справа — кнопка со стандартными стилями из Bootstrap.

Первым делом нужно определить, на каком уровне мы хотим делать кастомизацию. Предположим, мы хотим, чтобы все кнопки Primary в нашем проекте выглядели именно так. Но здесь есть нюанс: большинство этих изменений должны применяться не только к ним, но и ко всем кнопкам. Да, это стили кнопки Primary, но font-size, font-family, text-transform, padding и border-radius должны быть одинаковыми для всех кнопок: secondary, success, danger и т.д. Единственное свойство, которое мы изменим только для Primary — это background-color.

Итак, согласно таблице выше, нам нужно внести изменения в двух местах:

используя Bootstrap-переменные
через стили форм

Модификация переменных

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

Посмотрим, какие переменные доступны и что мы можем использовать. Между строками 467 и 520 файла _bootstrap.scss находятся все переменные Bootstrap, связанные с кнопками. Вот те из них, которые мы можем использовать:

$btn-padding-y: 7px;
$btn-padding-x: 30px;
$btn-font-family: Satoshi, sans-serif;
$btn-font-size: 14px;
$btn-line-height: 1.43;
$btn-font-weight: 700;
$btn-border-radius: 100px;

По умолчанию Bootstrap использует сложные взаимосвязи между переменными дизайн-системы. В файле можно встретить такие записи, как: $btn-color: var( — #{$prefix}body-color) or $btn-padding-y-sm: $input-btn-padding-y-sm. Для упрощения мы будем использовать абсолютные значения для этих переменных.

Эти изменения будут применяться ко всем кнопкам и станут основой для вашей дизайн-системы. Теперь откроем файл _palette.scss, чтобы изменить цвет фона кнопки:

$blue: #2175f2;

Так как это просто другой оттенок синего, мы можем изменить значение переменной $blue, не меняя переменную $primary.

Изменение значения переменной $primary повлияет на все элементы форм и компоненты, использующие этот цвет. Если вы хотите изменить только фон кнопок Primary, переходите к следующему разделу — Модификация стилей форм.

Давайте теперь посмотрим на результат:

Модификация стилей форм

Как видно на изображении выше, кнопка Primary теперь выглядит гораздо лучше — и, что важнее, остальные кнопки также выглядят согласованно. Это значит, что мы внесли изменения на уровне системы, а не только на уровне одной кнопки.

К сожалению, не всё можно настроить через переменные Bootstrap. Например, свойство text-transform так не задать. Чтобы это реализовать, создадим новый файл: _btn.scss в папке /src/styles/forms. Я использую эту папку для всех стилей, связанных с элементами форм.

Добавим в файл следующее:

// button
.btn {
  text-transform: uppercase;
}

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

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

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

Выглядит довольно похоже, верно? Конечно, остаются нюансы: состояния hover, active, disabled, разные размеры кнопок и т.д. Но подход всегда должен оставаться одинаковым:

Меняйте всё, что можно, через переменные Bootstrap, а остальное — через кастомные стили.

Это помогает поддерживать последовательность и гибкость вашей дизайн-системы.

Заключение

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

Модифицированные переменные Bootstrap, связанные с кнопками.
Файл _btn.scss с переопределёнными стилями для свойств, которые нельзя изменить через переменные.

В следующей статье мы разберём случаи, когда для кастомизации компонентов Bootstrap недостаточно одних только переменных. Оставайтесь на связи!

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