How to effectively use the Frameless grid?

问题:

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?

:)

回答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.

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

回答3:

If you're coming at css from a programming side, I highly recommend less. It will really put css into your programming mind in a good way.

One of the issues I've had was the concept of processing your css on each page load (which is probably no worse than processing a javascript framework) or setting up the less compiler to run on your server.

There is a better way. Simply install winless if you're on windows or Less app for OS X. They are simple file watchers that will compile your finished css every time you make a change to your .less files. If you set your project up like this:

/styles /css /less

They will both put your compiled css files in the css directory. Then you can link your html to the css files and not have to worry about compiling on the fly. They both work great with your source control platform as well.

Less only has about a page of documentation, so you can get into it and be proficient in about an hour or so. It's really fun to work with because you pretty much already know the syntax if you know css. Less is a superset of css, so everything you know about css is still valid. The few less syntax additions are really easy to grasp.

I prefer the frameless setup a little more than the Less Framework, but that's a matter of choice.

Also, if you need a little more than the frameless docs give you, make sure you check out the css that's used for the actual site.

Have fun!

回答4:

Been grinding at the framless concept for about a month now and hit the light bulb moment about a week ago...not sure how much was the frameless concept or how much was working with less. But i do know the concept is pretty rock solid so far.

I believe theres no documentation because what he built is a starting point for the developer to branch off on his own path and find the best way to build his less doc and eventually build a framework of their own.

But i started swaping out gutter and column widths with other variabls and dividing them to find a good ratio brttween elements. So in the end there becomes a master var that can change the entire theme with one number change. The posibilitis are endless.

回答5:

In addition to Stratboy's answers above, I'd like to share my question and others answers about the less CSS Joni used for Framelessgrid. I had a hard time understanding less CSS and the SO community really helped.

How to read this LESS css?