Zen Coding with Visual Studio
What is Zen Coding?
According to Wikipedia:
Zen Coding is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSL, and other structured code formats via content assist.
We now have Zen Coding in Visual Studio 2013, thanks to Web Essentials. If Web Essentials is not in your Visual Studio, don’t worry just add it. Zen Coding will allow you to expand small snippets of code that are written in very terse syntaxes into HTML. There is no need to type brackets, class equals, etc.
Adding Class
If you want to create a div with class “row”, type div.row and then press the Tab key. Zen Coding will automatically generate one div with a class row.
<div class="row"></div>
Let see some more examples
Id for a Tag
Type div#main hit tab. (Example 2)
<div id="main"></div>
Type div>p hit tab (3)
<div>
<p></p>
</div>
Combined
Type div#main.row>p.sub hit tab. (Example 3)
<div id="main" class="row">
<p class="sub"></p>
</div>
Type li*5 hit tab. (Example 4)
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
Type li#item$*5 hit tab. (Example 5)
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
Type div#main.row>div.sub>ul#list>li#item$*5 hit tab. (Example 6)
<div id="main" class="row">
<div class="sub">
<ul id="list">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
</div>
Type div#content>h1+p+p hit tab. (Example 7)
<div id="content">
<h1></h1>
<p></p>
<p></p>
</div>
Type div#main.row>h1+p+p+div.sub>ul#list>li#item$*5 hit tab. (Example 8)
<div id="main" class="row">
<h1></h1>
<p></p>
<p></p>
<div class="sub">
<ul id="list">
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
</div>
Type div.container>(header>nav)+(div.row>div.col-lg-3*5) hit tab. (Example 9)
<div class="container">
<header>
<nav></nav>
</header>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
</div>
</div>