Advanced Sass and Compass for RWD

By Four Kitchens

Responsive Web Design is on everyone's mind at the moment, and for good reason. With more mobile device activations per day than human births and full internet browsers coming to television sets and gaming consoles (both home and portable), the old techniques we have used to create pixel perfect sites for desktop audiences have already become a thing of the past. This session will explore some of the tools and techniques available today to build responsive sites with a focus on the CSS preprocessor, Sass, and the Sass framework Compass. These tools can ease much of the hard work related to creating truly awesome responsive websites. This workshop will be hands-on so everyone can become familiar with the tools we're using. 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. We are going to jump right into coding with very little introduction and will be taught at an intermediate to advanced level. The tools and examples we'll use to provide training are all 100% open source. They will be available for download after the workshop.

Course Objectives

To spread the word about the wonderful ecosystem of tools available to users of Sass and Compass. To improve attendees' development workflow by demonstrating techniques discovered and developed while working on real client work. Pre-requisites:

Hardware

A computer that can be set up to run the Ruby programming language. Sass requires Ruby. We STRONGLY suggest using a Mac with OS X, as ruby is available by default on the system. Software

  • A plain-text editor or coding IDE. For this course WYSIWYG editing is impossible, not just discouraged
  • Familiarity with basic command line usage (cd, ls, mkdir).
  • An FTP/SFTP program and/or the ability to use SSH.
  • Ruby
  • Node.js

Skills

  • The ability to use FTP/SFTP/SSH to connect and develop on a remote server.
  • Fundamental knowledge of RWD techniques is required. This session will not go over the basics of media queries, conditional CSS, or other beginning topics of RWD.
  • Knowledge of Drupal 7 theming, including using subthemes.

Agenda

Our full-day training will cover the following topics:

  • How to use Sass / Compass to compile your CSS
  • How to create content-first grid systems unique to our designs
  • How to author mobile-first, em-based media queries using a simple, human-readable workflow
  • How to set up an Aurora subtheme using Yeoman
  • How to combine feature detection and Sass, making progressive enhancement a breeze
  • How to set up responsive images and other fluid media
  • Tools to speed up your development workflow in Drupal

Target Audience

Web designers and developers who wish to increase their existing Sass skill set. People who want more control over their designs than is afforded by your existing theme solution.

Note: You must register for the camp and be logged into your account in order to register for this event.

Platinum Sponsors

Gold Sponsors