What is Less Framework?

Less Framework is a CSS framework for building flexible multi-column website layouts. It contains a ten column grid optimized for a line-height of 24px, as well as a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm.

Less Framework layouts work perfectly in Chrome, Safari 3.0+, Firefox 3.0+, Opera 10+ and Internet Explorer 7+. They intelligently collapse into a single column in legacy browsers and on small screen devices, such as mobile phones. Caution! Currently not 100% sure how LF behaves on the iPad.

The best example of Less Framework in use is this very site. Try resizing your browser window or accessing this site with different devices, like your mobile phone.

Setting up Less Framework

The included single.css, multi.css, html5.js files are required for Less Framework to function. The following lines must be added to inside the head element:

<link rel="stylesheet" href="/assets/single.css" media="all"/>
<![if !IE]><link rel="stylesheet" href="/assets/multi.css" media="screen and (min-device-width: 750px)" class="multi"/><![endif]>
<!--[if gt IE 6]><link rel="stylesheet" href="/assets/multi.css" media="screen" class="multi"/><![endif]-->
<!--[if IE]><script src="/assets/html5.js"></script><![endif]-->

The first line enables the basic single-column layout and the typography presets for all browsers.

The second line serves the multi-column layout for all modern browsers, except IE. The highlighted min-device-width value is the threshold below which the multi-column layout won't activate.

The third line enables the multi-column layout for Internet Explorer 7 and higher. Unfortunetaly IE does not support min-device-width, so it will use the multi-column layout on screens of all sizes. IE6 is excluded and uses the single-column layout.

Finally, the fourth line contains the HTML5 enabling script by Remy Sharp, which enables the new HTML5 elements for all versions of IE.

Optional layout switcher

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script src="/assets/switcher.js"></script>

This is a tiny script that mimics the function of min-device-width for browsers that do not support it. It also switches to the appropriate layout when the browser window is resized and the min-device-width threshold is crossed. To use it, add the lines above below the stylesheet declarations. The script requires jQuery, which, in the example, is linked from Google's AJAX API Hosting.

Using Less Framework

After completing all of the above, everything should be set up. Continue reading below to learn about the two ways of utilizing Less Framework.

Prototyping

<article id="about">
	<header class="two first">
		<h1>…</h1>
	</header>
	<figure class="one">
		<img src="…" alt="…"/>
	</figure>
	<section class="four off-one">
		<p>…</p>
	</section>
</article>

Testing different layout combinations is a breeze with Less Framework. Widths can be specified with the column classes: one, two, three, four, five, etc. The first class must be added to any element that begins a new row.

The offset classes: off-one, off-two, off-three, etc. can be used to create gaps between columns. When using one of these at the beginning of a row, the first class is not needed.

To encourage the adaptation of the new HTML5 elements, all elements with a column class are assumed to be inside a header, article, aside or footer element. This can be changed near the top of multi.css.

Production

.four, #about section {
	width: 456px; display: block; float: left; margin-left: 24px;
}
.two, #about header {
	width: 216px; display: block; float: left; margin-left: 24px;
}
.one, #about figure {
	width: 96px;  display: block; float: left; margin-left: 24px;
}
.first, #about header {
	margin-left: 0;	clear: left;
}

Although layouts created with the Prototyping method are 100% functional in the real world, using them on live websites is not recommended; adding all the required class declarations into HTML causes file sizes to grow and bandwidth to be wasted. Instead, declarations should be made from the CSS files directly, like in the example above. The typography presets included in single.css should also be used this way.

Less Framework