Hey there! We're thoughtbot, a design and development consultancy that brings your digital product ideas to life. We also love to share what we learn.

This coding exercise comes from Upcase, the online learning platform we run. It's part of the Bourbon Smash course and is just one small sample of all the great material available on Upcase, so be sure to visit and check out the rest.

In this exercise we'll be working on a pricing grid page. Our goal is take the existing styles, written in plain ole' CSS, and refactor them use Sass to make them clearer and easier to maintain.

To start, you'll want to clone and run the setup script for the repo

git clone git@github.com:thoughtbot-upcase-exercises/sass-foundations.git
cd sass-foundations
bin/setup

You can start the server to view the styled page with:

bundle exec middleman server

Your goal is to refactor the application stylesheet using Sass, without altering the design.

You'll want to take advantage of Sass partials, mixins, variables, loops, and everything else covered in the Sass video to clean up the provided stylesheet.

Be sure to revisit the Sass Foundations video on the Bourbon Smash trail, as well as the Sass Project for reference.

Check out the featured solution branch to see the approach we recommend for this exercise.

If you find yourself stuck, be sure to check out the associated Upcase Forum discussion for this exercise to see what other folks have said.

When you've finished the exercise, head on back to the Bourbon Smash course to find the next exercise, or explore any of the other great content on Upcase.

sass-foundations is Copyright © 2015-2018 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

This exercise is maintained and funded by thoughtbot, inc.

The names and logos for Upcase and thoughtbot are registered trademarks of thoughtbot, inc.