How to effectively use the Frameless grid?

Question

I\'m starting building a website good for mobile devices too. So I\'m also starting studying media queries and the various grid frameworks. I\'ve taken a look to all the \'main

Answer 1

For what it's worth I've written a tutorial for the Frameless grid system here:

http://marknugent.tumblr.com/post/47212935858/a-guide-tutorial-to-the-frameless-grid-how-to

Hope it's useful!

Edit: Per the suggestion below that my answer should stand on its own rather than simply containing a link (fair enough!), I'll add the following:

Yes, the @cols vars are indeed the keys to the frameless grid. You use this to size your elements as you would use any other unit of measure.

For example, say you want #firstDiv to take up three columns with #secondDiv, 2 columns in width, to its right:

#firstDiv {
    width: @3cols;
    float: left;
}
#secondDiv {
    width: @2cols;
    margin-left: @gutter/@em;
    float: left;
}

Note that you have to account for the gutter as well.

As you go down the stylesheet, starting with mobile styles, you use @media queries, which will kick in wherever you want them to, to add styles to progressively larger screens, overriding previously-declared values when necessary. With each step you'll add columns to your layout.

There is also a technique you can use at intermediate steps to zoom the whole layout:

body {
    font-size: (@font-size + 1)/16*1em;
}

This code zooms your layout in by something like 6 percent, assuming you've been expressing all of your sizes in the /@em shorthand, e.g. if you express a padding width as 100/@em instead of 100 pixels, it'll zoom along with the rest of your layout using the above technique.

Likewise this code would zoom your layout out one level:

body {
    font-size: (@font-size - 1)/16*1em;
}