Прогрессор

О сайте Документация Jekyll Статьи Переводы

Добавляем Bitters к Bourbon и Sass

17 Ноября 2015

Автор: М.Дэвид Грин

Оригинал статьи: Adding Bitters to Bourbon and Sass

Оглавление:

• Быстрая установка
• Установки по умолчанию
• Изменение настроек по умолчанию
• Форматирование форм
• Удобные соглашения
• Заключение

Мир фронтенда по достоинству оценил мощь препроцессоров CSS типа Sass, позволяющих разработчикам создавать модульные и гибкие CSS с удобством функций, переменных и расширяемостью. Одним из преимуществ Sass является возможность создания комплексных библиотек для расширения его функциональности.

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

Уже были попытки решения этой задачи, самые известные из которых это Twitter Bootstrap и Zurb Foundation , каждая со своими достоинствами. Но в зависимости от размера и сложности вашего проекта, не всегда имеет смысл тратить время на изучение особенностей универсального фреймворка. Еще менее интересно изменять разметку HTML, специально подстраивая ее под требования фреймворка.

Из библиотек, задающих базовый каркас стилей мне больше нравится Bourbon with Bitters . Ее плюс в легкости и простоте Bourbon и отсутствии жестких требований по структурированию HTML-элементов. Она помогает делать проект чистым и согласованным, и не требует вам излишних формальностей.

Быстрая установка

Чтобы добавить Bitters в проект, использующий Sass и Bourbon, вам нужно установить gem Bitters.

Bash

gem install bitters

После установки в системе, Bitters нужно установить непосредственно в проект из каталога sass:

Bash

cd stylesheets/sass && bitters install

Эта команда создаст каталог base внутри каталога sass. Подключаются стили Bitters сразу после Bourbon:

Sass (Scss)

@import bourbon

@import base/base

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

Установки по умолчанию

Bitters предоставляет визуально согласованные и привлекательные настройки стилей для основных HTML-элементов. Но Bitters не заменяет правильный CSS-reset. Разработчики рекомендуют использовать Bitters вместе с Normalize для единообразного отображения во всех браузерах, чтобы полностью реализовать все преимущества Bitters.

Bitters предоставляет вам согласованные размеры заголовков, стандартные цвета и высоты строк, выровненные слева списки без маркеров, простое отображение таблиц, а также единообразно стилизованные формы. Также Bitters добавляет стили и другим стандартным HTML-элементам, позволяя странице без каких-либо дополнительных стилей выглядеть читаемой и одинаковой во всех браузерах.

Bitters не задает жестко определенных классов и требований к структурированию разметки. Просто пишите семантически корректный HTML5 и этого будет достаточно.

Изменение настроек по умолчанию

Разработчики могут легко менять установки по умолчанию Bitters, что позволяет создавать уникальный стиль сайтов. Все базовые настройки Bitters находятся в файле variables.scss.

Можно внести изменения в переменные типа $base-font-color или $base-border-radius непосредственно там и увидеть, как эти изменения автоматически отразились на всем сайте. С помощью таких базовых переменных Bitters рассчитывает все стили CSS.

Например, если вы поменяли первоначальное значение $base_border_color, вы увидите новый цвет в границе элементов th во всех таблицах, а этот же цвет осветленный на 10% будет фоновым для элемента fieldset форм.

Вместо изменения значений переменных, лучше добавлять новые значения внизу файла с переменными, так вам будет удобнее отслеживать ваши изменения в Bitters и развивать их. Еще лучше использовать директиву @import и подключать переменные вместе с вашими базовыми стилями в файле base.scss сразу после @import "variables", что автоматически изменит дефолты на ваши значения.

Форматирование форм

Есть много разных способов создания форм и Bitters не обязывает вас выбирать какой-либо один. Но пока браузеры отображают одни и те же элементы форм по-разному, Bitters делает свою работу и сохраняет формы одинаковыми без каких-либо дополнительных кроссбраузерных трюков.

Используя преимущества переменной Bourbon $all-text-inputs, Bitters использует набор соглашений основанный на собственных кастомизируемых переменных, которые дают стили, такие как простой белый фон, серый фон fieldset, выровненные чекбоксы и радиокнопки. И при желании все это можно поменять

Стили Bitters для форм решают самые базовые проблемы с кроссбраузерностью и применяют согласованные цвета, шрифты и границы без переписывания встроенной в браузеры системы отображения форм. Таким образом пользователи Firefox не будут чесать голову от того, что ваши радио-кнопки отличаются от тех, которые они привыкли инстинктивно использовать.

В то же время установки Bitters направлены на проблемы с ракладкой, такие как выстраивание всех элементов в ряд в разных браузерах.

Удобные соглашения

В большинстве веб-приложений используется похожее поведение пользовательского интерфейса, например, высвечивание сообщений об ошибке или сообщений об успешном выполнении чего-либо. Но каждый браузер показывает это по своему, если вы полагаетесь на чистый HTML. Некоторые тяжеловесные фреймворки типа Bootstrap и Foundation предлагают свои стандарты, такие как всплывающих уведомления, но Bitters в дополнение дает согласованность стандартных алертов и предупреждений вашему дизайну.

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

Миксин @flash дает набор из background и color, действующий для любого элемента и любой ссылки в элементе. Включив @include flash(#F99) мы даем элементу красный фон, темно-красный цвет, еще более темные ссылки, темнеющие при наведении. Еще можно расширить (@extend) один из готовых плейсхолдеров %flash-alert, %flash-error, %flash-notice или %flash-success для получения похожих эффектов, также получив форматирование для жирного текста и дополнительные отступы и пэддинги.

Компонент @flash перенесен из Bourbon в состав набора дополнений Refills.

Заключение

Главные достоинства Bitters — небольшой размер, согласованность, ненавязчивость и расширяемость. Ни одно из требований Bitters не помешает вашему дизайну, но в то же время придаст даже самым простым страницам солидный вид.

Если вам нужны четкая структура и набор базовых стилей для следующего проекта, то вы можете начать с чистого листа или освоить большой CSS-фрэймворк. А можете просто добавить Bitters к Bourbon .

Серия статей: "Библиотека Bourbon":

1. Начинаем работу с Sass и Bourbon
2. 5 способов улучшить Sass с помощью Bourbon
3. Семантические сетки с Sass, Bourbon и Neat
4. Добавляем Bitters к Bourbon и Sass
5. Bourbon Refills - готовые компоненты для ускорения разработки

17 Ноября 2015