Thursday, August 30th, 2007

YAML the CSS framework

Category: CSS, Framework, Utility

When I first saw an email from Dirk Jesse about YAML, I was instantly in Ruby mode. Then as I read I realised that he was talking about a totally different YAML, his own CSS framework “Yet Another Multicolumn Layout” (compareble to YUI Grids or blueprint) that is designed
for creating flexible float-based multicolumn css-layouts. YAML is
released under creative commons licence.

Dirk told us:

The framework is focussed on flexible layouts and offers column and/or
grid based design elements for flexible, elastic or fixed layouts. YAML
has grown over two and a half years now. Since YAML wasn’t planned to
become a framework, things grew slowly and only with a german
documentenation. Thats I think, is the main reason, why it is almost
unknown outside Germany. This changed with the arival of YAML v3.0 july’07.

YAML is very flexible, comes with a bilingual documentation (PDF, > 100
pages) and – my lastest baby – a builder, that allows visual configuration of the basic layout elements.

The building is a very nice Ajax app in its own right:

YAML CSS Framework

Posted by Dion Almaer at 1:01 pm

4.3 rating from 42 votes


Comments feed TrackBack URI

in a word… WOW. Impressive work by Mr. Dirk Jesse. Been trying various non-table column layouts for awhile, this is very cool. Also, that builder app is super slick and could be a HUGE timesaver. Phenomenal. [bookmarked!]

Comment by Mark Holton — August 30, 2007

That thing produces enough divs to make 4 websites… Just saying. I guess it works if you simply want to avoid tables without taking the time to understanding CSS layouts.

Comment by Jesse — August 30, 2007

Builders of all kinds always produce waste, its the cost vs doing it by hand. The app itself is crazy cool though.

Comment by Jon Hartmann — August 30, 2007

Awesome project, but is building a decent CSS layout really that hard? Doing it by hand is always the best way.

Comment by David Walsh — August 30, 2007

@David: It is – depending on complexity and skill. Dirk has done great work with this tool. Btw – read his book ;)

Comment by .mario — August 30, 2007

A good piece of work for fast web development prototyping. I like it.


Comment by Alex Hernandez — August 30, 2007

Please forget the name “YAML”. :( A new domain name is not so expensive. :)

Anyway, the application is quite cool as I think. I’m thinking about including something like this into my framework, it would be a nice tool to start a project quickly, even if I know CSS + HTML.

Comment by András Bártházi — August 30, 2007

A brilliant tool for lightning fast prototyping and wireframing. I agree with David above that for final production stuff, it would involve a bit of tweaking, optimizing, etc, or custom build by hand, but to quickly get things up and online (eg wireframing a webapp) this is fantastic. Thanks for your hard work Dirk. :)

Comment by Michael McCorry — August 30, 2007

I really like it, especially the builder application! It is really nice work, well done!

PS Is there uncompressed and commented source code of the builder?

Comment by zero0x — August 31, 2007

Hello, thanks for your feedback. Of course I know the discussion about the amount of divs in the markup but as YAML is focussed on flexible layouts, there are good reasons for this way in a framework when you want to offer real freedom to the designer. The documentation is nothing for reading in a minute but i promise, it’s worth reading it! Definitely there will be a learning curve when you starting with YAML as features like the Top-Down-Principle or the way YAML deals with IE-Bugs is something, not everyone is familiar with.

Comment by Dirk Jesse — August 31, 2007

@Mario: what’s the name of his book?

Comment by Adnan Siddiqi — August 31, 2007

It has been developed in jQuery. WOW!

Comment by Adnan Siddiqi — August 31, 2007

yea that app was developed in jquery, that’s why i’m looking for source,

dirk, can u share the source code please?

Comment by zero0x — August 31, 2007

Excellent Article but a minor spelling mistake in the first paragraph ;-)

Comment by Satts — August 31, 2007

@David Walsh: RE: “is CSS really that hard?”
Yes it is, especially if designs become more complex and you need the results cross-A-Browsers… so doing prototyping like this is very time savy. Most people that I heard of do not touch the main YAML structure in the course of the project, it just works as-is. And overall YAML is a great piece of work IMHO and the result of a long effort. Well done, I´d say.

Comment by Frank Thuerigen — August 31, 2007

He needs to rename it. YAML is definately already taken.

Comment by Robert — August 31, 2007

WOWWW! It’s Great! I’ll use it.

Comment by handy — August 31, 2007

@Adnan: CSS-Layouts. Praxislösungen mit YAML (german title)

Comment by .mario — September 1, 2007

This looks like an excellent tool. Builder is very intuitive, and I plan to use it in the prototyping phase of an upcoming project.

Comment by Will Peavy — September 2, 2007

Have to change the name. YAML is taken. See

Comment by obtuse — September 26, 2007

Leave a comment

You must be logged in to post a comment.