Как создать современный шаблон Bootstrap за 10 минут (с помощью Bootstrap Builder)

В этом руководстве мы создадим веб-сайт вымышленной компании Bold Internet с помощью инструмента Bootstrap Shuffle. Этот инструмент представляет собой конструктор Bootstrap для занятых разработчиков, и, по совпадению, я его автор :)

Что тебе понадобится:

Учетная запись в Bootstrap Shuffle (все приведенные здесь шаги также могут быть воссозданы в таких программах, как Visual Studio, с использованием переменных Sass Bootstrap).
Пакет бесплатных иллюстраций от Icons8
Логотип

Прежде чем мы начнем, посмотрим, что мы строим: индекс, контакт, 404.

Шаг 1. Страницы

Bootstrap Shuffle предлагает в различных категориях до 230 компонентов, готовых к внедрению в производство. Вы можете создать из них любое количество страниц, но в рамках этого курса мы сосредоточимся на трех (в названии я обещал, что все это займет до 10 минут!).

Добавляем страницы: index.html, contact.html и 404.html

Шаг 2. Компоненты

На каждую страницу добавьте нужные компоненты с помощью метода перетаскивания.

Я выбрал комплектующие из категорий:

index.html: навигация (8-е место в списке), заголовки (13-е), отзывы (5-е), контент (19-е), функции (8-е), нижние колонтитулы (5-е)
contact.html: навигация (8-е), контакт (2-е), нижние колонтитулы (5-е)
404.html: навигация (8-е), HTTP-коды (4-е), нижние колонтитулы (5-е)

Шаг 3. Типографика

Bootstrap 4 использует системные шрифты по умолчанию. Мы выберем профессиональный шрифт, чтобы выделиться. Хорошим выбором может стать Maven Pro, так как в названии даже есть слово «pro» 😉

Выберите вариант 900, потому что он нам понадобится в выделенном жирным шрифтом варианте.

Выбрав шрифт, установите соответствующий вес обычных заголовков и заголовков класса Display.

Шаг 4. Цвета

Наш Конструктор Bootstrap позволяет вам легко управлять всей цветовой палитрой Bootstrap, но у нас есть только 10 минут, поэтому мы изменим только основной цвет $ (выберите фиолетовый), а остальные оставим по умолчанию.

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

Чтобы проверить, как выглядят компоненты в категории настроек, над которыми вы работаете, просто измените предварительный просмотр на предварительно заданную страницу __boostrap-ui.html

Шаг 5. Кнопки

Мы хотим, чтобы наш шаблон отличался от стандартного Bootstrap, поэтому мы включим тени ($ enable-shadows) и градиенты ($ enable-gradient).

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

Название нашей вымышленной компании выделено жирным шрифтом, поэтому мы сделаем все по крупнее! Мы увеличим шрифты, отступы и радиус границы.

Наши изменения:

# General/Appearance 
$enable-shadows: true 
$enable-gradients: true 
# Buttons/Buttons 
$btn-font-weight: 900 
$btn-border-radius: 3rem 
$btn-box-shadow: 0.2rem 0.2rem #000 
# Forms/Buttons
$input-btn-font-size: $font-size-base * 1.2 
$input-btn-padding-y: 1.125rem 
$input-btn-padding-x: 4rem 
# Forms/Inputs 
$input-padding-x: 1rem

Конструктор Bootstrap Shuffle - это, по сути, пользовательский интерфейс для компилятора Sass. Вам не обязательно знать все имена переменных (как указано выше), потому что все настройки имеют удобные средства выбора:

Последняя кнопка:

Шаг 6. Навигация

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

Наши изменения:

# Navigation/Navbar (header)
$navbar-nav-link-padding-x: 1.75rem
# Navigation/Navbar (header)/Navbar - Light version
$navbar-light-toggler-border-color: $purple
$navbar-light-color: $purple
$navbar-light-hover-color: rgba($purple, .7)
$navbar-light-active-color: $purple

Шаг 7. Содержание

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

Я выбрал иллюстрации из каталога Mirage в пакете Icons8.

Проверить, как я изменил текстовое наполнение и иллюстрации, можно в предварительных просмотрах: индекс, контакт, 404.

Шаг 8. Экспорт и работа над деталями.

На этом мы заканчиваем работу с онлайн-конструктором.

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

Имея дизайн, которым вы довольны, вы можете загрузить его на свой диск и начать работать над деталями. Bootstrap Shuffle позволяет экспортировать в HTML / CSS и исходные файлы (шаблоны PUG и файлы SCSS).

Цель Bootstrap Shuffle - позволить разработчикам как можно быстрее переключаться с простых задач на сложные (например, внутреннюю интеграцию).

Поэтому, если вы хотите ускорить свою работу, попробуйте Bootstrap Shuffle (конструктор для занятых разработчиков).

Удачи!

Первоначально опубликовано на сайте bootstrapshuffle.com 8 февраля 2019 г.

Как создать современный шаблон Bootstrap за 10 минут (с помощью Bootstrap Builder)