Zen Coding with Visual Studio

Zen Coding is a plugin that can significantly speed up the generation of HTML.

It enables the coder to enter HTML using CSS-style abbreviations, which are then expanded into full HTML.

Plugins are available for a variety of editors. For Visual Studio, Zen Coding functionality is incorporated into the Web Essential extension, which can be downloaded from here – http://vswebessentials.com/download

I’m going to demonstrate how to code HTML using Zen Coding abbreviations. This is the HTML snippet that I’m going to create –

<div id="wrap" class="pnl pnl-lg">
    <h1>Zen Test</h1>
    <div class="content">
        <p>Here's some paragraph text</p>
        <div class="box"></div>
    </div>
    <aside class="sidebar">
        <ul>
            <li id="listItem_1"><a id="link1" href="" target="_blank">Link 1</a></li>
            <li id="listItem_2"><a id="link2" href="" target="_blank">Link 2</a></li>
            <li id="listItem_3"><a id="link3" href="" target="_blank">Link 3</a></li>
        </ul>
    </aside>
</div>

I will do this step-by-step, introducing a feature with each step.

 HTML Elements

Open an HTML or CSHTML page.

Type div and then hit the [TAB] key. The editor expands the abbreviation into full HTML.

div [tab]

<div></div>

Class and ID Atrributes

A class attribute can be applied to an element by appending .classname to the element.

An id can be applied by appending #id.

Multiple classes can be applied by chaining the class names.

div.pnl [tab]

<div class="pnl"></div>

div#wrap [tab]

<div id="wrap"></div>

div.pnl.pnl-lg#wrap [tab]

<div id="wrap" class="pnl pnl-lg"></div>

Nesting Elements

A right-angled bracket, >, is used to denote nested or child elements. 

div.pnl.pnl-lg#wrap>h1 [tab]

<div id="wrap" class="pnl pnl-lg">
    <h1></h1>
</div>

Sibling Elements

To add multiple sibling elements, use +.

div.pnl.pnl-lg#wrap>h1+div.content+aside.sidebar [tab]

<div id="wrap" class="pnl pnl-lg">
    <h1></h1>
    <div class="content"></div>
    <aside class="sidebar"></aside>
</div>

Element Multiplication

Appending *n to an element multiplies the element n times.

In the example below li*3 outputs 3 <li> elements.

div.pnl.pnl-lg#wrap>h1+div.content>p+div.box+aside.sidebar>ul>li*3 [tab]

<div id="wrap" class="pnl pnl-lg">
    <h1></h1>
    <div class="content">
        <p></p>
        <div class="box"></div>
        <aside class="sidebar">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </aside>
    </div>
</div>

Grouping

Elements can be grouped together using parenthesis, ( ).

In the example above the parser has output the <aside> elements within the <div class=”content”> element.

The example below uses parenthesis to group elements, hence outputting the <aside> as a sibling of the <div>.

div.pnl.pnl-lg#wrap>h1+(div.content>p+div.box)+(aside.sidebar>ul>li*3) [tab]

<div id="wrap" class="pnl pnl-lg">
    <h1></h1>
    <div class="content">
        <p></p>
        <div class="box"></div>
    </div>
    <aside class="sidebar">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </aside>
</div>

Custom Attributes

Custom attributes can be added to an element by appending the element with the attribute name and value in square brackets, [ ].

[target=_blank] is appended to the <a> attribute below.

div.pnl.pnl-lg#wrap>h1+(div.content>p+div.box)+(aside.sidebar>ul>li*3>a#link[target=_blank]) [tab]

<div id="wrap" class="pnl pnl-lg">
    <h1></h1>
    <div class="content">
        <p></p>
        <div class="box"></div>
    </div>
    <aside class="sidebar">
        <ul>
            <li><a id="link" href="" target="_blank"></a></li>
            <li><a id="link" href="" target="_blank"></a></li>
            <li><a id="link" href="" target="_blank"></a></li>
        </ul>
    </aside>
</div>

Item Numbering

Item numbering for multiple elements can be added by applying the $ character.

Item numbering can be added to attributes as well as text.

And the numbering can be padded with zeros by applying multiple $ characters, e.g. $$

div.pnl.pnl-lg#wrap>h1+(div.content>p+div.box)+(aside.sidebar>ul>li*3>a#link$[target=_blank]) [tab]

<div id="wrap" class="pnl pnl-lg">
    <h1></h1>
    <div class="content">
        <p></p>
        <div class="box"></div>
    </div>
    <aside class="sidebar">
        <ul>
            <li><a id="link1" href="" target="_blank"></a></li>
            <li><a id="link2" href="" target="_blank"></a></li>
            <li><a id="link3" href="" target="_blank"></a></li>
        </ul>
    </aside>
</div>

 Text

Curly brackets, { }, are used to denote text.

div.wrap>h1{Zen Test}+(div.content>p{Here's some paragraph text}+div.box)+(aside.sidebar>ul>li#listItem_$*3>a#link$[target=_blank]{Link $}) [tab]

<div class="wrap">
    <h1>Zen Test</h1>
    <div class="content">
        <p>Here's some paragraph text</p>
        <div class="box"></div>
    </div>
    <aside class="sidebar">
        <ul>
            <li id="listItem_1"><a id="link1" href="" target="_blank">Link 1</a></li>
            <li id="listItem_2"><a id="link2" href="" target="_blank">Link 2</a></li>
            <li id="listItem_3"><a id="link3" href="" target="_blank">Link 3</a></li>
        </ul>
    </aside>
</div>

For more details on the Zen Coding standard, a good starting place is the Zen Coding project repository – https://code.google.com/p/zen-coding/

 

 

 

 

Advertisements