Features

I have a basic concept for web design that I've been talking about for years and this is it's first initiation into the public. "The House Metaphor".

We (as designers) use all kinds of geeky technobabble when describing web design back to clients or people who just don't care about specifics. The House Metaphor, equates web design to building a house. It is a home page, right? It's also a flexible framework, using grids (gridworks?) to setup a basic structure.

I usually have four css files: grids, frames, blocks, global.

grids.css : the basic structure of the site. I setup a master class, basically a reset class that removes all margins and padding and can define floats. Then, I usually design for one unit, say 250px. Two units are 500px, half-units are 50% of the # one unit.. "one-minus" units can be one unit (250px) minus 25% or 50%, whatever you identify as your units. "two-plus" units are similar...they're site dependent. A site could have a half-unit. These are setup as classes: one, one-minus, two, two-plus, etc. Everything in the grids.css file should be a class, since they're reused throughout the pages and are not unique.

frames.css: specific id's that hold the grids classes. I usually split everything up in quatrants...an area for your masthead and navigation, an area for content, and an area for a footer. With this concept, it can enlist three or four frames. The frames are setup to center the grids.....

Let me digress here for a second.....after using css-based layouts for over 5 years, I really see grids as a throw-back to the table-based layouts we all scorned. We're replacing tr's and td's for divs and classes. Not saying that's a bad thing, mind you, but just showing that not everything is as it seems

blocks.css: classes that style divs, based on it's use. A div including a search form, doesn't need it's classes going into the content divs just like the navigation classes do not need their classes in the footer divs.

global.css: Styles for standard html tags. Also used as a "browser reset". Here I style out the main fonts for the site, how the body margins look, how H1-H6 tags work, how links look...etc.

So how do these four css files relate back to building a house?

grids = blueprints
frames = framing of a house
blocks = rooms, paint colors, interior design, landscaping
global = electrical, water, cable

This is an agnostic view of web design that works without a specific operating system, design platform, browser or code-view in mind. It's not perfect and it's not original, because many many people use grids to design sites and for graphic design in general. But this is a way to get a real-world relationship back to what we do for a living.