One chasm between traditional desktop application development and web application development is layout/forms design. It’s my constant pain point “I just want a 2 column layout, with a data table in the middle” - many hours later you’re still tearing your hair out trying to get it working. It should not be this way (and that’s just for prototyping).

To get a production tested basic grid/column based layout, that looks reasonable across all browsers and is flexible enough to grow as the app grows - well we all know how much a top notch HTML/CSS wizard is going to cost us right ? Why for every project the same ground of IE hacks and cross browser issues are solved over and over again ? This is half the reason that a sandbox environment like AIR is very appealing - don’t deal with it, just get your users to use a standard environment.

Enter from stage left, in the why hasn’t anyone thought about it before category, are two CSS frameworks that I happened upon on Friday. One called Blueprint which is getting a bit of attention, and one with the rather confusing name of YAML. After seeing all of the examples of YAML, and reviewing the documentation I thought what the heck lets give this a go.

YAML is designed for ’standard’ column based layouts. It essentially says ‘create your main div structure this way, in a predefined page/top nav/nav/main body/footer layout. Then within your main body div, you have options for creating 1-3 columns, and then sub columns within those columns. Whilst I haven’t tested the limits, I’m sure so long as it fits within a grid you could use YAML to create it. It’s not designed for your highly creative CSS award winning page with umpteem divs all over it - however that audience wouldn’t be reading this blog. But for your standard store/blog/cms/other application I can see a huge head start in having the CSS pain removed from your desk.

So I put the theory to the test - 4 hours later, I had a couple of layouts running and working across IE 6, IE 7, Firefox, Safari… un-fricking-believable. About 30mins of that 4 hours was the actual job of getting the css setup with the basic grid structure - the rest, playing about with colours, table styles, and creating actual views. I abhor front end CSS work and this abstracted away all of the pain, leaving me just to get on with the job.

I’m not going to attempt to write a how-to or tutorial, as the original docs are so good I’ll leave well enough alone - the only caveat is don’t just blindly copy and paste, make sure you skim read the docs, you need to know where to put the appropriate patch files etc.

But wait there’s more !

Does the thought of manually constructing even your basic div structure seem a little off putting to you. Dirk Jesse (YAML’s wizard) has a browser based builder for constructing your layout and outputting the CSS. Very nice indeed !. Just jump to his site and check it out.

So you can expect to see some XChain screenshots gracing this site shortly.