Zen Coding - Set of plugins for HTML and CSS hi-speed coding

[soft2050]

I would like to share this editor plugin which can help you in creating/editing templates. It converts the css selectors to html code. More explanation below...

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

To:

<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>

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
• Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1> span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
• Filters Support
• div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
• (v0.7) Text support: p>{Click }+a{here}+{ to continue}.

The good part about it is that it has plugin for various editors. So you need not change yours. It has official plugin for major editors like notepad++, textmate, dreamweaver, sublime text

Read more: http://code.google.com/p/zen-coding/

soft2050 Reviewed by soft2050 on 18th Feb 2012. Zen Coding - Set of plugins for HTML and CSS hi-speed coding I would like to share this editor plugin which can help you in creating/editing templates. It converts the css selectors to html code. More explanation below... 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: To: Current features of abbreviation engine ID and Rating: 5

[praveer]

Thanks for the share :-)

[l0calh0st]

Oldskool coding here

[Gaurav]

for the VIM/TextMate users out there, do have a look at Sparkup

[soft2050]

Thanks for the share :-)

Welcome

Oldskool coding here

for the VIM/TextMate users out there, do have a look at Sparkup

Zen coding is also available for TextMate. Going to check the feature that spark up has and zen don't have.

[Gaurav]

Well Sparkup allows going back to the parent and adding elements to them..

For instance:

div#test > table > tr > td*3 << a

will create the anchor tag with #test as the immediate parent. This afaik isn't supported in Zen Coding