I made a New Years resolution to give the Zen Coding plugin a try in an attempt to speed up html/css markup. We do a lot of in browser design and prototyping with markup at Chaordix so any increase in efficiency is a boon.
Zen Coding was created by Sergey Chikuyonok to allow elegant css style syntax for quickly constructing html and css markup. Before I go any further let me demonstrate what constructing a chunk of html with Zen Coding looks like.
ul#my-list>li.item-$*3>a
Zen Coding takes the above line and transforms it into this:
<ul id="my-list"> <li class="item-1"><a></a></li> <li class="item-2"><a></a></li> <li class="item-3"><a></a></li> </ul>
Okay, so that was pretty cool but anyone who writes code everyday can probably pump that out with a serious of shortcuts in their editor of choice. Let’s go overboard a little and show some power.
html:xt>div#container>div#header>div#logo+ul#nav>li.item-$*5>a
magically becomes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> </head> <body> <div id="container"> <div id="header"> <div id="logo"></div> <ul id="nav"> <li class="item-1"><a href=""></a></li> <li class="item-2"><a href=""></a></li> <li class="item-3"><a href=""></a></li> <li class="item-4"><a href=""></a></li> <li class="item-5"><a href=""></a></li> </ul> </div> </div> </body> </html>
The input to output ratio is huge. While impressive it’s really only useful if the syntax is easy to learn and construct. In my experience the learning curve has been steep and I was up and running in no time. Let’s walk through the syntax for the first example in this post to demonstrate how simple it really is.
ul#my-list>li.item-$*3>a
We can break this down very easily. Let’s start with how the list and it’s list items are created.
ul#my-list
becomes
<ul id="my-list"></ul>
and
li.item
becomes
<li class="item"></li>
At this point things should feel pretty familiar to writing CSS. let’s add some of the fun stuff.
ul#my-list>li.item*3
<ul id="my-list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul>
Using > we are have specified that the list items are inside the unordered list. We’ve then tacked *3 onto the list items telling Zen coding to multiply the number by three. Now let’s finish it off.
ul#my-list>li.item-$*3>a
<ul id="my-list"> <li class="item-1"><a></a></li> <li class="item-2"><a></a></li> <li class="item-3"><a></a></li> </ul>
We have now used -$ to increase the number on the class name of each list item and used > again to specify a link inside each of these list items.
Alright, reading through that it may feel like a lot of mental math just to output some HTML but once you get started it’s easy and dare I say addictive. Once you get the hang of it you’ll be coding at warp speed!
Zen Coding supports a number of text editors and includes plugins for both HTML and CSS.
Checkout these links if you want to Learn more about Zen Coding:
photo by H. Koppdelaney
