Coldfusion, BlogCFC and YUI

My company recently launched a new version of our site. The original CSS layout has some issues and YUI Grids saved the day in no time flat. Using Ray Camden’s BlogCFC, this is an example of how quickly you can change your site’s layout with YUI Grids.

What is YUI Grids?

From the Yahoo UI website:

_The foundational YUI Grids CSS file offers three preset page widths, seven core templates, and the ability to nest subdivided regions of one to four columns. All told, the file offers almost 200 preset layouts and an unlimited number of custom permutations that work across all A-grade browsers, all for less than 2.5kb of minimized file weight._

My company recently released a new version of our site. Not only did we overhaul the entire site using Object Oriented Programming with Coldfusion, we implemented a CSS based layout. We went through more than a few versions of our CSS files as the project evolved.

Just as we had ironed out most of the cross-browser issues between Firefox and MSIE 6, users began automatically updating to MSIE 7 and things got worse.

We were a week away from a Production launch. We needed a solution and we needed it fast.

That’s when I found YUI Grids.

Get the files

Start with the default installtion of Ray Camden’s BlogCFC. This example is using version 5.8.001.

Next, download the latest version of YUI. Place the /yui/build/ folder in the root of your blog installation. You probably shouldn’t put the /docs or /examples folders on a production site.

The basic 2 column layout

The first file we’re going to alter is /tags/layout.cfm

/tags/layout.cfm

Add the YUI Grids CSS file:

<link rel="stylesheet" href="#application.rooturl#/yui/build/grids/grids-min.css" type="text/css" />
<link rel="stylesheet" href="#application.rooturl#/includes/layout.css" type="text/css" />
<link rel="stylesheet" href="#application.rooturl#/includes/style.css" type="text/css" />

Now update DIV IDs and orders.

Original layout

<div id="page">
  <div id="banner"><a href="#application.rootURL#">#htmlEditFormat(application.blog.getProperty("blogTitle"))#</a></div>
  <div id="content">

    <div id="blogText">
</cfoutput>
<cfelse>
<cfoutput>
    </div>
  </div>
  <div id="menu">
    </cfoutput>

    <cfinclude template="getpods.cfm">

    <cfoutput>
    </div>
<div class="footerHeader"> <a href="http://ray.camdenfamily.com/projects/blogcfc">BlogCFC</a> was created by <a href="http://ray.camdenfamily.com/">Raymond Camden</a>. This blog is running version #application.blog.getVersion()#. </div>
  </div>

YUI layout

<div id="doc" class="yui-t4">
  <div id="hd"><a href="#application.rootURL#">#htmlEditFormat(application.blog.getProperty("blogTitle"))#</a></div>
  <div id="bd">
    <div id="yui-main">
      <div class="yui-b">
        <div class="yui-g">
</cfoutput>
<cfelse>
<cfoutput>
        </div>
      </div>
    </div>
    <div class="yui-b">
      <cfinclude template="getpods.cfm">
    </div>
  </div>
  <div id="ft"> <a href="http://ray.camdenfamily.com/projects/blogcfc">BlogCFC</a> was created by <a href="http://ray.camdenfamily.com/">Raymond Camden</a>. This blog is running version #application.blog.getVersion()#. </div>
</div>

Let’s take a look at the base layout we now have.

<div id="doc" class="yui-t1">
  <div id="hd"><!--- HEADER ---></div>
  <div id="bd"><!--- BODY --->
    <div id="yui-main"><!--- PRIMARY CONTAINER --->
      <div class="yui-b">
        <div class="yui-g">
        <!--- CONTENT --->
        </div>
      </div>
    </div>
    <div class="yui-b"><!--- MENU ---></div>
  </div>
  <div id="ft"><!--- FOOTER ---></div>
</div>

There’s a header, a body and a footer. The body has a container for content and a container for a menu. That’s pretty much all we need. Short and sweet.

So what changed?

The only “big” change was that the side menu DIV was moved inside of the body DIV (id="bd), placed after the main DIV (id="yui-main).

In the CSS files (layout.css and styles.css), you’ll have to replace any reference to the original IDs with the YUI IDs. For instance:

/includes/layout.css

/*
#page{
  width:90%;
  min-width: 800px;
  margin: 0 auto 0 auto;
  padding: 0 0 10px 0;
}
*/
#doc{
  width:90%;
  min-width: 800px;
  margin: 0 auto 0 auto;
  padding: 0 0 10px 0;
}

Some styles may no longer be used. I’ll elaborate on that later.

Scratch that, reverse it

With just those few lines of code, we now have the default BlogCFC layout in YUI Grids: left-hand content, right-hand menu.

What if we want to swap them? Place the menu on the left and the content on the right? Take a guess at how much code we have to change?

/tags/layout.cfm

<!--- Right-hand menu --->
<div id="doc" class="yui-t4">

<!--- Left-hand menu --->
<div id="doc" class="yui-t1">

One class name! How cool is that?

By changing the value of the ID and CLASS in the root DIV, you can implement static or liquid pages, content and navigation menus. By altering the DIV attributes in the main content DIV (id=”yui-main”) you can add multiple columns of various widths to your layout. Check out the cheatsheet and the YUI Grids Builder on the YUI site for more.

Optimizing the CSS files

Grids.css takes care of many cross-browser issues by managing margins and padding. Notice when I added the YUI Grids CSS file, I used grids-min.css instead of grids.css. The “-min” file is optimized to reduce whitespace.

Open up the default layout.css file and you’ll see just a few lines of CSS. It’s very good and works well cross-browser, but with grids.css, most of it isn’t needed anymore. I’ve reduced this file down to the following:

/includes/layout.css

/* Layout */
#doc.yui-t1 #yui-main { padding-right: 8px; }
#doc.yui-t4 #yui-main { padding-left: 8px; }

These just pad the main content area away from the edge of the display area depending on which side they’re occupying.

There are only a few changes I felt were needed in the default styles.css file:

1. The grids.css file sets the default text alignment to “center”. Why, I have no idea, but it will mess up your debug output. It gets set back to “left”.
2. I set the default font-size to 1em to override the default (smaller) pixel size.
3. Any definitions specific to the original DIV ID values have to be updated the YUI ID values as stated earlier.

/includes/styles.css

/*
body {
  background-color: #c0c0c0;
}
#page{
  background-color: #FFF;
}
#banner, #banner a {
  font-family: "Trebuchet MS", verdana,arial, sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  color: white;
  background-color: #FFCC00;
  padding:5px;
}
*/
body { background-color: #c0c0c0; font-size: 1em; text-align: left; }
#doc{ background-color: #FFF; }
#hd, #hd a {
  font-family: "Trebuchet MS", verdana,arial, sans-serif;
  font-size: 1.4em;
  font-weight: bold;
  color: white;
  background-color: #FFCC00;
  padding:5px;
}

The final change I made to the default styles.css file is to bump up the text in the main content area. Maybe it’s because my screen resolution is 1600x1200, but 0.7em has always seemed very hard to read.

/includes/styles.css

.body {
  font-family: "Trebuchet MS", verdana, arial, sans-serif;
  /* font-size: .7em; */
  font-size: .8em;
  color: #000000;
  margin-left: 0px;
}

The Return on Investment (ROI)

Working with YUI Grids for 45 minutes, I had the new Unitrin Specialty site’s layout templates converted. Along with that, we implemented an entirely new design. Afterwards, it was a matter of tweaking the application-specific CSS files.

We put the new design into QA, then into Beta and the users loved it.

Had we started with YUI Grids, we could have saved ourselves a lot of time and headaches.

The future of Coldfusion and YUI

One unexpected benefit is that many of the new Ajax features in Coldfusion 8 implement YUI. I’ll update a list of examples as I find them. If you want to try them out for yourself, download the Coldfusion 8 Beta now.

• Ben Forta has a series of Coldfusion 8 Ajax tutorials.
• Nathan Mische has an example of how to add context menus to the new AJAX version ColdFuison 8’s cftree.