Advanced RWD

Advanced Responsive Web Design Techniques
Thursday, April 10, 2014 - 10:00am to 5:00pm
S-1521

Ruby with Bundler and Node.js with yo, bower, grunt-cli, generator-sketch, and generator-north must be installed and running globally on your computer before the training begins. Installation will not be covered.

This will be taught as an advanced course. 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.

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 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 combine feature detection and Sass, making progressive enhancement a breeze

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 2.0.0p451 programming language. Sass requires Ruby.
  • A computer that can be set up to run Node.js.

Software

  • A plain-text editor or coding IDE. For this course WYSIWYG editing is impossible, not just discouraged.
  • Ruby with the Bundler gem installed. Installation will not be covered in the training.
  • Node.js with yo, bower, grunt-cli, gulp, generator-sketch, and generator-north installed globally. Installation will not be covered in the training.

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.

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.

Session topics: 

Facilitator(s): 

Lead Partners

Partners Spotlight