Subscribe: iKnowKung(Foo).Blog(); - YUI
Added By: Feedage Forager Feedage Grade B rated
Language: English
application blog  blog  blogcfc  css file  css files  css  file  grids css  grids  layout  site  version  work  yui grids  yui 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: iKnowKung(Foo).Blog(); - YUI

iKnowKung(Foo).Blog(); - YUI

Adrian J. Moreno on ColdFusion, jQuery, HTML5, Web & Mobile Application Architecture

Published: Fri, 19 Jan 2018 17:30:41 -0600

Last Build Date: Sun, 01 Jul 2007 19:00:00 -0600


Put YUI money where YUI mouth is

Sun, 01 Jul 2007 19:00:00 -0600

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

Coldfusion, BlogCFC and YUI

Tue, 05 Jun 2007 15:00:00 -0600

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: Now update DIV IDs and orders. Original layout #htmlEditFormat("blogTitle"))# BlogCFC was created by Raymond Camden. This blog is running version YUI layout #htmlEditFormat("blogTitle"))# BlogCFC was created by Raymond Camden. This blog is running version Let's take a look at the base layout we now have. 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? Original YUI