Question

I’m very new to YUI. And I used this tool to generate some css grid layouts. But even though I get the code, when rendered in browser I can’t able to see the borders at all. But others(like alignment, the number of columns..) are correct.

How do I add border to the YUI generated code?

Thanks in advance

Answer 1

You can add a border to YUI2 grids by adding styles to the yui-u class

.yui-u {
  border: 1px solid black;
}

However, borders don’t play very nice with YUI2 grids because it relies on percentage based widths for columns, so you’ll have to insert another div inside each unit and add a border to that div:

<style>.yui-u-inner { border: 1px solid black; }</style>

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

There may be more elegant solutions.

You should consider moving to YUI3. YUI2 is only on maintenance mode and there is no new development besides basic bug fixing. YUI3 is quite active and in particular its CSS grids are a lot simpler to use.