Zen Coding — a new way of writing HTML and CSS code

zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting

Zen Coding — a new way of writing HTML and CSS code

Follow us on Twitter @zen_coding

New version 0.7 is available (March 13, 2011), read release notes for more info.

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

div#page>div.logo+ul#navigation>li*5>a

...can be expanded into:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Read more about current Zen Coding syntax

Abbreviation engine has a modular structure which allows you to expand abbreviations into different languages. Zen Coding currently supports CSS, HTML, XML/XSL and HAML languages via filters.

Current features of abbreviation engine

• ID and CLASS attributes: div#page.section.main.
• Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].
• Element multiplication: li*5 will output <li> tag five times.
• Item numbering with $ character: li.item$*3 will output <li> tag three times, replacing $ character with item number.
• Multiple '

characters in a row are used as zero padding, i.e.: li.item$$ → li.item001