• Web-технологии

    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-плагинов этой библиотеки можно посмотреть по ссылке, указанной ниже.

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


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

    Комментарии

    Пока нет комментариев.

    Оставьте свой комментарий

    Ваше имя: Email: Оставьте свой email, если хотите получать уведомления о комментариях на этой странице. Ваш email не будет опубликован на сайте.