Less Framework is a cross-device CSS grid system based on using inline media queries.
The core idea is to first create a default layout normally, and then additional layouts using inline media queries. Any browsers incompatible with media queries will simply ignore the additional layouts, and will only use the default one. The additional layouts will inherit any styles given to the default layout, so coding them is a breeze.
All four of the layouts included in Less Framework share a common column-width and gutter-width, which makes it easy to design them consistently. Also included are two sets of typography presets composed around a baseline grid of 24 px.
The Four Layouts
3 columns
For all iPhones, iPod Touches, and other 320 px mobiles.
5 columns
For 480 px mobiles, narrow browsers, and landscape iPhones.
8 columns
For tablets at 768 px, netbooks, and old browsers.
13 columns
For laptops, desktops, and HDTVs at 1280 px and beyond.
The Philosophy
.grid_6
.first
The numbers of columns in each layout: 3, 5, 8 and 13 are parts of the Fibonacci sequence. This means the layouts are easy to divide by the golden ratio (1.62), making it simple to create harmonious designs. Also, elements created for one layout are often reuseable in the other ones, making it easier to keep them all consistent. For example, an element 3 columns wide will be:
- 100% wide in the 3-column layout,
- 62% wide (100/1.62) in the 5-column layout,
- 38% wide (100/1.622) in the 8-column layout,
- and 23.5% wide (100/1.623) in the 13-column layout.
The typography presets are also based on the golden ratio, but tweaked to fit into the 24 px baseline grid, further improving consistency.
I have not included a 960 px layout by default; however, you can add a 984 px layout by using 11 columns and 42 px margins.
I believe everyone writes CSS differently, so I’ve tried to make Less Framework as simple as possible. There are no predefined classes, pre-compilers, or other wizardry; just a simple idea and a bunch of grids. I don’t want to try to change how anyone works. In fact, I encourage people to take Less Framework apart and build their own tools out of it.
Browser Support
Android ☑
IE6* ☑
Less Framework uses standards-based CSS3 media queries, so it works beautifully in Firefox, Chrome, Safari, Opera, Internet Explorer 9, Android phones, and all iOS devices (that’s all iPhones, iPads, and iPod Touches).
* Desktop browsers with no support for media queries – this includes Internet Explorer 6–8 – will only use the 768 px layout, which in most cases is more than adequate for desktop usage. However, if you really need old browsers to use the other layouts, you can use something like css3-mediaqueries-js.
Getting Started
To get going, just customize and copy the code below. The dimensions for each grid are noted down in CSS comments. There are no predefined column-classes. Solid knowledge of HTML and CSS is recommended.
For more help, check out these resources:
- Responsive Web Design with HTML5 and the Less Framework 3, a tutorial at the Sitepoint blog by Louis Simoneau.
- Less Guides, a set of Photoshop and Fireworks templates for the Less Framework 3 grids, by Ari Palo.
- Illustrator templates for Less Framework 3, by Gabriel Naranjo.
- Less Framework 3 plugin for Compass, by William Wells.
- Less Grid, a grid overlay script for Less Framework 3, by @RnowM.
- Less+, a modified version of Less Framework 3 with extended browser support via Javascript, by @angrycreative.
- Whiteboard, a Wordpress framework that utilizes Less Framework, by Bold Perspective.
Less Framework is licensed under a Creative Commons Attribution License, which means you are free to use and modify it. But if you do, I’d appreciate a link back to this site, or an attribution comment in your main CSS file.