LinuxFest Northwest 2013

Bellingham, WA April 27th & 28th

Platinum Sponsors

Responsive Web Design with Sass+Compass (CANCELLED)

Snugug's picture

Mobile matters. There are more than 4x the number mobile devices activated each day than there are babies born and the question of how to effectively deliver your content to everyone, regardless of how they get there, should be the most important question for product owners and developers today. Enter responsive design.

Responsive design comes from the idea that there is not a mobile web and a desktop web but instead a single, unified web. The most obvious new design paradigm to come from this new thinking are websites that are not built on a fixed system but rather one that expands, contracts, and adapts depending upon how the user chooses to access your site. To be able to do this, however, you want a powerful set of tools at your disposal in order to aid in you in the large amount of work needed to build a responsive design. Enter Sass+Compass

Sass 3.2 introduces a number of new features designed specifically to aid in responsive design including the ability to modularize your media queries and call them on-demand or to write media queries based on calculations in your Sass files. Compass v0.12 improves upon Compass's already impecable mixin and function libraries with a large update to Compass's Image Sprite functionality, a traditionally hard technique made drop-dead easy and essential to the Mobile First Responsive Design philosophy that should be taken when designing websites.

Compass also allows us to tap into all a community of extensions to make your lives easier, including some that are specifically designed to help us with the hard parts of Responsive Web Design. There is Susy for semantic, responsive, custom fluid grids, Breakpoint and Respond-to for managing of your media queries, and Toolkit to provide responsive design, progressive enhancement, and design in browser tools plus helpers to get you up and running with a responsive web design stack quickly.

This session will start with a brief overview of Responsive Web Design best practices as well as dos and don'ts, moving then into the specific tools (all of which are F/OSS) mentioned above and how to use them. Some cursory knowledge of Sass and Compass and their syntaxes is good to have, as I will be skipping over the basics. This talk will be a true Intermediate talk and will make some assumptions about baseline knowledge of front-end development techniques.

Experience level: 




Session Time Slot(s): 

Saturday, April 27, 2013 - 13:30 to 14:50