¿Cómo utilizar eficazmente la cuadrícula sin marco?

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 probablemente the best one for me is the frameless grid

The author says it's 'the spiritual successor to Menos marco':

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?

:)

preguntado el 08 de noviembre de 11 a las 10:11

5 Respuestas

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. El @cols vars. I think that basically, they son 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 columnas 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

Espero que esto ayude a alguien más.

Respondido el 22 de diciembre de 12 a las 12:12

Thanks, the documentation on the site is lacking. Your answer for no2 explains it well :) - RichW

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

¡Espero que sea útil!

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:

Sí, la @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;
}

Respondido 10 Abr '13, 02:04

¡Bienvenido a Stackoverflow! En general, nos gustan las respuestas en el sitio para que puedan valerse por sí mismas: los enlaces son geniales, pero si ese enlace alguna vez se rompe, la respuesta debería tener suficiente información para seguir siendo útil. Considere editar su respuesta para incluir más detalles. Ver el Preguntas Frecuentes para más información. - slm

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 sin victorias 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.

Prefiero el sin marco. setup a little more than the Menos marco, 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.

¡Que se diviertan!

Respondido el 12 de enero de 12 a las 04:01

I already use less, I already checked the code, I already done 2 sites with the less framework. That's the reason I already answered my question. - Luca Reghellin

thank you! I didn't even think to check the repo for the uncompiled css. It helps a lot to see the values before it's compiled. - ifightcrime

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.

Respondido 24 Feb 12, 09:02

I agree, thank you. One will end up using frameless as a starting point and yes, properly used, at least in certain situations, can be a way to change all dimensions at once with just a master var. One should really use it in 1 or 2 projects to fully understand the possibilities. By the way, in the end, I'm partially using it, but also I see other frameworks coming out.. :) So, maybe next month we'll be speaking of some other framework.. :) - Luca Reghellin

Además de hacer 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.

¿Cómo leer este MENOS CSS?

contestado el 23 de mayo de 17 a las 15:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.