Как создавать темы Bootstrap

Как разработчик пользовательских тем Bootstrap, я долго искал инструмент настройки SASS-to-CSS, который позволил бы мне легко визуализировать различные цветовые схемы, шрифты и стили для создания прототипов идей моих тем. Themestr.app родилась из этой потребности.

Что есть в пользовательской теме Bootstrap?

Когда дело доходит до настройки внешнего вида Bootstrap по умолчанию, изменение цветовой палитры это первое, что приходит на ум. Стандартная цветовая палитра не сильно изменилась за три итерации Bootstrap, и последний Bootstrap 4 ничем не отличается.

Доступ к цветовой схеме Bootstrap осуществляется с помощью контекстных классов CSS, которые предназначены для «передачи смысла» и поэтому называются в соответствии с назначением. Чтобы использовать эти цвета, мы просто используем соответствующий класс, такой как text-danger, bg-success, alert-info и btn-primary в нашей HTML-разметке.

1*3oBWiHcOgli_TS3I39KRyg.png

С Themestr.appвы просто выбираете новую цветовую схему, и эти скучные цвета Bootstrap меняются…

1*cHyd-sdWQtTWl3eBsn0zGg.png

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

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

Шрифты
Шрифты, очевидно, являются еще одним важным фактором, благодаря которому все сайты Bootstrap выглядят одинаково. Приложение Themestr.app позволяет вам выбирать из различных шрифтов Google для использования в вашей теме. Пользовательский шрифт может быть установлен как «базовое» семейство шрифтов (font-family-base) для всей темы. Но в большинстве случаев вам потребуется применять пользовательский шрифт только к заголовкам (headings-font-family) и оставить очень читаемые шрифты по умолчанию для меньшего текста.
1*96VT4gqswupDMEUuGhPr8Q.png

SASS-переменные
Чтобы знать Bootstrap, нужно знать, что существует множество переменных SASS. Изменение этих переменных является основой настройки Bootstrap. Даже если у вас нет опыта работы с SASS, вы можете использовать Themestr.app, чтобы легко сгенерировать CSS для своей пользовательской темы.

Чтобы настроить Bootstrap, используя только CSS, общепринятым методом является размещение пользовательских стилей CSS после CSS Bootstrap, например…

<link href="/path/to/bootstrap.min.css">
<link href="/path/to/custom.css">

Но с SASS это другой, потому что SASS предварительно обрабатывается в «скомпилированный» CSS. Настройка SASS работает путем переопределения значений по умолчанию. При настройке с помощью SASS пользовательские стили определяются до импорта файлов Bootstrap SCSS. Итак, с SASS порядок выглядит так…

// _custom.scss

// load these first because our custom style need to reference them
@import "bootstrap/functions"
@import "bootstrap/variables"

// define some custom styles
$primary: #ccff00;
$font-family-base: 'Verdanda';

// import Bootstrap
@import "bootstrap"

1 Когда этот файл _custom.scss обрабатывается с помощью SASS, сначала определяются значения по умолчанию, определенные в файле bootstrap/variables.scss.

2 Затем устанавливаются пользовательские значения, которые переопределяют любые переменные, для которых были установлены значения по умолчанию в bootstrap/variables.scss.

3 Наконец, импортируется Bootstrap (@import «bootstrap»), который позволяет процессору SASS (компилятор AKA) генерировать весь соответствующий CSS как с настройками Bootstrap по умолчанию, так и с пользовательскими переопределениями.

Themestr.app позволяет вам изменить большинство значений Bootstrap SASS по умолчанию, и в большинстве случаев вам вообще не нужно беспокоиться о них.

Узнайте больше о пользовательских темах Bootstrap

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *