Dark Side of the Carton

There is an ongoing debate about the use of CSS Reset stylesheets in web development. (See here, then here, then here) If you aren’t familiar with the concept, the idea is that a CSS Reset attempts to equalize the differences between default browser styles. At first glance this is a great idea right? Who wouldn’t want to start from the same place in the design phase of the project?

Despite the appearance that this question would garner an obvious answer from most people in the industry, both sides of the camp seem to be holding firm in their own collective thoughts. Reset advocates can’t seem to imagine a world without it while detractors seem to think it’s a downright waste of time.

I can see both sides of the arguement. On one hand, starting from the same point with all browsers and not having to worry about specific browser quirks as much is an ideal thing. On the other, I’m used to doing it this way so why should I change?

One issue I have with the Reset technique, and this is something the anti-Reset camp uses as an arguement, is that it can create more work for the developer.  The Reset removes all the default styles so the developer has to go in and re-add styles as needed. While this may be true, isn’t that part of the job? Isn’t building out the stylesheet for a site doing exactly that? I get that wiping the slate clean with a Reset might force you to manually override a few of those things again, but I don’t honestly remember the last time I left something default anyway. Most elements of my pages have enough style applied to them that they are completely different from the default versions of themselves anyways.

The answer, and it was probably said best by Eric Meyer himself, is to each their own. If you want to use a Reset CSS, go right ahead. If you don’t? That’s fine too. The old addage “There is more than one way to skin a cat” rings especially true in the world of web development and using a CSS Reset is merely one avenue a developer can pursue in building out any given site.

Personally, I am going to give the Reset concept a try and see how I like it. I’m very used to building out separate styles for different browsers as it is so I don’t think it will be that much extra work.

If you’ve ever attempted to build a truly clean, cross browser compliant, css based layout then you know that it can take quite a bit of work for everything to come together. One of the tricky parts is getting your horizontal alignment setup.

CSS Framework is almost an oxymoron in that most websites rarely share enough CSS to warrant the overhead or work of building an actual framework. What if the framework did nothing more than handle positioning?

Enter the 960 Grid System.

The 960 Grid System is built on the fact that the number 960 has a high number of divisible whole numbers making it a very suitable width for a column based grid system. Couple this with the fact that most, if not all, of your end users should be capable of displaying a 960px wide site.

The way the grid system works is this. You select either a 12 or 16 column grid system. The 12 column layout has 60px columns and the 16 column layout has 40px columns. Each column has a 10px margin on either side, making a 20px gutter padding between each column.

When you want to make use of the grid system, simply include the CSS files included in the download. Next, you’ll specify a wrapper/container div and with a class name of “container_12″ or “container_16″. This sets up the container to make use of grid units. Finally, begin setting up your divs with class names in the format of “grid_xx” where xx corresponds to 1-16 depending on your container size.

An example is available on the 960.gs website. I’ve included it below:

<div class="container_12">
<div class="grid_7 prefix_1">
<div class="grid_2 alpha">
...</div>
<div class="grid_3">
...</div>
<div class="grid_2 omega">
...</div>
</div>
<div class="grid_3 suffix_1">
...</div>
</div>

With a multitude of site layouts on my horizon, I am definitely going to make use of the 960gs framework and I’ll report back on how well the system worked in streamlining my design and development time.