tatiyants.com Compass or Twitter Bootstrap? Why Not Both

Compass and Twitter Bootstrap are two excellent web development frameworks built on top of CSS pre-processors (Sass and LESS respectively). Both can be very useful even though the approaches they take are rather different: Compass is a large collection of mixins which can be used to quickly add sophisticated styles, while Bootstrap provides pre-styled components and behaviors which can be used out of the box.

In this article, I’ll take a closer look at some of the similarities and differences between these two frameworks. Please note that this isn’t meant to be an exhaustive point-by- point comparison, but rather an overview of key capabilities.

Similarities

Resets

Different browsers use different defaults (for things like margin and padding) to render HTML elements. And even though it’s less of a problem than it used to be (thank you IE), it’s now standard practice to normalize browser defaults by using Reset stylesheets. It’s therefore not a big surprise that both frameworks include one (Compass Reset, Bootstrap Reset).

Grid Systems

Using grid systems for layout is an established practice and both frameworks offer them (Compass Grid Background, Bootstrap Grid System). Moreover, both support fixed and fluid layouts, and both can be used to create responsive web pages.

Typography/Element Styling

Both Compass and Bootstrap provide support for styling standard typography elements such as lists, links, vertical rhythm, text, etc (Compass Typography, Bootstrap Typography). Both frameworks also have styling for tabular layouts (Compass Tables, Bootstrap Tables).

Differences

As I mentioned earlier, Compass offers a treasure trove of mixins. Probably the most notable collection is CSS3 which makes it easy to do things like box shadow and border radius. Compass also has great Sass extensions and utility mixins for anything from adjusting the tint of a color to support for sprite generation.

Bootstrap has a bunch of pre-configured styles for various HTML elements like buttons. Furthermore, there’s a large selection of components for anything from navigation elements to progress bars. Finally, Bootstrap has a set of jQuery plugins which provide interactivity for things like modals and typeaheads.

Compass + Bootstrap?

Although there’s overlap between Compass and Bootstrap, each framework offers enough unique capabilities to warrant using them together. Probably the easiest way to do this is by leveraging a port of Bootstrap to Sass. There are a few available: Bootstrap Sass, Bootstrap Sass Rails, and Sass Twitter Bootstrap. Using them requires installing a gem for Bootstrap along side Compass. Once installed, Bootstrap styles can simply be imported into your Sass project.

If you do decide to combine Sass and Bootstrap in your project, you should probably pick only one of them for the common pieces (like layouts). In my opinion, it makes sense to leverage Bootstrap for layout, reset, and typography, while using Compass for things like advanced CSS3 styles.

Compass or Twitter Bootstrap? Why Not Both