Question

I’m trying to figure out how to use the lessframework for building a 2 – 3 column grid, but how to get started?

In the CSS code it says:

13-column layout
60 px columns, 24 px gutters, 72 px margins, 1212 px total (extra space for scrollbars)

On http://lessframework.com/ it says 8 cols for older browsers and 13 for desktops… so do I add the column grid inside the @media only screen and (min-width: 1212px) media query (or add it to a different css file).

I’ve tried to find some examples but haven’t found anything valuable yet.

UPDATE:

After having read the answer from David Oliver I will try to answer question:

• 320: 1 col
• 480: 1 col
• 768: 2 col
• 1280: 3 col

I hope this answers the question.

Answer 1

From my look at the framework, I believe the idea would be to insert your own column CSS based on the numbers provided in the CSS comments into the relevant media queried sections of the CSS file. Unlike some other CSS column frameworks, you don’t apply predefined class names to divs, but, rather, insert your own selectors into the starting CSS file as necessary.

However, as mentioned, this approach doesn’t work for mobile devices that aren’t capable of dealing with media queries as the default assumes a viewport width of 768px or greater. I believe this approach is better: Rethinking the Mobile Web. Also see Notes on designing for mobile phones (even if they’re not made by Apple)

So you could do something like:

// Stylesheet to set base styles for all browsers - mobile-friendly:
<link rel="stylesheet" type="text/css" href="css/base.css" />

// Stylesheet to set additional styles including background images not suitable for mobiles and the multi-column layout for browsers being used at viewports of 700px (allows for scrollbar at within 768) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="only all and (min-device-width: 700px)" />  

// Stylesheet to set multi-column layout for browsers being used at viewports of 1200px (allows for scrollbar at within 1280) and wider:
<link rel="stylesheet" type="text/css" href="css/desktop-wide.css" media="only all and (min-device-width: 1200px)" />

In base.css you wouldn’t define columns and leave everything to flow naturally.

In desktop.css, for the three areas of content you could have something like:

div#wrapper { width: 94%; margin: 0 auto; }
div#nav { width: 30%; float: left; }
div#content { width: 70%; float: left; }
div#extra { clear: both; }

In desktop-wide.css, you could have something like:

div#nav { width: 20%; }
div#content { width: 60%; }
div#extra { width: 20%; clear: none; float: left; }

These percentages aren’t necessarily realistic as you’d have padding or margins, but hopefully they show the idea.

I plan to write up a comprehensive method at my wiki sometime soon, in case you wish to check back later.