Announcing Bitters, a Dash of Sass Stylesheets for Bourbon and Neat

Kyle Fiedler

The designers here like to have simple stylesheets when starting a new project. Styles that are better looking than browser defaults but not something that that will dictate our visual design moving forward. These styles should also remove a lot of the duplicated work we do when getting a project off the ground so we can start solving harder problems faster.

Our long time solution to this problem was the stylesheets in Flutie but Flutie’s stylesheets had grown outdated, its defaults and reset were getting in the way. We were continually overriding the styles, which was adding unnecessary bloat to our CSS. These styles weren’t doing their job, they were slowing us down at the start of a project not helping us speed up.

Instead of trying to refine the styles in Flutie we decided to just remove them and let Flutie stand alone as ActionView helpers. We didn’t just want to duplicate the problems that we had with Flutie’s styles and wanted to start from scratch. We also wanted to integrate this more fully with Bourbon and Neat.

Bitters aims to solve the same set of problems that the Flutie stylesheets and the problems that raised out of Flutie’s inattention. Unlike Flutie, the Bitters files should be installed into your Sass directory and imported at the top of your main stylesheet. Once installed the files should be edited to fit the style of the site or application. This way you won’t override styles and won’t add unnecessary cruft to your stylesheets, instead you’ll be building on top of the foundation that Bitters provides.

Bitters gives you plain variables for type, sizes, and color, a simple grid using Neat, smart defaults for typography and simply styled flashes for notifications or errors. Most importantly it should set up a consistent language and structure for your Sass.

We are still working out some of the details and I appreciate any feedback you might have.