← Back to all posts

Bourbon - Simple and Awesome SCSS framework

Syntactically awesome stylesheets (Sass) is a CSS extension language that makes it easier for web developers to create advanced styles. Bourbon framework and its associated libraries viz Neat, Bitters and Refills help developers speed-up Sass implementation as well as make it easier to build CSS features like grid, forms, typography etc.

Bourbon, Neat, Bitters and Refills together constitute a simple, lightweight and solid framework for Sass. The Bourbon framework enables modular development workflow, and  supports custom global compilation settings. It also provides support for IE7+ when  used with Selectivizr (for CSS3 selectors) and Respond.js (for media queries).

Here’s a look at Bourbon and its supporting libraries built by thoughtbot:



Bourbon is a set of Sass mixins which use Scss syntax to provide a solid foundation for rapid development of CSS3 features. It includes mixins for supporting CSS3 features such as animation, font-family, button styles and pre-built functions for calculating gradients.

File size : 0kb




Neat Is an open-source semantic grid framework built on Sass.  Neat enables you to define column counts, grid spans, and breakpoints. It also allows dynamic alteration of column counts at different breakpoints.

File size (default) : 97 bytes




Bitters is a collection of basic styles for typography, headings, form, lists, grid and error message module. Since Bitters does not providing good CSS reset, developers should add normalized styles manually.

File size(Complete) 62 kb




Refills provides pre-built page components and UI patterns built using Bourbon, Neat, and Bitters. Developers can easily choose a UI pattern and copy the corresponding code to the stylesheet file.


The biggest advantage of using Bourbon is that unlike other class based frameworks, it is 100% semantic and allows developers to write clean/compact code.

comments powered by Disqus