Bourbon Smash Introduction

In this course, we'll introduce you to our CSS design tools and thinking for all of our projects.

We'll start with Sass ("Syntactically Awesome Style Sheets"), which is like CSS with superpowers. It's is a CSS preprocessor, meaning it compiles into CSS, so you can use it in any app where you'd use CSS.

The Bourbon tool set

All of our design tools are open-source and built on Sass: Bourbon, Neat, Bitters and Refills. Bourbon is a lightweight Sass tool set; Neat is a grid framework; Bitters gives you a dash of style that you can easily override; and Refills is a store of patterns for things like hero units.

Bourbon doesn't force you to use specific classes; instead, it provides you with the tools to write effective and efficient stylesheets using class names that you choose.

Bootstrap

Bootstrap is very different from Bourbon. Bootstrap specifies class names and forces some design patterns on you. Bootstrap is great and works well in some specific cases, but Bourbon helps you create better and more maintainable styles in the long run.

Bootstrap is hard to remove from your project, as well, since it uses specific classes. Bourbon/Neat/Bitters/Refills should help you start quickly (just like Bootstrap) but without locking you in to specific styles.

Let's dive in!