Bourbon – SASS библиотека для быстрого создания дизайна сайтов

Для начала – что такое Bourbon (Бурбон). Bourbon – это простая и очень “легкая” (в смысле размера в байтах) библиотека mixin-ов для SASS (некий аналог Compass). Другими словами, это возможность легко и просто делать сложные вещи на CSS (естественно, если для генерации CSS вы используете именно SASS). Использовать ее можно в любых веб-проектах, особенно же удобно использовать его в связке с Ruby on Rails.

В каких браузерах может работать эта библиотека:

Chrome 26+
Firefox 29+
Internet Explorer 9+
Opera 15+
Safari 6.1+

Другими словами, сейчас Бурбон будет работать практически у всех.

Установка Bourbon

Установка может быть легко проведена, используя менеджер пакетов RubyGems:

$ gem install bourbon

Альтернативно Бурбон можно поставить и при помощи Bower:

$ bower install bourbon

Ставим файлы библиотеки в текущую директорию (вы уж сами решите, в какой папке проекта вам удобно их хранить):

$ bourbon install

Все установлено, теперь для использования библиотеки миксинов сделайте импорт в начале вашего стилевого файла:

@import "bourbon/bourbon";

Примечание: строго не рекомендуется изменять файлы библиотеки Bourbon для того, чтобы потом иметь возможность обновлять ее без особых проблем:

$ bourbon update

Установка Bourbon в Ruby on Rails 3+ проект

Для Рельсов установка Bourbon еще быстрее и проще. Пишем в Gemfile проекта:

gem 'bourbon'

Запускаем:

$ bundle install

Перезапускаем сервер и переименовываем application.css в application.scss (если этого не было сделано ранее):

$ mv app/assets/stylesheets/application.css 
     app/assets/stylesheets/application.scss

Удаляем все(!!!) директивы Sprockets в application.scss и в дальнейшем используем только нативный импорт SASS – директиву @import.

Импортируем Bourbon в самом начале application.scss. Все другие стилевые файлы приложения можно будет импортировать уже только после импорта Bourbon:

@import "bourbon";
@import "home";
@import "users";

Использование Bourbon

Очень большое преимущество возникает при использовании Bourbon не самой по себе, как библиотеки, а как “опорный” код для Neat (CSS/SASS-фреймворк для создания макетов страниц, гридов), Bitters (скаффолд для быстрого создания дизайна страниц) и Refills (готовые шаблонные компоненты элементов веб-страниц), совместное использование которых дает такой же результат, как и использование CSS-фреймворков аналогов: 960 Grid System, Twitter Bootstrap, Foundation и пр. И группа Bourbon/Neat/Bitters/Refills имеет множество преимуществ перед конкурентами – логичная и стройная семантика, скорость разработки, гибкость, оптимальный-минимальный объем кода на выходе, легкость поддержки кода и пр.

Об этих фреймворках я еще расскажу в будущем, но вернемся сугубо к Бурбону.

Маленький пример использования. Допустим нам необходимо сделать красивую кнопку. Пишем просто HTML код кнопки:

<button>Pill Button</button>

А в стилевом файле подгружаем для нее соответствующий миксин от Бурбона:

button {
 @include button(pill);
}

И на выходе получаем кнопку вида:

Различные интересные миксины, на которые стоит обратить внимание

Animation – различные виды и типа CSS-анимации

Background – сложные случае указания фона
Background Image – фоновые изображения
Border Image – изображения в качестве рамки элемента
Font Face – задание шрифтов для текста
Image Rendering – оптимизация скорости загрузки изображения на веб-страницу
Linear Gradient – реализация линейного градиента методами CSS
Radial Gradient – аналогично, но радиальный градиент
Border Radius – создание скругленных рамок
Triangle – создание треугольников на CSS

Список всех остальных максинов от Bourbon, SASS-функций и SASS-плагинов этой библиотеки можно посмотреть по ссылке, указанной ниже.

Полезные ссылки

• http://bourbon.io – основная страница проекта
• http://bourbon.io/docs/ – описание все миксинов Bourbon
• https://github.com/thoughtbot/bourbon – исходный код библиотеки