Responsive Design using Sass

Note: this is an archived site. The current site can be found at

The revolution of mobile devices has produced as a result an increase on web traffic from mobile devices in numbers we’ve never seen before. Unfortunately so has increased the demand for websites that not only look great but work well in mobile devices.

In a world where technology has advanced so much and there is no shortage of tools to build websites, how do you pick the right tools and techniques to produce website that are mobile friendly? The answer for the past few years has been very simple; Responsive Web Design or RWD. With RWD you can build highly scalable, robust and flexible websites that adapt to any screen size. This is possible through the use of media queries, a CSS3 property that allows a device’s browser to examine the screen size of that device and then serve a set of CSS styles that have been written to optimize the user experience on that device.
The RWD technique is changing rapidly and it can be overwhelming trying to keep up with the changes. Sass and Compass are great tools that allow us to tap into advanced techniques without having to reinvent the wheel.

Sass offers tons of advantages over plain CSS and in this session we will go over some of those advantages. Then we will dive into building dynamic responsive sub theme using the Aurora base theme.

Come join us to see how powerful Singularity GS, Breakpoint Sass and Compass can be when working together for building sophisticated, yet flexible sub themes that adapt to any screen or device size.

We will discuss the following topics

  • Responsive Web Design
  • Mobile First
  • Sass
  • Compass
  • Singularity Grid System
  • Breakpoint
  • Omega Base Theme
  • We will be suing Drush

Some knowledge of CSS is required to be able to follow along. By the end of this session you will have a solid understanding of creating a multi-column, mobile-first responsive sub-theme that looks and works great in any device regardless of its size.

Code and Development
One hour