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?

I realize that Image maps aren’t the hippest thing right now, but I’ve just got to share this amazing interface for you developed by Stu Nicholls.

There are some cross platform bugs in the framework, but I really think they can be fixed with some well applied javascript.

Find It Online Here:

http://www.cssplay.co.uk/menu/scrollmap 

CSS Play offers an excellent gallery of CSS menu wedgets to use in your next project. All of the menus are licensed under a CC license and based solely on CSS, no javascript.

You can find them at CSS Play 

I’ve begun using a set of visual guides to streamline my blueprint development process.  They are simple png files that I drop into photoshop, illustrator & indesign as layers and then dial down the transparency / set fill color to something visible but not distracting.  I plan on integrating them into the next release of the blueprint layout tool as well.

• Blueprint Layout template with baseline.
• Blueprint Layout Template Without Baseline

I got a bit of work done on version .2 of the Blueprint layout tool.  Some improvements to expect when I release it next week.

• Upgrade to blueprint .6
• prepend & border support
• support for elements other than columns 

Version 0.6 of the Blueprint CSS framework has been released with several dramatic improvements.

• A much more sensible directory structure.
• A new plugin system.
• Lots of functionality extracted into plugins, keeping the core files sweet and nimble.
• New test suite for proper browser compatibility testing.
• We’re back to using em units for all vertical sizing, although with a much better implementation than what we had in 0.4.
• New ruby scripts for compressing and validating the CSS.
• Proper styling of forms.
• Tons and tons of bugfixes.

For more information visit the Blueprint site.

I’ve put together a drag & drop layout builder for the Blueprint CSS framework. It’s still pretty rough around the edges but it is usable for quickly putting together layouts.

http://www.ajaxbestiary.com/Labs/LayoutTool/index.htm

Deep thanks goes to the YUI & Blueprint teams for developing such robust tools & to Dav Glass who created both the inspiration for the toolkit & several solutions needed to put this together.

Please let me know what you think!

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
  

Looking for a css reset that doesn’t leave you with nothing?  Don’t need fancy layout tools?  You should consider Tripoli for your next AJAX app.  Tripoli is a CSS reset that doesn’t leave you with monotonous visual mush.  Instead, Tripoli resets CSS to a standardized presentation consistent across all browsers.  Tripoli lets designer’s start with a clean slate without having to re-invent the wheel.

Tripoli is available at: http://monc.se/tripoli/

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