Training material for Advanced RWD with Sass+Compass.
Clone or download
Pull request Compare This branch is 121 commits ahead, 1 commit behind fourkitchens:gh-pages.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Responsive, Mobile-First Development with Sass and Compass (All Day)

Responsive Web Design is on everyone's mind at the moment, and for good reason. The old techniques we have used to create pixel perfect sites for desktop audiences have already become a thing of the past as mobile usage accelerates. This session will explore the latest tools, techniques, and best practices of frontend development for responsive design, including Sass (a CSS preprocessor), Compass (a Sass framwork), and Singularity (a new kind of grid system which offers incredible flexibility). These tools can ease much of the hard work related to building truly awesome responsive websites.

In this course we will learn to:

  • Change the "visual order" of content at different media queries without changing the "source order" using Singularity.
  • Write content-focused grid systems which can use different layouts at different media queries using Singularity.
  • Write Media Queries easily and efficiently using Breakpoint to focus on the needs of the content, including automatic output of CSS-only fallbacks for legacy browsers which don't support media queries.
  • Synchronize Ruby Gem versions across teams within projects to avoid code conflicts and output problems using Bundler.
  • Look at best practices and convenience tips for a mobile-first development workflow.

We will also review:

  • The basics of Sass, a CSS preprocessor to write CSS more efficiently.
  • Usage of Compass, a Sass Framework, which contains many convenience features, including mixins for CSS3 vendor prefixes and selector generation functions.

This workshop will be hands-on to familiarize everyone with these tools. We are going to jump right into coding. It would be best to have some pre-existing knowledge of Sass and Compass going into this workshop as well as a working knowledge of Responsive Web Design.

The tools, examples, samples, and slides used for this training are all 100% open source and will be shared throughout the course.

Made with love by @tsmith512, @patrickocoffeyo as well as @Snugug, @rupl, and @iamcarrico.