YUI Grid CSS

A few tips for beginners (like me).

When I started to build this blog I dreaded the layout design. Luckily, Yahoo and a few others had me covered. Three of the more popular CSS frameworks are:

In the end I chose YUI Grids due to the extensive online tutuorials and time saving Grid Builder utility. The Grid Builder allows you to graphically create a custom layout, and then outputs the exact HTML markup needed to create that layout using YUI Grids.

One important note omitted from all of the tutorials I read is that you should not add your own CSS styles to the existing YUI Grids selectors and classes. Create your own nested grids, selectors, and classes instead.

Good: 

// CSS
div#content {
    margin: 1em;
    padding:0 1em;
    font-size:14px;
}

// HTML
<div class="yui-b"><div class="yui-g">
    <div id="content">
        <!-- YOUR DATA GOES HERE -->
    </div>
</div>
Bad: 
// CSS
div#yui-g {
    margin: 1em;
    padding:0 1em;
    font-size:14px;
}

// HTML
<div class="yui-b"><div class="yui-g">
    <!-- YOUR DATA GOES HERE -->
</div>

Comments

Paper writing (09 Feb 2010)

Great tips!

Add your comment

No HTML. Line breaks and URLs will automatically be converted.

(private)