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 - исходный код библиотеки

Опубликовано: 08.06.2015Категория: Web-технологии Комментарии: 0