What we'll be building

I wanted to take a minute to go through…what we'll be creating in the rest of this course.…I really believe in a practical approach to learning…so I created this project for us to build together.…In the process, we'll be exploring many…different parts of the technologies in this course.…This is a single page website that I built…using SASS, Compass, and the Suzee framework for responsive grids.…When I resize the windows, you can see that the layout changes.…The site uses SASS with…compass mix ins, to create the CSS3…features, like gradients, rounded edges, text shadows.…

All without having to worry about browser prefixes.…Plus I can also work more effectively with the color palette,…and handle the responsive break points without having to use math.…Now I also wanted to show you how easy this site…is to work with, once you have grunt installed and set up.…So as we have all the prerequisites…installed, all I need to do to work on this project, is…to open it up on the terminal, switch over to the folder.…And run the grunt command.…

Resume Transcript Auto-Scroll

Author

Released

10/30/2013

Using a framework helps simplify your workflow and makes writing CSS fun again. Learn how Compass (powered by Sass) can help you build responsive layouts that are easier, faster, and more compatible than using CSS alone. In this course, Ray Villalobos shows how to automate your workflow with Grunt.js, scaffold your HTML, modularize your Sass with partials, and get started styling with variables and mixins. Plus, learn how to create a mobile-first grid with Susy—without adding nonsemantic HTML markup.

Need a refresher on Sass? Check out CSS with LESS and Sass with Joe Marini.