Ok, lets back track a little here. What is a framework? Wikipedia defines a framework as “a basic conceptual structure used to solve a complex issue.” More specifically a software frame work “is a re-usable design for a software system (or subsystem). A software framework may include support programs, code libraries, a scripting language, or other software to help develop and glue together the different components of a software project. Various parts of the framework may be exposed through an API.”

If you have ever done any programming or contracted programmers you are probably used to this terminology linked to different programming languages like Ruby‘s Ruby on Rails, PHP’s CakePHP or Python’s Django. Basically frameworks provide programmers with sensible defaults, break down complex solutions into manageable components that aid in collaborative work as well as debugging and future changes. To break it down, programmers get together after working on projects and figure out what they have in common, what is the most logical way to organize it and what things need to be included in the majority of the projects. They collect those components, organize them and test them. The framework is then released for other programmers to start projects with as a base. In theory it should aid a programmer in not doing repetitive work over and over again and cut down ramp up time. It also aids in bringing programmers up to speed who come into existing projects as if you are familiar with the framework you know where everything is located in the program.

So what does this have to do with web design? Well HTML and CSS and any markup languages can benefit from a framework just like scripting or compiled languages. Good frameworks aren’t randomly created. A lot of thought, time, effort and testing goes into making a good framework. Frameworks are broken down into elements and each element is typically created/manged by a expert in that field. Mature frameworks have been battle tested in the field on other projects by potentially thousands of people. They follow standards and effort has been placed to make them work on a wide variety of environments and configurations.This means you aren’t starting your project at square one, you are probably closer to square 3 or 4. You are leveraging the time and effort of lots of people versus the power of one.

Perspectives

Customer: You are hiring someone to do web design work for you. In theory while it would be nice if you either never had to do changes to the work ever again OR your contractor is always available from now till when the project ends, life doesn’t always work that way. By using a framework for your project you have made it easier if in the future you have to hire another contractor to work on the project. Most likely the framework will be documented and you can use that reference documentation to get your new programmer up to speed. The benefitst of starting with a frame work are if understood and used correctly, a framework should easily enable your project to follow standards and accessibility guidelines (a MUST for any web design project), cut down in debugging time as you are starting from a tested base and cut down in repetitive work as the majority of the foundation is already there. While frameworks aren’t always applicable to all jobs, you will definitely want to talk to your web designer/developer before you begin work about if a framework will work for you and if so which one they will be using.

Web Designer/Developer: A good framework will let you spend more time on the design/bells/whistles (what makes it unique) of the site then the foundation (pretty much the same on every site). Files are placed in default locations as well as broken down to deal with things like IE hacks and print stylesheets. The structure of a page may already have template for fluid and fixed width, tested across all common browser platforms. Think of it like you are building a car with the frame and engine already put together. You are there to paint it up, pimp out the interior and you don’t have to worry about “are all the tires on correctly?”.

Student/Noob: Maybe you are looking to learn web design or are looking to move away from a WYSIWYG editor. Using a framework is a great tool to see how professionals do it. Most frameworks have a community of professional designers associated with it that so you can subscribe to their group/forum/blog and learn about why they did things the way they did and even contribute to the framework’s future versions. If you aren’t a CSS expert you can rely on the fact that the framework is probably right and use that as a guide to start from.

So where do I get these frameworks? Good question. There are a couple of well known ones available now, and each has their own strengths and weaknesses. Read the feature list of each and decide which fits your goals and requirements for your project. I have a tendency to stick with frameworks that have a couple of revisions under their belt or a large following in the community as that usually a sign that there will be activity and upgrades, however a framework is like religion or politics, different ones work for different people/projects.

The Frameworks

• BluePrintCSS – on revision .05 (5 versions so far). They have a Google group with about 300 members and daily activity, deals with layout, resets and typography.
• CSS Tindebox – concentrating on out of the box templates for CSS, working with fixes and fluid designs.
• ESWAT – a framework not only for CSS, but an entire web project framework. Good for learning about reasonable defaults.
• Yahoo!’s Grid CSS -A component of the YUI (Yahoo! User Interface) library.
• YAML – Not to be confused with YAML, a German framework with a builder component.
• A CSS Framework – an older framework concentrating on structure.

If you want to learn more about the technical details of web frameworks I suggest you check out this great article from A List Apart.

Update: Smashing Magazine also put out a great article about frameworks a couple days after I posted this.