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 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.


Posted on Leave a comment

YUI CSS Grid WordPress Theme

YUI CSS Grid WordPress Theme
YUI CSS Grid WordPress Theme

YUI CSS Grid WordPress Theme. This is my first WordPress Theme based on YUI CSS Grids. It comes with 8 selectable color schemes, 5 different page widths and 6 combinations of page layout.

Color Schemes:

  • dark blue
  • facebook
  • green
  • greenish
  • orange
  • purple
  • red
  • tan blue

Page Widths:

  • 750px Centered
  • 950px Centered
  • 974px Centered
  • 100% Fluid

Page Layout

  • Left Sidebar, 160px
  • Left Sidebar, 180px
  • Left Sidebar, 300px
  • Right Sidebar, 180px
  • Right Sidebar, 240px
  • Right Sidebar, 300px

Download YUI CSS Grid WordPress Theme.

Customize your theme using the WordPress Dashboard menu Themes > Customize Theme after installing this theme.

Posted on Leave a comment

A YUI Grids-based WordPress Theme — YUI Autogrid Minimal

Original Article at YUI Official Blog By Christian Heilmann, July 2nd, 2008.

Here what Christian Heilmann says:

As I had to upgrade my personal blog to the newest WordPress version (and my old theme had been hacked to death), I chose to start from scratch with a WordPress theme.

[You can download the new theme here.]

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.

To work around the issue of YUI Grids being optimized for a certain resolution, I used the autogrids trick blogged here previously.

This is what this WordPress theme gives you:

  • clean, simple markup
  • a grids layout that changes with the available browser space
  • a fixed right side menu for easy access of the search and pages
  • an hCard in the footer to download to Outlook or Mail
  • Nice, easy-to-read typography without any fancy distractions

What it does not give you (as I hadn’t had time to look into these):

  • Ajax that nobody really needs
  • the new WordPress enhancements like the dynamic sidebar
  • pop-up comments (come on, this is 2008!)

You can see a few messier, older versions of this theme at work on my personal blog and on Scripting Enabled, the event I am organising about accessibility hacking later this year.

Posted on Leave a comment

Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

Sancta Simplicitas
Sancta Simplicitas: minimalistic WordPress theme using YUI CSS

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