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.