What It Is

Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Default Layout

10 columns at 992 px. For desktops, laptops, tablets in landscape orientation, and all old browsers. Can be split according to the Golden Ratio at 6 columns, which is also the optimal width for long-form text.

Tablet Layout

8 columns at 768 px. For iPads and other tablets. Perfect for long-form reading when using centered, 6-column wide text.

Mobile Layout

3 columns at 320 px. For iPhones, iPod Touches, and most other modern mobile devices. Has generous outer margins that let the layout breathe.

Wide Mobile Layout

5 columns at 480 px. For large mobile devices, as well as iPhones and iPod Touches in landscape orientation. Quick to code, since it inherits styles from both the Default Layout and the Mobile Layout.

How It Works

Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

The three sets of typography presets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Both sets contain several harmonious type sizes calculated using the Golden Ratio.

Technically

The idea is to first code the Default Layout (992 px), 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.

If you think of Mobile First as progressive enhancement, Less Framework will feel more like graceful degradation; old desktop and mobile browsers will only use the default 992 px layout. While not being ideal for accessibility, this also means you will not have to IE-proof any of the child layouts, and can freely use modern CSS in them.

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.

Philosophically

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.

Less Framework is simple. It does not contain any predefined column classes, pre-compilers, or other wizardry. The point of it is to let everyone keep writing HTML and CSS as they always have, because everyone does it differently.

Getting Started

Less Framework is licensed under the MIT license. This means you are free to use and modify it in any way you want, as long as you keep the license comment at the top of the CSS intact, or alternatively link back to this site somewhere on your site.

Solid knowledge of HTML and CSS is recommended. Start by getting Less Framework on GitHub. You will find the dimensions for each layout noted down in CSS comments.