farsaid's sandbox: Less Framework

This is an HTML5 CSS3 starter theme for Drupal.
The recipe is based on two different main ingredients:

1. Boron - being it a solid HTML5 base theme for Drupal 7.
2. Less Framework - a CSS framework with 4 different layouts, adaptable to different screen sizes, using media queries.

At least basic knowledge of HTML and CSS is recommended for using this theme.

Initially it was made as a case study to better understand how drupal theming works and the steps involved in the process of merging a CSS framework into Drupal HTML structure.
To achieve this, we are taking advantage of Drupal theme overriding capabilities and using just a few PHP lines to customize it a little. It's very simple.

Installation

Follow these steps:

1. Install Boron first if you didn't already and enable it.
2. Install the Less Framework theme (this theme) into the "/sites/all/themes" folder of your Drupal website.
3. Go to the official Less Framework website and follow the instructions for "Getting Started"
   • Customize and copy Less Framework CSS code (MIT licensed, that's why it's not included directly into the theme package). HTML code is not needed as we are going to use Boron's one in this theme.
   • Paste that CSS code into your "/sites/all/themes/less_framework/css/lf4.css" file.
4. Enable the Less Framework theme and start building your new design by editing files inside the "/sites/all/themes/less_framework/css/" directory.

Usage

This theme is meant to be used as a simple framework, a starting point for creating more complex themes without starting from scratch everytime.

It has not much styling, except enough CSS to arrange the page for "Header, Sidebars, Content, and Footer" elements in the default (10 columns) layout and to rearrange it for 8, 5 and 3 columns layouts. All this with Responsive Web Design and the Golden Ratio in mind, showing the grid in the background.

It uses mostly Boron's default HTML5 markup.

You should also consider installing these modules:
Elements
HTML5 Tools

More info

Less Framework is a CSS grid system using Media Queries for
Responsive Web Design.

Basically it contains 4 different CSS layouts and a set of presets, all based on a single grid, composed of 68px columns with 24px gutters. What changes from layout to layout, is the amount of columns, the text size, and the width of the outer margins.

As the official Less Framework Website says:

The idea is to first code the Default Layout (992px), and then use CSS3 media queries to code several child layouts: 768, 480, and 320 px. The Default Layout will be served to any browsers that do not support media queries, whereas the child layouts will be served, as appropriate, to browsers that do. They will also inherit all styles given to the Default Layout, so coding them is very fast.

To break it down, recent versions of Firefox, Chrome, Safari, Opera, Nokia Webkit, WebOS, Blackberry OS, as well as Internet Explorer 9, Android Webkit, and Mobile Safari (all iPhones, iPads and iPod Touches) will use the layout most appropriate to them. Internet Explorer 6–8 and most old mobile devices will only use the Default Layout.

The goal of Less Framework is to make building websites with multiple 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 required, the common baseline grid and type presets will make the element fit in.

Other useful links to check:
Hardboiled CSS3 Media Queries
Beyond Responsive Web Design
A fix for iPhone viewport scale bug
Responsive Images
1140 CSS Grid
JQuery Masonry
Media Queries CSS Tricks
Elastic CSS Framework
The Man in Blue - Resolution dependent layout