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:
Good naming conventions
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.
Free file hosting
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.
Compatibility with common ad sizes
Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureau’s ad guidelines.
Many layout options
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.
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.
As I am a lazy person and I think blogging is first and foremost about content and availability, I wanted to re-use as much as possible the good stuff other people have done and then tweak it a bit to fit my needs.
Voilå! YUI autogrid minimal, a WordPress theme based heavily on YUI’s Grids CSS and Base CSS with a few changes to fit the HTML that WordPress creates for you.
Sancta Simplicitas is a WordPress theme that uses YUI CSS utilities: reset, base, fonts, grids. It’s very minimalistic in a sense that it’s pretty much all white and simple. Hence the name. The theme is probably not usable by itself, but it’s a base on top of which you can create your own themes.
When creating a new WordPress theme, people usually take the default Kubrick theme but I personally find Kubrick too much. So Sancta Simplicitas has a very minimal stylesheet and is based on the WordPress classic theme.
The fact that it uses YUI grids makes it trivial to tweak: fixed size vs full width, width of the sidebar, position of the sidebar. Basically right after the there’s this:
<div id=”doc3″ class=”yui-t5″>
Changing the id doc3 to doc, doc2, doc4 or doc5 will give you different widths of the content. The default doc3 is full width. Then changing the class name yui-t5 will give you different position and width of the sidebar. yui-t1, yui-t2 and yui-t3 put the sidebar on the left hand side, yui-t4, yui-t5 and yui-t6 place it to the right. You can go even crazier from here, nesting grids to get a two-column sidebar and so on, it’s really easy with YUI grids and the docs are here.
Download Sancta Simplicitas