Bourbon Smash

Managing styling and front-end design can be complicated, especially if you spend most of your time as a developer. In this course you'll learn thoughtbot's Bourbon suite, a collection of tools and frameworks that make building clean, maintainable styles a breeze.

Exercises

Bourbon Smash Introduction

Wondering what exactly Bourbon and its friends are, and why you'd want to use them to build your styling? Well look no further. In this video we cover it all and explain how we think about front-end styling here at thoughtbot.

Sass Overview

Sass bills itself as "CSS with superpowers" and it certainly lives up to the title. In this video we introduce the most powerful and useful features of Sass to build more maintainable and clear stylesheets, and lay the foundation for Bourbon and Neat which rely on Sass for much of their magic.

Sass Foundations Exercise

Put your new-found Sass knowledge to the test in this exercise as we refactor a stylesheet from plain ole' CSS to Sass. In this exercise you'll get to try out great Sass features like imports, variables, nesting, and even loops, and come away with a solid grasp on how Sass can be used to clean things up.

Bourbon Introduction

Bourbon is our core library that helps us build maintainable stylesheets. It’s built with Sass and provides the foundation for all of our styles as well as Neat, Bitters, and Refills. In this video we explain exactly what Bourbon provides, and how you can best use it to aid your styling work.

Bourbon Foundations Exercise

Take advantage of Bourbon's mixins to style a login form. You'll get to work with both Sass and Bourbon in the exercise to lock in your knowledge.

Neat - Semantic Grids

Design a responsive grid without having to change your HTML! Neat layers onto the foundation of Sass and Bourbon, giving us the tools we need to build a semantic responsive grid with ease.

Neat Grids Exercise

Use Neat to build a responsive grid based layout. You'll use Neat's mixins as well as Sass variables to build a responsive grid, all without needing to change your HTML.

Bitters and Refills

Ok, Sass, Bourbon, and Neat all sound great, but who wants to start completely from scratch every time? With Bitters, our style foundation for building applications, and Refills, our catalog of pre-styled components, you can stick to the clean semantic design and still be up and running quickly.

Bringing It All Together

In this last video, we bring together everything from Sass, Bourbon, Neat, Bitters and Refills to style a Rails application. Tyson shows us his real process, and explains the thinking and choices at each step.

Taught by

Chris Toomey

Chris is a big fan of Vim and the general Unix philosophy of sharp, focused tools. He started his career as a mechanical engineer but has always had a passion for programming, specifically web development. He has worked in Visual Basic and Python, but since finding Ruby and Rails, there’s been no looking back. Outside of coding, Chris is a fan of dinner with friends, skiing, and an embarrassingly eclectic cross section of music.

Tyson Gach

Tyson is a designer at thoughtbot in New York City. He’s passionate about web accessibility and maintains Bourbon, an open-source Sass library. Tyson is a coffee enthusiast, imbiber of cocktails and is probably craving pie.