Let me start by saying that I love CSS frameworks.  From Tripoli to Blueprint, YUI to YAML, I’ve embraced them fully into my design and development process over the past 9 months.  Unfortunately, throughout that time I’ve had to deal with a nagging issue: The Semantic Web.

CSS exists to shed the shackles of inline formatting and truly separate content from display.  While It’s rarely possible to achieve all of a project goals in a semantic way, CSS frameworks really fly in the face of a semantic approach. Don’t get me wrong, I still think CSS is the way to go and that frameworks provide powerful scaffolding, but I think we all need to be aware that using CSS grid & layout frameworks isn’t exactly a true separation of content & styling.

Take for example, blueprint.  Blueprint contains a powerful set of tools for building a layout.  Unfortunately, these tools require that columns be explicitly defined in the page source <div class=”column span-2″>.  This makes it impossible for a change in stylesheet to completely alter a page layout for mobile devices without discarding the column & span classes and relying on an independent set of markup e.g. <div class=”column span-2 mobile-column mobile-span-5″>.  This is a rather cumbersome noose to have to carry for some projects.  Especially when the infrastructure isn’t in place to deliver two distinct versions of the site from the server.

I’m wondering how you have addressed these problems in past projects?

Think of it as Visual Risk Management. 
As AJAX developers, we regularly place control over swaths of the DOM in the hands of our users and outside of our web designers control.  Sure, we can restrict the users capabilities, clean up word html, run things through validators, & provide all the styles needed, but these fixes require us to anticipate problems before they happen.

Using CSS frameworks, takes a lot of the risk out of the situation.  A CSS framework removes the risk of a user accidentally calling on a structure that hasn’t been anticipated or that isn’t properly styled by our existing stylesheets.   CSS frameworks take the guessing work out of the situation.  By reseting and frequently standardizing all possible html elements.  A CSS framework ensures that your markup behaves appropriately across browsers and user inputs.  It doesn’t matter what framework you use either.  In fact, a corporation’s professionally built CSS templates likely include all of the resets & standardizations needed.

If you don’t trust your stylesheets or are building one from scratch. I recommend you investigate the following frameworks.

• YAML
• Blueprint
• YUI CSS
• Tripoli
• Eric Meyer’s Reset CSS
  

Inspired by Dav Glas’ Grids Builder for YUI CSS. The YAML builder has been released.

Some unique features include:

• Style Editing
• Drag & Drop Page Elements

YAML is a robust CSS framework offered under both Creative Commons & Commercial licenses.

For more information visit yaml.de
Take the new builder for a spin at builder.yaml.de