The really huge advantage of working with sass is that you can easily split your…work up into multiple files.…Now sass will take care of combining all those files into a single…document for you.…If you take a look at the components folder in the sass folder,…right now we've only got a single style.scss file.…And in there, you can see that we are importing all the different modules that…we need to work on this project.…So I'm already doing the importing of compass right here,…as well as some of the compass plug-ins that we're going to be using.…So compass/reset for example, resets all the styles in a browser, so…that they match as much as possible between different browsers and platforms.…

The box shadows allows you to have some mixins that make creating box shadows…easier, same thing for tech shadows filter and flex box, as well as transitions.…Now, I'm also importing a couple of other libraries.…I'm importing something called Susy which will help us create our grids.…And also the breakpoint library that helps us with media query breakpoints.…

Resume Transcript Auto-Scroll

Author

Released

9/23/2014

Learn how to build dynamic, responsive single-page designs with HTML, JavaScript, and CSS. The website featured in this course combines docking navigation, columns that adjust without cluttering your site layout or HTML markup, and animated scrolling effects that respond to user direction. Author Ray Villalobos shows you how to build it. He starts with a lean, easy-to-read template, and then explains how to add the features that make single-page designs so great, with these four frameworks:

Compass, whose Sass mixins help you leverage CSS3 features like Flexbox

Susy 2, the framework that "subtracts" the math from responsive grid design

ScrollMagic, for adding "magical" scroll effects

Breakpoint, which makes writing media queries in Sass a snap

But this course isn't just about the tools. It's a realistic project that epitomizes many of the design challenges website developers face in the real world. Start watching now and learn how to use HTML, jQuery, and CSS to build your own dynamic, deeply responsive designs.