Put YUI money where YUI mouth is
Posted on July 1, 2007
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.
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.
Adrian J. Moreno
Adrian is an enterprise solution architect and full stack developer. Which stack depends on which system is on fire at the time. More information