Search code examples
cssyuiyui-grids

Is YUI grids.css really that flexible?


Yahoo's YUI project has some really great, well tested components that I'm just beginining to integrate to my (fixed width) site. I'm actually very excited - I've been away from consumer oriented site creation for a while and I'm having a lot of fun seeing what has developed in the last few years.

Liking YUI component and reset.css so much - I assumed that my use of Yahoo YUI grids.css was a no brainer. In fact they say sell it pretty well themselves :

"Combining Page Widths, Template Presets, and Nesting Grids, a nearly infinite number of complex page layouts are possible"

(from grids.css link above)

However I'm tryin to do some really simple 3 column layouts and cant seem to do some basic things - nor find good explanations in the documentation of how to do them.

For instance:

  • Can i change the gutter between columns?
  • Nesting the 1/2, 2/3, 1/4 type layouts within each other is very easy, but can i nest the yui-t1 templates?
    • (I did get limited sucess nesting yui-t1 selectors but ended up with multiple divs having the same id which led me to believe i was doing something wrong.

My site is a lot more 'design driven' - thats to say theres a photoshop markup which needs to be made into a page.

My impression so far is that YUI Grid is suited for more 'content driven' sites where you've got content like news that doesn't necessarily have to fit into an exact design. Is that a fair statement - or am I missing some magic trick to use grids.css?

Am I better suited using an alternative grid with fixed positioning?


Alternatives to YUI - as provided in another stackoverflow post


Solution

  • You can change the gutter by overriding the margin attribute. You can do this across the board by overriding a selector like .yui-gb { }, etc or whichever layouts you are using. If you just want to do one specific set of columns you can add another class and use that, just make sure you have more specificity than the YUI rules (or make the same and your rule is lower in the CSS files).

    I don't think the templates are nestable as they were designed to be a quickie throw up thing to do a whole page.

    The way grids was created was specifically to cater for the sizes of page we get which are regimented by our own UED guidelines and our Ad formats. There is nothing to stop you using the framework as a basic and overriding the exact widths/gutters, etc.

    Disclaimer: I work for Y!