Forums

Hi,

I find YUI2 grids very limited. There are simple layouts which can't be done with this system. Especially the lack for nested grids support (due to IE6 bugs of course you couldn't do it better in this approach), but there are great grids systems around, even nearer than you might thought. One of your colleagues from Yahoo, Nicole Sullivanm, did OOCSS which provides simple yet powerful way to do grids. The main advantages are that it is powerful and is working in IE6 and all others

I'm not considering whole objectiveness of CSS thin a good idea (it is misconception in my opinion), but the naming of things isn't the most important thing here. Main idea in OOCSS seems to be providing small cross-browser set of features and merging them by class property of elements. So we have e.g.:

.w974 {
background:#FFFFFF none repeat scroll 0 0;
margin:auto;
width:974px;
}
.col {
border-right:1px dashed #999999;
bottom:0;
float:left
}
.third {width:33.3333%;}

And few others, and then simple:

<div class="container w974 inner body">
<div class="col third">
<div class="col third">
<div class="col last">
</div>

Makes three columns inside the block of 974px width. The drawback here is that it is like we are going back to times when all was done by element attributes, but I think it is still the best way to create complex layouts in CSS. This code is capable of division of any block to columns, making columns fixed size etc. Check out my main page of my site at http://www.optimizeyourcode.com/. I couldn't do it in YUI2 grids. My ripoff of OOCSS Grids is at http://oyc.fstatic.eu/css/grids.css. If anyone is considering this approach "making new language", please look at Node:). I'm glad that you guys at Yahoo aren't afraid of making things differently and better than that we are used to deal with (yeah... DOM...). This can also be done in CSS case!

Going further, I think that there should be two class of blocks in YUI CSS, one is layout block and the other is widget block. Widget is the same as YUI3 widget idea, layout in the other hand is something without content but with only positioning, size etc. In other words anything with content should be widget. This pattern allows you even to provide several approaches to grids, so everyone can use most appropriate to them. One of grid system, mentioned above, is mix of column and static grids, another is YUI2 style grids (with behavior determined by parent node class), and there is also room for designers for doing their own layouts from scratch.

Please tell me what do you think about this idea.

Regards and happy new year,
Adrian Kalbarczyk

They are nestable but only once a type. There are two types, first is "yui-t" and second is "yui-g". You can nest later in first, but e.g. can't do it in the other way. Also you can't nest yui-g in another yui-g because both will inherit look from oldest ancestor. It's because IE6 don't know what means ">" in selectors and can't deal with selectors such as .a.b (<div class="a b"> is matched only by "b", "a" is omitted). I need to divide block to n parts of the same width and then each of these parts to another parts and so on. I need to have clean environment in every block. It means that it shouldn't inherit properties from ancestors etc.

YUI2 grids are great but are useless in complex layouts especially when you use typographic grids, either static or column.

It's better to read and watch about OOCSS at http://wiki.github.com/stubbornella/oocss. There are also videos of Nicole Sullivanm's lectures somewhere in YUI Theater. Check it out, because she described this problem along with solution there.

Adrian