Мир фронтальной разработки с любовью использовал возможности языков предварительной обработки, таких как Sass , которые позволяют разработчику создавать модульный и универсальный CSS с удобством функций, переменных и расширяемости. Одним из преимуществ Sass является то, что на его основе можно создавать сложные библиотеки, что расширяет его универсальность.
Если вы занимаетесь интерфейсной разработкой, вы наверняка обнаружили ценность следования последовательным шаблонам имен и соглашениям по кодированию. И если вам приходилось создавать что-то сложное, вы уже могли бы знать, насколько удобно и полезно начинать с проверенной и надежной структуры. Но если ваши требования не выходят за рамки нормы для веб-приложений, вы можете не захотеть тратить свое время и силы на создание и поддержание библиотеки стандартных элементов и соглашений об именах.
Несколько человек собрали решения, которые помогают решить эту проблему, включая Twitter Bootstrap и Zurb Foundation , и у каждого есть свои преимущества. Но, в зависимости от размера и сложности вашего проекта, может быть, не стоит вкладывать средства в изучение соглашений о всеобъемлющей структуре. Вы также можете не интересоваться изменением способа пометки и структурирования своего HTML-кода, чтобы получить максимальную отдачу от одного из этих интегрированных подходов.
Один из моих любимых строительных лесов — Бурбон с биттером . Он сочетает в себе легкую простоту Bourbon с относительно незавершенным набором стилевых соглашений для стандартных элементов HTML. Это помогает сделать вещи чистыми и последовательными, и не нужно захватывать все ваше приложение, чтобы творить чудеса.
Быстрая установка
Чтобы добавить Bitters в проект, который уже использует Sass и Bourbon, вам просто нужно установить гем Bitters. (Если вам нужно освежить в памяти информацию о добавлении Sass и Bourbon в проект, вы можете ознакомиться с этой статьей, в которой рассматриваются основы.)
gem install bitters Затем выполните команду установки из каталога Sass:
cd stylesheets/sass bitters install
Это создаст base каталог внутри вашего sass каталога. Вы можете импортировать биттеры в свой основной файл Sass сразу после Бурбона:
@import bourbon @import base/base
Теперь вы можете писать свое приложение так же, как и всегда, и уверены, что ваши стили будут настроены на привлекательные и непротиворечивые значения по умолчанию, которые вы можете легко переопределить.
Разумные значения по умолчанию
Bitters предоставляет визуально согласованные и привлекательные значения по умолчанию для всех основных элементов HTML. Но Bitters не предназначен для замены хорошего сброса CSS. Разработчики рекомендуют использовать Bitters поверх Normalize для согласованного представления в разных браузерах вместе со всеми преимуществами, которые предлагает Bitters.
Некоторые вещи, которые вы получаете бесплатно с помощью Bitters, — это четко градуированные размеры заголовков, стандартные цвета и веса линий, базовые выровненные по левому краю списки без маркеров, чистое простое представление таблиц и элементы формы, которые выглядят и действуют согласованно. Биттерс также затрагивает многие другие стандартные элементы HTML, поэтому страница, написанная без каких-либо дополнительных стилей, будет легко читаться и выглядеть одинаково независимо от того, какой браузер вы используете для ее просмотра.
Bitters не настаивает на большом количестве пользовательских классов и форматировании разметки, чтобы получить большинство преимуществ, которые он предоставляет. Если вы просто пишете семантически правильные страницы HTML5, Bitters позаботится обо всем остальном и уйдет с вашего пути.
Простые переопределения
Bitters делает свое волшебство таким образом, чтобы разработчикам было очень легко настроить параметры по умолчанию и создать стиль, уникальный и подходящий для каждого сайта. Все основные варианты, которые Биттер будет применять, инкапсулированы в документе _variables.scss .
Здесь вы можете вносить изменения непосредственно в переменные, такие как $base-font-color или $base-border-radius и видеть, как они отражаются во всех стилях, которые применяет Биттер автоматически. Биттерс использует эти значения для изменения способа вычисления других стилей в генерируемом им CSS.
Например, если вы $base_border_color значение $base_border_color по умолчанию, вы увидите, что этот новый цвет будет отображаться в границах ваших th элементов во всех ваших таблицах по умолчанию, а также на десять процентов более светлого оттенка цвета, выбранного вами в фон fieldset для форм.
Рекомендуется добавлять переопределения в конец файла переменных, а не изменять значения на месте, чтобы вы могли легко отслеживать изменения в Bitters и применять их по мере развития библиотеки. Или, что еще лучше, добавьте строку @import в файл _base.scss в вашем каталоге stylesheets/base прямо под @import "variables"; линия, и поместите ваши переопределения там!
Форматирование форм
Есть много разных способов сделать форму, и Биттерс не разборчив в выборе подходов. В то время как разные браузеры могут отображать одни и те же элементы формы по-разному, Bitters делает все возможное, чтобы поддерживать эти формы единообразными и удобными, не мешая стилю, специфичному для браузера, который может быть знаком пользователям.
Воспользовавшись удобной переменной $all-text-inputs от Bourbon, Биттерс применяет ряд соглашений, основанных на собственных настраиваемых переменных, которые дают вам такие стили, как простой белый фон, серые поля, а также хорошо выровненные флажки и переключатели. И, конечно, все зависит от ваших предпочтительных значений, установленных в переменных Биттера.
Стили форм Bitters устраняют некоторые основные несоответствия в макете форм, которые могут возникать в разных браузерах, и применяют согласованные цвета, шрифты и обработку границ, не переопределяя встроенную в браузер форму представления. Таким образом, вашим посетителям, знакомым с внешним видом форм в Firefox, не придется ломать голову, задаваясь вопросом, почему переключатели на вашем сайте так сильно отличаются от тех, которые они инстинктивно знают, как использовать.
В то же время, по умолчанию Bitters решает проблемы с компоновкой, которые иногда могут затруднить согласованное расположение элементов формы в разных браузерах, устраняя эту головную боль.
Удобные соглашения
Есть некоторые поведения, которые являются общими для большинства веб-приложений, такие как отображение сообщения об ошибке или уведомление пользователя о том, что что-то было выполнено. Но каждый браузер показывает это по-своему, если вы полагаетесь на чистый HTML. Некоторые из тяжелых сред CSS, такие как Bootstrap и Foundation, предоставляют соглашения, такие как флэш-уведомления, но Bitters также предоставляет вам удобство стандартных предупреждений и предупреждений, которые следуют вашим проектам.
Bitters предоставляет простой синтаксис для определения сообщений об ошибках и флэш-уведомлений. Вы хотите, чтобы такие элементы выглядели и вели себя одинаково с одного экрана на другой и использовали одинаковые цвета, чтобы пользователи могли лучше понять их значение. Bitters обеспечивает привлекательные значения по умолчанию, и их представление легко переопределено, поэтому вам не нужно, чтобы ваши уведомления выглядели как все остальные.
@flash предоставляет набор переопределений фона и цвета для любого элемента уровня блока и любых ссылок, которые он содержит. Вы можете просто @include flash(#F99) чтобы дать вашему элементу красный фон, темно-красный текст и более темные красные ссылки, которые становятся еще темнее при наведении на них курсора. Или вы можете @extend один из предопределенных @extend %flash-alert , %flash-error , %flash-alert или %flash-success чтобы получить аналогичный эффект с цветами, определенными для соответствия этим состояниям в файле _variables.scss , вместе с с некоторым форматированием, которое обеспечивает жирный текст и дополнительные поля и настройки отступов.
Не Мнение
Самое приятное в Bitters заключается в том, что он небольшой, удобный и тихо выполняет свою работу в фоновом режиме, когда вы хотите улучшить свою базовую презентацию с помощью некоторых пользовательских стилей. Ни одно из соглашений, навязываемых Bitters, не должно мешать мнению вашего дизайнера, но они могут просто сделать ваши собственные простые страницы такими, как если бы вы получили какой-то солидный совет по дизайну. И Bitters позволяет вам переопределить его настройки, просто переопределив ваши стили позже.
Если вам нужен набор базовых стилей, которые вы можете применить к своему следующему проекту, вы можете сами разработать некоторые соглашения с нуля, установить и освоить тяжелый CSS-фреймворк или просто добавить немного Bitters в свой Bourbon и Sass. Я думаю, что вы найдете Биттерс удобным и ненавязчивым, и по достоинству оцените тихую мощность, которую он обеспечивает.