Advanced Sass and Compass for RWD
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.
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.
- An FTP/SFTP program and/or the ability to use SSH.
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.
- Fundamental knowledge of Sass and Compass will greatly benefit attendees. We will cover basics for context.
- Knowledge of Drupal 7 theming, including using subthemes.
Our full-day training will cover the following topics:
- 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 set up responsive images and other fluid media
- Tools to speed up your development workflow in Drupal
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.
Sam Richard works as Sr. Front End Developer at NBCUniversal. Chris Ruppel and Ian Carrico are Frontend and Backend developers at Four Kitchens respectively. All are well-known in the Drupal community as both RWD and Sass experts, having trained and spoken at numerous events around the world, including Portland, 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, the Drupal 8 HTML5/Mobile initiatives, and the Drupal.org D7 upgrade.