CSS Framework

There are several possible ways to go about building a CSS framework. The framework I mention here is suited for myself and the group of developers I work with. It has proven successful on the past 3 projects I have been on. Once everyone knows about a base set of styles it's amazing how much more productive the team is. Not only do you have a "master" type of stylesheet to work from, everyone can edit the code and make changes faster because they are aware of the framework in use.

Many UI folks use inline styles just to get a page marked up, or pixel perfect. But this actually hinders productivity and makes the developer almost double their work. We all know that when you're buried in a project and working away getting things done, it is much harder to come back and "fix" things. Some people may enjoy working like that, but as a project lead you constantly have to remind people to go back in and clean up their work and sometimes I end up doing it myself. And, if you are using inline styles, then you go back and fix them, other developers may have already added your style to a stylesheet and you may overlook it and duplicate the same style over and over again.

Bottom line is, use a framework like the example below and life will be much easier ;)

Here are a few examples of usage. This is a very lean and mean framework for managing widths and alignment. I'm not too concerned with zeroing out all of my html elements like p, table, td, ul, etc. That is a given and some sites differ due to legacy issues and crappy css code.

You will find yourself cascading the styles on almost every element. The great thing is that you don't have to double-pane the css file and your xhmtl, you can get things done very fast and done correctly... the first go 'round.

And the code…

.align-center {
text-align: center;
}

.align-center-margin { margin: 0 auto 0 auto; }

.float-left { float: left; }

.float-right { float: right; }

.align-left { text-align: left; }

.align-right { text-align: right; }

.half-width { width: 49%; }

.quarter-width { width: 24.9%; }

.three-quarter-width { width: 74.9%; }

.full-width { width: 100%; }

.third-width { width: 32.9%; }

.two-third-width { width: 65.9%; }

.tenpx-top-bottom { margin: 10px 0 10px 0; }

.clear { clear: both; }