Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Responsive CSS Workflow with Sass Bourbon and Susy

Video Introducing this tutorial

Introduction

Welcome
What you should know
Using the exercise files

1. Getting Started

What is Sass?
How Sass works
What is Bourbon?
Analyzing workflow options
Setting up a folder structure
Adding version control

2. Working with Package Managers

Using node.js npm with package.json
Configuring package.json
Using Bower with bower.json
Configuring bower.json

3. Setting Up a Workflow with Grunt.js

Configuring gruntfile.js
Creating your first task
Watching for automated tasks
Minimizing JavaScript with Uglify

4. Scaffolding Your HTML

What you'll be building
Preparing the assets
Scaffolding the header and footer
Adding a hero section
Inserting the main content
Adding testimonials

5. Sass Principles

Modularizing your Sass with partials
Creating a color palette with variables
Using nested styles for a menu

6. Styling with Sass and Bourbon

Using Font Awesome
Using custom fonts
Styling default HTML styles
Controlling mixin parameters

7. Responsive Layout Grids with Susy

Creating a mobile-first layout
Setting up Susy's defaults
Starting your layout structure
Using media query breakpoints
Adjusting the navigation
Improving the testimonial section
Wrapping up the project

Conclusion

Next steps