Advanced Responsive Web Design with Sass + Compass

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. We will explore:

  • How to set up Sass, Compass, and the other tools used in the workshop
  • 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 Compass
  • How to combine feature detection and Sass, making progressive enhancement a breeze
  • How to use the Modernizr module to manage your site's HTML5 dependencies
  • How to use these tools to provide frontend performance fixes

This workshop will be very hands-on so everyone can become very familiar with the tools we're using. You should 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 code examples we'll use to provide training is all open source. They will be available for download after the workshop.

Course Prerequisites

Hardware

  • A computer that can be set up to run the Ruby programming language. Sass requires Ruby.

Software

  • A plain-text editor or coding IDE. For this course WYSIWYG editing is impossible, not just discouraged.
  • Ruby. Installation will be covered in the training.
  • An FTP/SFTP program and/or the ability to use SSH
  • No PHP or LAMP environment will be required, but can be used if the attendee wishes.

Skills

  • 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.

Target Audience

The target audience includes intermediate/advanced themers and frontend developers. This session will assume that you have built responsive websites before and are looking for a more refined workflow.

Meet the Trainers

Sam Richard works as Sr. Front End Developer at NBCUniversal. Chris Ruppel and Ian Carrico are Frontend and Backend developers at Four Kitchens respectively. They are well-known in the Drupal community as both RWD and Sass experts, having trained and spoken at numerous events around the world, including Denver, New York, Austin, San Francisco, and Munich, Germany.

None are strangers to community contribution either: Sam and Ian maintain the Aurora base theme and contribute to many RWD-related Compass extensions such as Toolkit, Singularity, and Breakpoint. Chris maintains the Modernizr module, and has contributed to Modernizr proper, Drupal 8, and the Drupal.org D7 upgrade.

Course Information

Experience Level: Advanced
Drupal Version: Drupal 7.x
Company: Four Kitchens
Instructors: Sam Richard (Snugug), Chris Ruppel (rupl), and Ian Carrico (ChinggizKhan)

Schedule info
Status: 
Accepted
Time Slot: 
Monday, May 20 - 09:00am-06:00pm