Dustin Larimer

The success of the USAA mobile site served as model for another initiative that I tried to push while at USAA: a lightweight and portable layout framework.  While similar to Yahoo! YUI Grids, or the thousand other frameworks out there, my layout framework is based on the simple concept that form should reflect semantic structure.  Regardless of how your content is designed, the most basic purpose of semantic HTML is to demonstrate relationships and hierarchy between content objects, and the most obvious, basic way to demonstrate this is by dividing space.  When you take the presentation layer away, you should still be able to derive the importance, and relationship between, the various elements that comprise your web page.

Most of the pages on usaa.com, and on most web sites for that matter, divide space into 2, 3 or 4 columns: 1/2 to 1/2, 1/3 to 2/3, 1/3 to 1/3 to 1/3, 1/4 to 3/4.  In most cases, however, 4-column spaces are really 1/3 to 2/3 with subsequent divisions within the 2/3 section.  My layout framework uses a repeatable parent/child nesting model, along with an “A, B and C” naming convention to make logical, semantic divisions within the content.  Here’s an example:

<div class=“col_abc”>
      <div class=“abc-a”>1/3 Column</div>
      <div class=“abc-bc”>2/3 Column</div>
</div>

A class prefix of “col_” denotes a parent and completes with “ab” or “abc”, and child objects copy the “ab or “abc” with an additional “-” followed by the relative units that the child object will occupy.

Pattern-friendly

An additional class can be added to skin the object with a specific theme.  Using a scalable and pattern-friendly “version” class helps maintain standards as designers pick up the framework and want it to be skinned as a “version 1” module or “version 8” module.

A few last CSS tricks

Since these columns will most likely be floated apart from each other, just add “min-height: 0” to the parent class definition to invoke “hasLayout” and clear floats in IE, then add a second definition with the

:after{clear: both; content: "."; display: block; overflow: auto; visibility: hidden;}

pseudo-class to clear floats everywhere else.  The rest of the CSS should be custom tailored to fit YOUR needs.  Your are the designer, not Yahoo!  This model simply ensures maximum reusability and portability of your markup.

Enjoy!