Posted on Leave a comment

Crash Course: YUI Grids CSS

The Yahoo User Interface Library is a rather extensive set of JavaScript tools for developers. Often left unnoticed are a few other useful components of the library that will speed up your coding: some CSS libraries. Today, I’d like to give you a tour of the YUI Grids CSS library.

Why?

Why should you even consider using the YUI Grids CSS library (hereafter referred to a “YUI grids”)? What makes it stand out? I haven’t looked extensively at other grids libraries, but I find these things compelling:

  • YUI grids uses easy-to-remember ids and classes, and clean markup; once you learn it, you could come back to your code in a month and know which parts are from YUI and what each piece does.

  • This reduces your load twice: no need to host the file on your server, as well as faster page loading if the client has the file cached.

  • Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureau’s ad guidelines.

  • With multiple templates and the ability to nest page regions, Yahoo claims to offer over 1000 layout combination . . . all in less than 5kb.

Of course, YUI grids isn’t perfect. It’s a bit limiting when it comes to the pre-baked sidebar widths; however, if they suits your needs, you’ll save plenty of time, coding, and headaches when laying out your site.

Complete Guide: HERE

My Notes:

I think this is the most useful article that I have ever read regarding how to use YUI CSS Grids for my website templates. This is why I am also posting this as a separate page on this blog, as this is the core issue I am promoting in this blog, i.e., implementing YUI CSS Grids in my wordpress themes.

 

Leave a Reply

Your email address will not be published. Required fields are marked *