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.