Incoverdesign Just another WordPress weblog

A Seepdy way of writing HTML and CSS code

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>

Show all download links from Zen Coding

Demo
Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Downloads (Full Support)

• Aptana (cross-platform);
• Coda, via TEA for Coda (Mac);
• Espresso, via TEA for Espresso (Mac);

Downloads (Partial Support, “Expand Abbreviation” Only)

• TextMate (Mac, and can be used with E-text editor for Windows);
• TopStyle;
• Sublime Text;
• GEdit;
• editArea online editor;

Expand Abbreviation

The Expand Abbreviation function transforms CSS-like selectors into XHTML code. The term “abbreviation” might be a little confusing. Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. Secondly, it supports only a small subset of real CSS selector syntax, in addition to introducing some new operators.

Here is a list of supported properties and operators:

• E
  Element name (div, p);
• E#id
  Element with identifier (div#content, p#intro, span#error);
• E.class
  Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
• E>N
  Child element (div>p, div#footer>p>span);
• E+N
  Sibling element (h1+p, div#header+div#content+div#footer);
• E*N
  Element multiplication (ul#nav>li*5>a);
• E$*N
  Item numbering (ul#nav>li.item-$*5);

As you can see, you already know how to use Zen Coding: just write a simple CSS-like selector (oh, “abbreviation”—sorry), like so…

div#header>img.logo+ul#nav>li*4>a

…and then call the Expand Abbreviation action.

There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five <li> elements, you would simply write li*5. It would repeat all descendant elements as well. If you wanted four <li> elements, with an <a> in each, you would simply write li*4>a, which would generate the following output:

<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

The last one–item numbering is used when you want to mark a repeated element with its index. Suppose you want to generate three <div> elements with item1, item2 and item3 classes. You would write this abbreviation, div.item$*3:

<div></div>
<div></div>
<div></div>

Just add a dollar sign wherever in the class or ID property that you want the index to appear, and as many an you want. So, this…

div#i$-test.class$$$*5

would be transformed into:

<div id="i1-test"></div>
<div id="i2-test"></div>
<div id="i3-test"></div>
<div id="i4-test"></div>
<div id="i5-test"></div>

You’ll see that when you write the a abbreviation, the output is <a href=""></a>. Or, if you write img, the output is <img src="" alt="" />.

How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:

'html': {
'snippets': {
'cc:ie6': '<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->',
...
}, 

'abbreviations': {
'a': '<a href=""></a>',
'img': '<img src="" alt="" />',
...
}
}

more updates??
leave comment...