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:
Read more: http://code.google.com/p/zen-coding/
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:div#page>div.logo+ul#navigation>li*5>a
Current features of abbreviation engine<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>
- 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}.
Read more: http://code.google.com/p/zen-coding/