Its minimal grid CSS framework. What should be in it?

Pretending that I don’t know about holivars around css-frameworks and hatred of bicycles, I’ll share my thoughts (“One more understood everything” © Leprozori) about the need and usability of the subject.

There are a lot of them and they have their own ideology, and, for example, 960gs , Blueprint , YUI grids are the most known and tested on my own skin.

Blueprint with 960gs consider that our whole life is a grid, styles for the width of a column should be called according to the number of occupied minimum widths of columns. Out of the box, the first one believes that there are 24 columns (it has some kind of script generator that allows changing the standard number and width); the second states that there can be 12 or 16 columns; this should be reported in the container class. There are a few nuances, but in general they are similar. If you take the design and impose, trying to do with a blueprint alone - it is better not to.

YUI grids allows you to have a header, basement, main column and sidebar (s) in a document. That is, it contains such concepts in its classes. And here you also have layouts fixed and rubber, and different configurations of location. To make the grid more difficult - you can put layouts in each other.
')
Unfortunately, the average designs for some reason do not fit into the grids (or fit, but with some nuances of their own), or layouts, unless you specifically draw under the framework. Ideally, during layout, I managed to use a maximum of 20% of the framework's capabilities (well, reset, auxiliary classes like ".clear" / ". Error" / ". Success",). Standard framework typography is no good (you need at least to supplement), although it looks pretty on demos.

Only once I had to see a design document, where all typography was painted in detail: colors, fonts, sizes, line-height; and did not have to wave the ruler in Photoshop.

Life forced us to prepare a set of class-tools for simplifying and speeding up the layout, and more precisely for drawing a grid, and something else. More often it is necessary that the columns / blocks in the design have some proportions (33/33/33, 70/30, etc.), rather than a fixed size, the elements need to be “cleared”, hidden, orchestrated the text and align them yourself.

So, here it is:

.clear { clear:both; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

.left { float:left; }
.right { float:right; }
.hidden { display:none; }

.column { float: left; }
.col-25 { width: 25%; }
.col-50 { width: 50%; }
.col-30 { width: 30%; }
.col-33 { width: 33.3%; }
.col-66 { width: 66.6%; }
.col-70 { width: 70%; }
.col-75 { width: 75%; }
.col-100 { width: 100%; }

.tleft { text-align: left; }
.tright { text-align: right; }


or pastie.org/816484

Yes, nothing complicated at all (it seems to me), I copied half of the code from Blueprint. I usually call such an economy util.css, connect it and use it everywhere, sometimes taking help reset.css. Always come in handy.

This code departs from the ideology of semantic layout, in which I was so passionately in love at the dawn of a make-up career, came by-life and “the main thing to work”.