7

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

6 Answers 6

8

This answer has been provided by Nate Koechley at YUI forum - YUI Senior Engineer, YUI Team

I recommend that people do not directly touch the nodes that are the grid skeleton. You are welcome to, of course, but as you noticed it can impact their stability and behavior.

And

I think it is best to leave Grids' nodes as the untouched skeleton, and put your content markup within that structure. It's s bit of extra markup, yes, but I think of it as encapsulation because your content can then move freely and safely independent of the grid.

I hope it can be useful to somebody that wants to use YUI grid

UPDATE

Suppose here goes some yui- grid markup

<div class="yui-g">
    <div class="yui-u first"></div>
    <div class="yui-u"></div>
</div>

And you want to add some extra margin. As said by Nate, add some extra markup

<div class="yui-g">
    <div class="yui-u first">
        <div class="specialCss">
            your content goes here
        </div>
    </div>
    <div class="yui-u">

    </div>
</div>

And define its margin, padding etc...

.specialCss {
    margin:10px;
}

This way you do not impact YUI CSS grid stability and behavior

2
  • what does she mean by 'touching the nodes' in this context? are they talking applying css classes to the nodes or something else Jun 29, 2010 at 15:25
  • @Simon_Weaver He has been clear: do not directly touch the nodes (Yes, do not Touch YUI grids CSS classes) Otherwise it can impact their stability and behavior His advice is: put your content markup within that structure. See update Jun 29, 2010 at 15:46
6

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!

2
  • thanks! its a great framework - i just wish Y! hadn't said 'nearly infinite number of complex page layouts' - which turns out to be a little misleading IMHO. i also cant seem to get 2 columns working in 960 pixels width (even using the formula). it is off by 1 pixel in IE Jan 26, 2009 at 21:00
  • the style i used to adjust the margin for yui-gc was : .yui-gc .yui-u { margin-left:0px; width:34%; } Feb 1, 2009 at 11:04
1

It sounds like you need to make a lot of customizations to the default settings for YUI Grids, which for me, kind of semi-defeats the point of using it -- or rather, makes it less flexible and thus less effective.

Have you watched the talk given by Nate Koechley yet? From memory I think he does mentions that it's possible to change the gutter between the columns and explains how to make customizations.

http://developer.yahoo.com/yui/grids/

Basically you can dig into the CSS files for grids and identify where the gutter between columns is set and adjust that in your own CSS file.

1

Just wanted to mention that in the new YUI 3 grids, there is a specific example as to how to specify grid spacing.

http://developer.yahoo.com/yui/3/examples/cssgrids/cssgrids-units.html

1
  • thats very cool. maybe i can get rid of my .padding15 class now :-) Sep 14, 2010 at 21:32
0

If you do investigate alternatives to YUI, check out the Blueprint CSS Generator (http://kematzy.com/blueprint-generator/). It's a good quick way to customize your CSS grid (based on Blueprint CSS).

Unfortunately, I do not know if there is a similar tool for YUI or not.

1
  • If you don't know if there is anything for YUI or not how is this helpful?! Just kidding... use blueprint kids.
    – Birk
    Jan 27, 2009 at 18:54
0

YUI 3 grids is powerful. Flexibe, stable and simple. Take a look.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.