Responsive Design with Sass+Compass

Click to watch "Responsive Design with Sass+Compass"

Mobile matters. There are more than 4x the number mobile devices activated each day than there 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 width grid but rather one that expands and contracts depending on how much screen real estate is available to the current user. 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 responsive design, including Susy for fluid grids, Breakpoint and Respond-To to name and manage media queries, and RWD Kickstart to get you up and running from scratch with best practices quickly as quickly as possible.

Drupal 7 also provides us with some capability to greatly reduce the development costs for our mobile-first development, including some great projects including HTML5 Project for clean, semantic HTML5 markup, the Borealis Suite for semantic blocks and mobile-first responsive images, and Drupal 7's awesome new AJAX system to assist in lazy loading content, reducing download size and speed.

Experience level: 
Time slot: 
Tuesday 15:45-16:45
(Sheraton Hotel) Cuvillies


I just wanted to propose a session about SASS/Compass when I noticed that you are already going to talk about this. Please be so kind to demonstrate the possibility to create image sprites with Compass, 'cause this is really awesome ;)

That could certainly be covered as it's part of best practices.

Responsive design was covered at Denver but it is a fast moving area. Snugug has considerable expertise in this area and I have enjoyed debating with him over the ether. This session would be a valuable inclusion to the conference.

Sam's presentation is an absolute must for frontend developers, Drupal or not. As one of the leaders in this space, Sam's work on Sass, Compass, and Susy is a must-see for any person wanting to build responsive sites.

Can't wait

Also looking forward to this, Sam!

I have been hearing great things about Susy, but not yet how to incorporate it into a Drupal theme. Does it mesh with Zen 5? I hope you can cover options for this!

This is not something I will be going over in my talk. This talk is more focused on how to use Sass to superpower your RWD. Still important, still want to see you there. For more specific questions, I'm holding three back-to-back BoFs Wednesday afternoon on Sass+Compass+RWD and can talk more in-depth about Drupal integration at one of those, or hold another BoF Thursday for the subject.
I'm also planning on doing some Drupal+Sass+RWD office hours type thing during Sprints, and I invite anyone who has specific questions to stop by then as well.

Yeah, just take it a little bit further and we're theming for the whole ecossystem at once. Take a look at, it is still in D6, but meant to make porting stuff really easy.