ZEN CODING IN VISUAL STUDIO 2012

QUI CK REFERENCE
#
creates an id attribute
.
creates a class attribute
[ ]
creates a custom attribute
>
creates a child element
+
creates a sibling element
^
climbs up
*
is element multiplication. This creates the same thing n number of times
$
is replaced with an incremental number
$$
is used for numbers with padding
{ }
creates text in an element
You can create an element and assign it an id or class attribute using CSS style syntax.
<!-- Type this -->
div#contentRegion.address

<!-- Creates this -->
<div id="contentRegion" class="address"></div>
CUSTOM ATTRI BUTES: [ ]
You can create any attribute the square bracket syntax.
<!-- Type this -->
div[title]

<!-- Creates this -->
<div title=""></div>

Or create multiple attributes and fill in valuesChild Elements: >
Create an element and then a child element inside of it.
<!-- Type this -->
div#menu>span.item[title]

<!-- Creates this -->
<div id="menu">
<span class="item" title=""></span>
</div>
SI BLI NG ELEMENTS: +
You can create a sibling element easily too.
<!-- Type this -->
footer>div>a+input

<!-- Creates this -->
<footer>
<div>
<a href=""></a>
<input type value="" />
</div>
</footer>
CLI MBI NG ELEMENTS: ^
The > operator descends into element hierarchy while the ^ climbs up the hierarchy. You
can also climb multiple levels. For example: use 1 ^ to climb 1 level or use 4 ^ to climb 4
levels.
<!-- Type this -->
footer>div>a+input^^p

<!-- Creates this -->
<footer>
<div>
<a href=""></a>
<input type value="" />
</div>
<p></p>
</footer>
MULTI PLI CATI ON: *
Create n number of elements
<!-- Type this -->
ul>li*4>span

<!-- Creates this -->
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
I TEM NUMBERI NG: $
When using the multiplication to create n number of elements, you can add an
incremental number to them using the $. Notice that using multiple $ operators (ex: $$)
creates pads the numbers with 0s.
<!-- Type this -->
section>article.item$$*4

<!-- Creates this -->
<section>
<article class="item01"></article>
<article class="item02"></article>
<article class="item03"></article>
<article class="item04"></article>
</section>
TEXT: {}
You can enter text values inside of elements, without changing the parent context.
<!-- Type this -->
ul>li*4>span{Caption $$}

<!-- Creates this -->
<ul>
<li><span>Caption 01</span></li>
<li><span>Caption 02</span></li>
<li><span>Caption 03</span></li>
<li><span>Caption 04</span></li>
</ul>
This does not change the parent context, so when specifying the sibling to follow the text,
the sibling element will actually follow the element prior to the text. Thats why the
example below creates an anchor tag next to the span tag.
<!-- Type this -->
ul>li*4>span{Caption $$}+a{click me}

<!-- Creates this -->
<ul>
<li><span>Caption 01</span><a href="">click me</a></li>
<li><span>Caption 02</span><a href="">click me</a></li>
<li><span>Caption 03</span><a href="">click me</a></li>
<li><span>Caption 04</span><a href="">click me</a></li>
</ul>
COMBI NI NG THEM ALL
You can combine multiple features together which allows you to write some pretty cool
HTML much faster. You can even use this to create some Knockout.js bindings for
templates, and then just change the property names.
<!-- Type this -->
section[data-bind="foreach:customers"]>div*4>input[type="text" data-bind="text:$$"]

<!-- Creates this -->

<section data-bind="foreach:customers">
<div>
<input type="text" value="" data-bind="text:01" />
</div>
<div>
<input type="text" value="" data-bind="text:02" />
</div>
<div>
<input type="text" value="" data-bind="text:03" />
</div>
<div>
<input type="text" value="" data-bind="text:04" />
</div>
</section>
GROUPI NG: ( )
Grouping is a powerful feature of Zen Coding that allows you to create complex
expressions. It is not yet in Web Essentials 2012, but I assume it will come in the near future.
If it does arrive, you would be able to create entire sections of a DOM very easily.
<!-- Type this -->
div>(header>div)+section>(ul>li*2>a)+footer>(div>span)

<!-- WOULD create this (not yet supported in Web Essentials 2012)-->
<div>
<header>
<div></div>
</header>
<section>
<ul>

<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</section>
<footer>
<div>
<span></span>
</div>
</footer>
</div>
As you can see, this would make it quite simple to create large sections of HTML with just
a few keystrokes.
LOREM I PSUM GENERATOR
You can now generate Lorem Ipsum directly in the HTML editor. Type lorem and hit TAB
and a 30 word Lorem Ipsum text is inserted. Type lorem10 and a 10 word Lorem Ipsum
text is inserted.
ul>li*5>lorem3