oocss

This Framework is mix of my Malo CSS Framework(2008) http://code.google.com/p/malo/ & https://github.com/stubbornella/oocss/blob/master/core/grid/... naming system is used. I'm to blame about display:inline in Malo that is actually wrong it should be *display:inline or even better _display:inline to resolve the double margin problem in IE6.

"Am I the only one that doesn't understand everyone's obsession with CSS grids" I saw a great talk by Nicole Sullivan on CSS last week. She said that many sites lack a meaningful high-level abstraction for their visual layout, and end up with a tangled mess of float, padding & margin declarations on every element. This complexity, she said, is more clearly and concisely handled at a higher, site-wide level and suggested using a grid. I've wasted an insane amount of time pushing one element four pixels this way and another element three pixels that way, so I'm definitely eager to try a grid on my next project. Links to her slides (with some other great info) and her grid framework: http://www.slideshare.net/stubbornella/our-best-practices-ar... https://github.com/stubbornella/oocss/blob/master/core/grid/...

This still suffers from the rounding error seen here [http://i.imgur.com/DXjVN.png]. Otherwise, yup... it's a grid. Looks like they're setting the grid elements to display:inline... which seems weird and unnecessary to me? Block elements don't belong inside inline elements. I hate to keep posting this, but I've been unable to find fault with this grid [https://github.com/stubbornella/oocss/blob/master/core/grid/...] code. .lastUnit spans the pixel gap on the rightmost, nestable, extendable, fluid widths. The two are mostly the same idea, but I think the OOCSS project implements it better and works with more browsers.

On the blog... "If you have some .class { width:25% } that will make 4 columns grid (25% + 25% +25% + 25%). The problem is that you can't have precision px margins (gutter). So in the past you had nested divs or .something-like-this{width:24%; margin-left:1%}..." "With calc() that problem is solved now we can have .class{width:calc(25%-10px); margin-left:10px} . And with that we can have the flexibility of the % and the px precision." This was never a problem if you separated your layout markup from your content markup, like so. <div style="float:left;width:50%"> <div style="margin:12px">Hello, world</div> </div> <div style="float:left;width:50%"> <div style="margin:12px">Hello, world</div> </div> Bear in mind that calc() has terrible support [http://caniuse.com/#search=calc]. Box-sizing fixes the problems

Float has no say on the matter with regards to width. I use an extremely simple 14 line grid system that uses % widths, is nestable, and works in every browser I test it against. Not surprisingly this "system" (this word really makes it sound more than it is) can be found on one of the CSS Lint creator's Github: https://github.com/stubbornella/oocss/blob/master/core/grid/... While simple, it's definitely way more elegant than some of the grid systems I've seen built, such as the popular 960 fluid grid layout that ultimately generated nearly 800 lines of CSS for 5 columns. It also goes hand in hand with the core principles of OOCSS, which essentially states to extend classes and use multiple classes per element.