Advanced Sass and Compass for RWD

Course Description

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 content strategy as a method for designing responsive websites, building separate components and layouts, and will emphasize creating DRY code. We will dive deep into the power of Sass and Compass and a handful of JavaScript tools and how they can be utilized for your growing website. 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 is necessary 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 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.

Learning 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.
  • To Utilize the tools necessary to create unique designs that are performant.
  • To employ content strategy as a means of designing a site.

Syllabus

Class begins at 9am, lunch is at 11:45, class ends at 5.

  • How to utilize Breakpoint and Singularity to create strong asymmetrical grids.
  • What content strategy is, and how it effects the design of a site.
  • Building style prototypes.
  • Creating a front end with reusable components across the site.
  • Tools to speed up your development workflow in Drupal

Who will gain the most from this course?

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. Those who already have a basic knowledge of Compass and Sass, and want

Prerequisites for this course

HARDWARE

  • A computer that has Ruby setup and working. Sass requires Ruby. We will also need Git and Node.js.
  • We prefer users have a Mac, or another Unix-based computer, but it is not required

SOFTWARE

  • A plain-text editor or coding IDE. For this course WYSIWYG editing is impossible, not just discouraged.
  • Ruby (at least version 2.0.0-p451), RubyGems, and Bundler
  • Git
  • Node.js with yo, grunt-cli, bower, generator-north, and generator-style-prototype installed globally
  • An FTP/SFTP program and 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, basics such as variables, mixins and extendables will not be covered.
  • Knowledge of Drupal 7 theming

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

Event Information

Date: Monday, June 2
Time: 09:00-05:00
Cost: $475.00 - included breakfast, lunch, and coffee breaks

Course Information
Company: 
Four Kitchens
Trainers: 
iamcarrico
Snugug
rupl
Experience level: 
Advanced
Drupal Version: 
Drupal 7.x