Как подключить bourbon sass

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Читайте также:  Lg 47la615v как подключить к интернету через wifi

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

Заключение

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

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

Источник

5 способов улучшить Sass с помощью Bourbon

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

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

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

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

1. Форматы шрифтов

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

Для поддержки всех основных браузеров вам надо создавать файлы со шрифтами во всех основных форматах и затем подключать их в CSS до начала использования. Браузеры достаточно сообразительны, чтобы понять, какой из них надо использовать, но для кроссбраузерности надо добавлять все варианты. CSS для этого выглядит так:

Теперь вы можете использовать этот шрифт в заголовках:

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

Теперь вы можете использовать ‘My-Font’ где угодно в ваших стилях и все форматы для всех браузеров будут на месте.

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

Вот эти переменные:

Они генерируют следующие декларации font-family :

2. Поля ввода в формах

Хлеб и масло веб-разработки это контроль над внешним видом форм. Но добавление стилей, единообразно работающих во всех элементах формы, обычно означает написание более сложных селекторов.

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

Похоже дополнение есть и для кнопок:

Это даст следующие стили:

Сгенерирует такой CSS:

3. Преобразование единиц

Начнем с простой конвертации пикселей в em при дефолтном соотношении 16px = 1em. Вот код:

Если у вас другой базовый размер шрифта, вы можете передать его в качестве второго аргумента в ту же самую функцию em() :

Если вместо em вы используете rem, чтобы использовать базовое значение независимо от родительского элемента, то вы можете использовать функцию rem() :

4. Поддержка Flexbox

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

Конечно, для его использования в различных браузерах вам нужно добавить много вендорных префиксов и предусмотреть запасные варианты. В зависимости от того, как много браузеров вы собираетесь поддерживать, использование флексбокса может потребовать написания достаточно объемных CSS:

При виде такого количества кода, первоначальная радость от предвкушения Flexbox сменяется болью. Но если вам действительно нужно поддерживать все эти старые браузеры, в Bourbon есть возможность генерировать все эти объемы кода несколькими строчками:

Я уже упоминал в примечании к первой статье, что в Bourbon 5 (на данный момент вышла альфа версия) все будет по-новому. В частности, все миксины с вендорными префиксами будут удалены — разработчики библиотеки рекомендуют использовать для этого Autoprefixer.

Читайте также:  Как подключить ноутбук к телевизору philips через hdmi на windows 7

В Bourbon есть возможность поддержки большого набора свойств Flexbox. И при обновлении Bourbon генерируемый код будет меняться в зависимости от поддержки Flexbox в браузерах.

5. Изображения для экранов Retina

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

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

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

Последний параметр не обязателен, если вы используете PNG — в Bourbon это формат по умолчанию. Вы также можете кастомизировать это команду дополнительными параметрами, типа изображения для дисплеев с ретина или добавив суффикс.

Приступайте сегодня

Со всей этой полезной функциональностью и дюжинами функций с дополнительными возможностями нет смысла писать чистый Sass без Bourbon ведь это как писать CSS без Sass. Просто попробуйте, он стоит того!

Источник

Начинаем работу с Sass и Bourbon

Это прошлогодняя статья с Sitepoint из серии статей о библиотеке Bourbon и ее дополнениях (Bitters, Neat). Я выкладываю перевод этой серии в первую очередь по причине того, что Яндекс и Google знают не так много о Bourbon на русском (есть небольшая статья в блоге Zencoder, перевод статьи Хьюго Жираделя оттуда же и совсем краткое введение на webref). Ну и потому, что сейчас уже Thoughtbot работают над версией Bourbon 5.0 и скоро этот материал устареет значительно сильнее. Конкретно эта статья имеет смысл только в качестве введения в серию.

В этой статье, я надеюсь, смогу пробудить в вас интерес к компиляции и препроцессингу CSS, продемонстрировав установку Sass и Bourbon и рассмотрев интеграцию этих инструментов в ваш рабочий процесс.

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

Что не так с обычным CSS

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

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

Для меня самым элегантным решением этих проблем является работа Хэмптона Кэтлина и сообщества Open Source. Я говорю о Sass, препроцессоре для CSS, который позволяет вам писать чистый, поддерживаемый и структурированный код, генерирующий эффективный и полезный CSS.

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

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

Есть несколько способов начала работы с Sass. Вы можете установить Ruby Gem, использовать набор разработчика, включающий Sass (типа CodeKit для Мака) или же использовать преимущества библиотеки LibSass для нативной компиляции в Node или C.

После установки Sass вы сможете писать свои стили в нем, компилируя их в обычный CSS, понятный любому браузеру.

Установка Sass

Метод установки Sass это ваш личный выбор и он основывается на предпочитаемом вами окружении и ваших навыках. Ruby это один из наиболее удобных способов запуска Sass. Я, как и многие разработчики, использую Mac, а это значит, что Ruby в системе уже установлен. Поэтому я исхожу из того, что вам не надо устанавливать Ruby и вы можете запустить все команды в терминале. (Существует отличный гид по установке и запуску Ruby в различных окружениях, для пользователей Windows подойдет следующая статья.)

Читайте также:  Как подключить автоплатеж интернета билайн

Убедитесь, что установка прошла нормально, проверив версию Sass:

Вывод команды покажет номер установленной версии Sass — любая версия больше 3.3 будет отлично работать с примерами из моей статьи.

Основы Sass

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

Сохраните файл test.sass в текущем каталоге. Затем в командной строке выполните следующую команду:

Выбираем синтаксис

Минималистичный синтаксис оригинального Sass по своему крут, но он не обязателен. После выпуска Sass был создан новый синтаксис, более привычный для разработчиков CSS, называемый SCSS (Sassy CSS). Тот же самый код из предыдущего примера в нем будет точно также обработан компилятором, при этом изначально он выглядит более привычно:

Сохранив этот фрагмент как test.scss и обработав компилятором, вы получите CSS, идентичный предыдущему.

Автоматическая компиляция CSS

В том же каталоге, где вы сохранили тестовые файлы, выполните в терминале следующую команду:

Теперь измените файл test.sass :

Мы изменили значение color — и вы можете сразу увидеть результат изменений в скомпилированном файле test.css :

После инсталляции и запуска Sass вы получите огромное количество возможностей, которые облегчат разработку и управление CSS. Кроме гибкости вложений, вы получите также переменные, расчеты, условные выражения, импорт, расширения, наследование и многое другое.

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

Но мы не будем ограничиваться базовым Sass…

Добавляем Bourbon

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

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

Установка Bourbon

Ruby 1.9.3 нашей системе уже есть, Sass работает, а, значит, установка Bourbon будет не сложнее установки Sass. Просто введите следующую команду:

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

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

Просто добавьте следующий фрагмент:

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

Ваш первый миксин с Bourbon

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

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

Идем дальше

Я показал вам как установить Sass и Bourbon, как скомпилировать Sass в CSS и как импортировать Bourbon. В качестве следующего шага я советую изучить документацию Sass (русский перевод) и Bourbon, ведь там достаточно возможностей для ускорения вашего рабочего процесса и улучшения продуктивности.

В сети существует множество ресурсов, облегчающих изучение Sass — есть отличные статьи от гуру sass Хьюго Жираделя, сайт The Sass Way, проводятся конференции, где вы можете узнать больше. И есть великолепная книжка Дэна Седерхольма “Sass для веб-разработчиков”.

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

Комбинация Sass и Bourbon это мощнейший инструмент в вашем арсенале, а ведь мы еще не коснулись таких дополнений к Bourbon как Neat и Bitters. Все это будет в следующих статьях цикла.

Источник

Поделиться с друзьями
Делаю сам
Adblock
detector