Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Представляем Bourbon: легковесные Sass миксины и не только

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Bourbon: the Connoisseurs’ Choice for Sass Mixins.
A Taste of Bourbon’s Delicious Mixins

Russian (Pусский) translation by Nickita Chuhaj (you can also view the original English article)

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

Введение

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

Ну а сейчас - вот в чем суть:

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

Neat это легкий фреймворк с сеткой для Sass. Он построен на основе Bourbon. Предпосылкой к его созданию послужила необходимость семантического подхода к разметке сайтов.

Refills это коллекция дизайнерских паттернов, с оформлением или без. Так же на основе Bourbon и Neat. В вашем распоряжении супер полезные сниппеты.

Bitters это набор из небольшого числа базовых стилей, переменных и немного структуры для новых Bourbon проектов. Позволяет втянуться в кратчаййшие сроки.

Bourbon: библиотека примесей для Sass

Оригинальный фреймворк Bourbon был выпущен в начале 2011 года автором Philip LaPier, на тот момент - дизайнером цифровой продукции. Проект начинался как объединение полезных миксинов от различных дизайнеров компании.

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

Взятый на вооружение, он помогает писать код быстрее и справляться с многочисленными рутинными мелочами (вроде раздражающих вендорных префиксов). Миксины фреймворка часто выступают в роли "обертки" для вывода качетвенного CSS, но при этом остаются настолько простыми, насколько возможно, придерживаясь оригинального CSS синтаксиса.

Стоит отметить

  • Bourbon это чистый Sass, кроссплатформенный и работающий с любым Sass проектом.
  • Очень близок к базовому CSS синтаксису.
  • Не привязан к Ruby (в отличии от Compass).
  • Bourbon содержит замечательные функции
  • Поддерживает актуальные вендорные префиксы.
  • Супер легкий.
  • Семантический.

Настройка

Ну что ж, приступим? Запускаем терминал (или командную строку), переходим в папку с вашим проектом и устанавливаем Bourbon с помощью RubyGems:

Примечание: Если вы не совсем комфортно себя чувствуете, используя командную строку, предлагаем оценить наш цикл для начинающих командная строка для веб-дизайна

Перейдите в папку с таблицами стилей и создайте папку bourbon.

Эта команда создает bourbon папку, которая содержит функции, миксины, вспомогательные классы и все настройки, который вам нужны. Я рекомендую вам не трогать эту папку, чтобы безболезненно обновлять Bourbon в будущем.

file

Закончите установку импортом созданных Sass файлов в вашу таблицу стилей. Импортируйте Bourbon в самый верх вашего application.sass файла. Все остальные Sass файлы необходимо импортировать ниже.

В файле application.sass:

Обзор миксинов Bourbon

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

Вот парочка миксинов, с которыми я рекомендую ознакомиться в первую очередь:

  • background-image
  • linear-gradient
  • border-radius
  • retina-image
  • inline-block
  • transitions
  • box-sizing
  • animations
  • font-face
  • triangle
  • clearfix
  • position
  • button
  • size

Мы узнаем больше об отдельных миксинах в будущих уроках.

Обзор функций Bourbon

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

  • linear-gradient()
  • modular-scale()
  • golden-ratio()
  • shade()
  • tint()
  • em()

Опять же, мы взглянем подробнее на функции Bourbon в дальнейшем.

Дополнения (аддоны) Bourbon

Bourbon определяет небольшие, но полезные наборы переменных по умолчанию, к примеру:

Переменные для списка безопасных шрифтов

  • $lucida-grande
  • $monospace
  • $helvetica
  • $verdana
  • $georgia

Вместо обычного способа определени набора шрифтов:

с Bourbon вы используете одну из переменных семейства шрифтов:

Временные переменные

Бурбон предоставляет массу временных переменных, прямо из коробки. Миксин типа transition иммеет следующий синтаксис:

Последний параметр определяет расчет времени (тайминг) через переменную. Вы можете точно настроить поведение перехода определяя однй из 24 переменных для контроля тайминга. Следующие GIF иллюстрирует варианты:

file

Заключение

Сделайте себе и своим коллегам отдолжение - дайте Bourbon шанс. Фреймворк уделяет большое внимание семантической разметке, и вместе с тем остается легковесным и простым. Он сослужит хорошую службу CSS архитектуре вашего проекта и поможет освоить и усовершенствовать наилучшие методы создания превосходного кода.

Присоединяйтесь ко мне в следующей части цикла, где я более детально взгляну на Bourbon миксины.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.