HTML & CSS
Article

Adding Bitters to Bourbon and Sass

By M. David Green

The world of front-end development has lovingly embraced the power of pre-processing languages like Sass, that allow a developer to create modular and versatile CSS with the convenience of functions, variables, and extensibility. One of the advantages of Sass is that it’s possible to build complex libraries on top of it to extend its versatility.

If you’re doing front-end development, you’ve certainly discovered the value of following consistent naming patterns and coding conventions. And if you’ve had to build anything complex, you might already be aware of how convenient and useful it is to start with a tested and reliable structure. But unless your requirements fall well outside of the norm for web applications, you may not want to invest your time and effort into building and maintaining a library of standard elements and naming conventions.

A few folks have put together solutions that help address this issue, including Twitter Bootstrap and Zurb Foundation, and each has its own advantages. But depending on the size and complexity of your project, it may not be worth the investment of learning to navigate the conventions of a comprehensive framework. You may also not be interested in changing your way of tagging and structuring your HTML to get the most out of one of these integrated approaches.

One of my favorite styling scaffolds is Bourbon with Bitters. It combines the lightweight simplicity of Bourbon with a relatively unopinionated set of styling conventions for standard HTML elements. It helps make things clean and consistent, and doesn’t have to take over your entire app to do its magic.

Quick Installation

To add Bitters to a project that’s already using Sass and Bourbon, you just need to install the Bitters gem. (If you need a refresher on adding Sass and Bourbon to a project, you can check out this article that covers the basics.)

gem install bitters

Then run an install command from inside the Sass directory:

cd stylesheets/sass
bitters install

This will create a base directory inside your sass directory. You can import Bitters in your main Sass file right after Bourbon:

@import bourbon
@import base/base

Now you are free to write your app the same way you always do, confident that your styles will be set to attractive and consistent defaults that you can easily override.

Sensible Defaults

Bitters provides visually consistent and attractive defaults for all of the core HTML elements. But Bitters is not meant to replace a good CSS reset. The developers recommend using Bitters on top of Normalize for consistent presentation across browsers, along with all the advantages Bitters offers.

Some of the things you get for free with Bitters are cleanly graduated header sizes, standard colors and line weights, basic left-aligned lists without bullets, clean simple table presentation, and form elements that look and act in a consistent manner. Bitters also touches on many of the other standard HTML elements, so a page written without any additional styles will be easy to read and look similar regardless of which browser you use to view it.

Bitters doesn’t insist on a lot of custom classes and markup formatting to get most of the advantages it provides. If you just write semantically correct HTML5 pages, Bitters will take care of the rest, and get out of your way.

Easy Overrides

Bitters does its magic in a way that makes it very easy for developers to customize the default settings, and create a style that is unique and appropriate for each site. All of the core choices that Bitters will apply are encapsulated in a _variables.scss document.

In here you can make changes directly to variables such as $base-font-color or $base-border-radius and see them reflected across all of the styles Bitters applies automatically. Bitters uses these values to modify the way other styles are calculated throughout the CSS it generates.

For example, if you changed the $base_border_color value from the default, you would see this new color show up in the borders of your th elements in all your default tables, as well as a ten percent lighter shade of the color you selected in the fieldset background for forms.

It’s a good idea to add your overrides at the bottom of the variables file, rather than modify the values in-place, so you can easily keep track of your changes to Bitters and apply them as the library evolves. Or even better, add an @import line to the _base.scss file in your stylesheets/base directory right below the @import "variables"; line, and put your overrides there!

Form Formatting

There are many different ways to make a form, and Bitters isn’t picky about which approach you choose. While different browsers can render the same form elements in very different ways, Bitters does its best to help keep those forms consistent and usable without getting in the way of browser-specific styling that may be familiar to users.

Taking advantage of Bourbon’s convenient $all-text-inputs variable, Bitters applies a set of conventions based on its own customizable variables that will give you styles such as simple white backgrounds, gray fieldsets, and nicely aligned checkboxes and radio buttons. And of course it’s all subject to your preferred values set in the Bitters variables.

The Bitters form styles take care of some of the basic inconsistencies in form layout that can occur across browsers, and apply consistent colors, fonts, and border treatments, without overriding the browser’s built-in form presentation. That way your visitors who are familiar with form appearance in Firefox won’t have to scratch their heads wondering why the radio buttons on your site look so different from the ones they know instinctively how to use.

At the same time, the Bitters defaults address layout issues that can sometimes make it difficult to get form elements to line up consistently in different browsers, taking that headache out of the way.

Convenient Conventions

There are some behaviors that are common to most web applications, such as displaying an error message or notifying a user that something has been completed. But each browser shows this in a different way if you rely on pure HTML. Some of the heavyweight CSS frameworks like Bootstrap and Foundation provide conventions such as flash notifications, but Bitters also gives you the convenience of standard alerts and warnings that follow your designs.

Bitters provides a simple syntax for defining error messages and flash notifications. You want elements like these to look and behave the same way from one screen to the next, and to use the same colors, so your users become familiar with their meaning. Bitters provides attractive defaults, and their presentation is easily overridden, so you don’t have to make your notification messages look like everyone else’s.

The @flash mixin provides a set of background and color overrides for any block-level element, and any links it contains. You can just @include flash(#F99) to give your element a red background, dark red text, and darker red links that go even darker when you hover over them. Or you can @extend one of the predefined %flash-alert, %flash-error, %flash-notice, or %flash-success placeholders to get a similar effect with colors defined to match those states in the _variables.scss file, along with some formatting that provides bold text and additional margins and padding settings.

Not Opinionated

The nicest things about Bitters are that it is small, convenient, and that it does its job quietly, in the background, getting out of your way when you want to do enhance your core presentation with some custom styling. None of the conventions Bitters imposes should interfere with your designer’s opinions, but they might just make your own simple pages look as if you had gotten some solid design advice. And Bitters lets you override its settings just by redefining your styles later.

If you want a set of basic styles you can apply to your next project, you could either work out some conventions yourself from scratch, install and learn a heavy CSS framework, or just sprinkle a little Bitters into your Bourbon and Sass. I think you’ll find Bitters convenient and unobtrusive, and appreciate the quiet power it provides.

  • http://http//www.pagerank-seo.com PageRankSEO

    Thanks for posting. In the section “Quick Installation” in the link, <a href=””>check out this article</a>, no URL is included. What’s the title and URL for the article which was to have been linked?

  • OphelieLechat

    Good catch — it should link to this: http://www.sitepoint.com/getting-started-sass-bourbon/. The link is now fixed.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.