This is very similar to a minimal grid system I developed a couple of years back, but I define the fractions on the child elements, rather than the parent, eliminating the need for extra classes. I don't make any assumptions about margins, but you could easily apply border-box and padding to the columns (like Ingrid does). I really like that border-box is picking up support. I find it a much easier way to think about the box model, because I find it applies well to UI development in HTML (especially on mobile devices like iPads).<p>GitHub Project: <a href="https://github.com/colingourlay/frak" rel="nofollow">https://github.com/colingourlay/frak</a><p>Demo: <a href="http://colingourlay.github.com/frak/" rel="nofollow">http://colingourlay.github.com/frak/</a>
Some issues...<p>Even using the grid normally, it ends up using more horizontal space than on the viewport, forcing a horizontal scrollbar (Chrome 18).<p>Another problem: setting max-widths on units. Any proceeding units are handicapped by this and often just leave empty space to the right.<p>I also don't like the presence of three sets of classes when two would be appropriate. "ingrid" as the container, and "span-x" for each column division. And this is unavoidable, as you need to define "in-[parts]" in the container to even use the span-x classes. I understand that it's less work if you stick to equal parts, but this is not the majority use case in my experience.<p>I find the naming scheme awkward. "in-twos" and "in-thirds" instead of "in-halves" or "in-threes". Keep it consistent.<p>---<p>All in all, I wouldn't recommend this to my mother.<p>I use Nicole Sullivan's snippet in her github project,
<a href="https://github.com/stubbornella/oocss/blob/master/core/grid/grids.css" rel="nofollow">https://github.com/stubbornella/oocss/blob/master/core/grid/...</a><p>(demo: <a href="http://oocss.org/grids_docs.html" rel="nofollow">http://oocss.org/grids_docs.html</a>)<p>And it's been damn bullet proof, being used in production code.
I think the .unit class could be done away with if he used .ingrid > * in its place. Of course, that might mean rewriting some of the CSS to account for the change in specificity in that rule.