Zen Coding  # 17 Aug 2010

“A new way of writing HTML and CSS code. Features a powerful abbreviation engine which allows you to expand expressions similar to CSS selectors into HTML code.”

Yay!

Update: Example syntax for creating a new HTML 5 page:

html:5>div#header>div#logo+ul#nav>li.item-$*5>a

In Texmate (there is a bundle), hit Cmd-E to expand the above into:

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

|