CODEWITHSUNDEEP
css
kristian nissen
kristian nissen

Reputation: 2907

lessframework column grid

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:

I hope this answers the question.

Upvotes: 3

Views: 601

Answers (2)

David Oliver
David Oliver

Reputation: 2502

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.

Upvotes: 3

David Oliver
David Oliver

Reputation: 2502

When you say "a 2-3 column grid", for which kind of devices do you mean? I recommend you first get clear in mind which size of devices should have columns and how many of them. Maybe the CSS will make more sense to you then?

Additionally, I recommend taking a different approach to the one that framework uses:

First, set up a single-column, basic stylesheet that doesn't rely on minimum width media queries. This is to give mobile users (including those whose devices don't do media queries) a mobile-friendly experience without cumbersome horizontal scrolling. This is the advantage of this approach over the one you've referenced.

Then, add a stylesheet with a media query specifying a minimum viewport width of something like 500px. This is to add in column layout and other styling (such as background images) which is suitable only for desktop browsers.

This is a very brief overview and other things such as getting Internet Explorer to use the media queries (Javascript required?) and making sure those devices which don't support media queries do not load background images from the minimum viewport width stylesheet will need additional refinement. I'm in the process of writing up my preferred method and can post more info when it's done, or maybe when I can get back to my desktop machine.

Upvotes: 0

Related Questions