Responsive design with Less Framework 4.0 and Drupal

What’s the deal with responsive design?

What is Responsove Design?
Responsive design is a technique for coding web pages that was first described by Ethan Marcotte in his by now ”legendary” article on a list Apart.
 A simple way to put is was worded by Jeffrey Zeldman: ”It’s what some of us were going for with “liquid” web design back in the 1990s, only it doesn’t suck.”

The new ”thing” about Responsive Design in the context of Less Framework and other similar techniques is the use of CSS3 media queries. These allow you to address different view ports with different CSS-code.

The use of CSS3 media queries means (as per usual), that IE is not included in the bliss. However that’s not a gigantic problem because IE still get’s served the ”normal” default page.

Why use Less?
Less was created by coder Joni Korp and is a grid system without the actual use of grid classes. You can, if you like, use the template grid, which is based on the golden ratio, or not. Assigning widths to page elements is done manually, so what the framework really does is only to help you set up the media queries and give you a template to follow or deviate from, depending on what you feel like or what your project needs.
 
The Less Framework web site is in itself a great show case for what the framework does. You can adjust the width of your browser to see a neat demonstration of how the framework works.

Quote from the less framework site:
The goal of Less Framework is to make building websites with mul­tiple layouts efficient, and to make the layouts feel consistent. Since every layout is based on the same grid, elements used in one layout can often be reused in the others without changing them much at all. For example, simply adjusting the width or font-size of an element in one layout is often enough to make it work in another. And even if more changes are re­quired, the common baseline grid and type presets will make the element fit in.
Less Framework is simple. It does not contain any pre­defined column classes, pre-compilers, or other wizardry. The point of it is to let everyone keep writing HTML and CSS as they always have, because everyone does it differently.

To show the technique in pratice, and in particular, try it out with Drupal, I spent a few hours experimenting with a custom Theme named Steppenwolf. I'll be talking about that this evening on the Drupal Meetup in Malmö. To make it easy to try the theme I've actually included the database so that you can have the views and menu settings that I used in the example.

View the slides on
Slidehare: http://www.slideshare.net/leanderlindahl/less-9648259

Play around with the Theme on Drupal.org
Download Steppenwolf example Theme: http://drupal.org/sandbox/leanderlindahl/1306334