Speedy prototyping with Zen Coding and 960.gs

If you are a front end developer, you probably have already used certain “helpers” while writing your templates, from Dreamweaver to TextMate, there always is some sort of a code assist function implemented. Using these is not something to be ashamed of, these tools enable us to do our work faster, help us make fewer mistakes and make most routine tasks a lot less annoying.

Zen coding is the evolution of the short code expansion tendency. At it’s very basics, it allows you to expand tiny css selectors like


into html divs

<div class="randomclass"></div>

I embrace everything that makes me work faster, 960.gs is one of those tools, it makes creating user interfaces so much quicker and easier (less ie6 bugs), so I thought: why not try bringing these two things together and see how fast I could code a basic 2 column xhtlm layout.

Please take a few minutes to watch the screen recording I made to demonstrate how you could write up a whole web site layout in just 3 minutes (or less).

I put the resulting code in a zip archive.

To download Zen Coding, please go to it’s Google Code home: https://code.google.com/p/zen-coding/.
To download 960.gs, please go to it’s home at https://960.gs.

The editor used in this video is TextMate for Mac (e-texteditor is it’s Windows alternative).

Thank you for reading and we would appreciate any comments and suggestions that you might have.