Stand With Ukraine. Stop Putin. Stop War.

Zen Coding - making HTML Development faster!

Heck, I could write a long post about Zen Coding - but why not just let you see a vid that explains it, and shows some of its amazing features?

Check it out at Vimeo - Zen Coding v0.5.

As my xHTML writing tool of choice is Notepad++ (due to it having syntax highlighting for like, everything) I did a few googles to find a Zen Coding plugin for Notepad++. Chances are that your favorite editor also supports it, or that a plugin is available from the Google Code project.

How it works

Simply type in a string such as this one, which reflects the hierarchy of html tags:

body#yourPage>div#item-$*5>ul>li.listitem$$*3>a.link

Then use the shortcut your editor uses to expand the Zen Code into xHTML (for the Notepad++ plugin that is Ctrl+E, later versions seem to use ctrl+alt+enter) and watch how, magically, you end up with full blown, indented markup.

<body id="yourPage">
  <div id="item-1">
    <ul>
      <li class="listitem01"><a href="" class="link"></a></li>
      <li class="listitem02"><a href="" class="link"></a></li>
      <li class="listitem03"><a href="" class="link"></a></li>
    </ul>
  </div>
  <div id="item-2">
    <ul>
      <li class="listitem01"><a href="" class="link"></a></li>
      <li class="listitem02"><a href="" class="link"></a></li>
      <li class="listitem03"><a href="" class="link"></a></li>
    </ul>
  </div>
  <div id="item-3">
    <ul>
      <li class="listitem01"><a href="" class="link"></a></li>
      <li class="listitem02"><a href="" class="link"></a></li>
      <li class="listitem03"><a href="" class="link"></a></li>
    </ul>
  </div>
  <div id="item-4">
    <ul>
      <li class="listitem01"><a href="" class="link"></a></li>
      <li class="listitem02"><a href="" class="link"></a></li>
      <li class="listitem03"><a href="" class="link"></a></li>
    </ul>
  </div>
  <div id="item-5">
    <ul>
      <li class="listitem01"><a href="" class="link"></a></li>
      <li class="listitem02"><a href="" class="link"></a></li>
      <li class="listitem03"><a href="" class="link"></a></li>
    </ul>
  </div>
</body>

But that's not it! There's more! Do you also have the same markup layout structure of a container div, containing an inner container, then a header and content div? Does your header div have a logo img? No biggy!

body>div#container>div#inner>(div#header>img.logo)+div#content

transforms into

<body>
  <div id="container">
    <div id="inner">
      <div id="header"><img src="" alt="" class="logo" /></div>
      <div id="content"></div>
    </div>
  </div>
</body>

You could literally build a whole page's basic structure with this in minutes... I'm in love.

Oh, and this one is even better. If you use "html:5", you get the complete HTML5 structure, including doctype and what not.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

If you're looking for a total list of possibilities, I suggesting getting this 7 page cheatsheet, which also includes the Zen CSS properties.