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 players' like Inuit.css, the semantic grid etc.. and found that probably the best one for me is the frameless grid

The author says it's 'the spiritual successor to Less Framework':

Ok. I've studied a lot all the less/css code and html code of the main framelessgrid.com page (that should implement the frameless grid) but I can't fugure out how really I can implement it.

• First of all, what does he exactly mean by 'frameless'? Simply that it's not a framework? And apart of having free column widths and 'inverted' media queries to be 'mobile first', how does it differs from lessframework?

• How should I exactly use the .less variables (particularly the @cols series)?

• What does 'Adapt column by column, not pixel by pixel.' mean? How should one put this concept in practice?

:)

Answer 1

I'm finally using the frameless grid, so I want to answer my own questions:

1. Don't know :P I mean, that name, don't know. It doesn't matter, though.. (I also invited the frameless grid author to answer here, but he didn't.)

2. The @cols vars. I think that basically, they are the frameless grid. Well, they're not, since the frameless grid is 'only' an idea. But in practice, well, it's the main css difference against 'standard' approach. You simply define the width of elements in columns instead of pixels. That's all. This, of course, can be done only using Less or Sass. Since I didn't know less and scss, I couldn't fully undestand the main idea. You'll end up saying that an element is 8 columns wide, another 5 columns wide, etc.. Much more simple than calculating pixels.

3. See answer 2 :P

Hope this will help someone else.

Answer 2

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;
}