Put YUI money where YUI mouth is

My last post about BlogCFC and YUI garnered a very telling comment: “Very nice work!! Now take the time to do some whitespace management on the rest of the site… :)”. Well here’s why I had that problem to begin with and how I fixed it.

The problem with zero

When I first launched my blog, I had only been working with YUI a short while. I used the reset-fonts-grids.css file as a base, but I didn’t realize what work would be ahead of me. The reset css file “normalizes the default rendering of all HTML elements, for example it sets margin, padding, and border to 0, font sizes to YUI Font’s default, italic and bold styles to normal, and list-style to none.”

I did some work for the site’s main layout, as well as the main layout of blogCFC. However, I neglected to go into many of the included files or into blogCFC’s css files. Once I started writing and people started commenting, I saw the problems with resetting everything to zero.

Firebug to the rescue

As I had time, I used Firebug to locate which DIVs or other elements needed padding. I’d then rename an ID or add one and create a definition in my site’s css file. It didn’t dawn on me until later that upgrading to the next version of blogCFC would be a pain if I wanted to keep the same layout and styles.

If you haven’t used Firebug, it’s an excellent plugin for Firefox that allows extensive javascript and css debugging. Check out the site or the Google Group for more information. There’s even an extenstion called ColdFire that places the Coldfusion debugging output into the same pane that Firebug uses.

Ok, so grids.css to the rescue

I wrote that last article not only as a howto, but so I could start over with my site’s layout and be able to more easily upgrade blogCFC as needed.

I’m currently using grids-min.css as the base CSS file. This file doesn’t zero out everything, so there’s less involved in styling the site and blog like I want. I even had a 3 column layout online for a while, but I backed it down to 2 columns until I have time to work out a few more things.

This isn’t to say you shouldn’t use reset-fonts-grids.css. We solved a lot a problems on the new Unitrin Specialty site with it. A lot of work was done to retrofitthe many application specific css files that had been created before we implemented YUI, but most of that work was removing css instead of adding more.

Now that I’ve got my layout problems addressed, I can get back to the Mach-II and OO posts.