More or less a framework.

A CSS framework for cross-device layouts

Everyone writes CSS differently. Less Framework takes this into account by having a minimal set of features, and does away with things like predefined classes. All it really contains are:

• a set of media-queries
• typography presets aligned to a 24 px baseline grid
• and a grid, with its column sizes noted down within CSS comments.

Nothing more, nothing less. It doesn’t try to do anything for you, and doesn’t change the way you work.

No more 960 px

Less Framework uses inline CSS3 media-queries to switch between three layouts:

• a two-column layout at 320 px, for smartphones
• a five-column layout at 768 px, for iPads and netbooks
• and an eight-column layout at 1280 px, for desktops and laptops.

The five-column layout is not inside a media-query block, which means the other two layouts inherit styles from it. You simply write the five-column layout first, then use the media-queries for the other two layouts to overwrite styles from it, like so:

body {width: 696px;}
				
@media only screen and (max-width: 767px) {
	body {width: 264px;}
}

@media only screen and (min-width: 1224px) {
	body {width: 1128px;}
}

All three layouts essentially use the same grid. They all have the same column width (120 px), the same gutters (24 px), and the same vertical rhythm (24 px). The only things that change are the amount of columns and the margins around the layout. This means you're not designing three different layouts, but rather three variations of one layout.

No hacks, unless you want them

Less Framework works beautifully in Firefox, Chrome, Safari, Opera, IE9 (hopefully), Android phones, and all iOS devices (that's all iPhones, iPads, and iPod Touches). It even behaves nicely in landscape mode.

* Browsers that don't support media-queries, like IE8 and below, simply ignore everything inside inline media-queries. This means they'll use the default five-column layout – which is more than sufficient for desktop usage – and ignore everything else.

However, if you'd like IE to support the other layouts as well, you can use something like css3-mediaqueries-js.

Getting started

First of all, note that Less Framework is free. It is licensed under a Creative Commons Attribution License, which means it's free to use for commercial and noncommercial sites. However, I would appreciate a link back to this site, either somewhere on your site or inside a comment at the top of your main stylesheet.

Now, simply customize and copy-paste the code below, check out the comments in the CSS, and you'll figure it out in no time.