Zen Coding: Using Sublime Text (emmet plug-in)

Assuming that all of us installed zen code plugin if not please install it.
Here we're going to show you some frequently used useful tips & tricks of zen-coding with respect to HTML

type html:5 in your editor & hit tab  (@HIT-TAB@)
Let's see the different basic rules to create well formatted html one by one...

-- 1. To create the element

Write the element name and hit "TAB"

e.g. (div & hit TAB) and emmet will create this for you

   div@HIT-TAB@ => <div></div>

   p@HIT-TAB@ => <p></p>

-- 2. To create element with identifier

  Let's say we want to create "div having id as myId"

  We can use "#" sign like this

 div#myId@HIT-TAB@  => <div id="myId"></div>

  

-- 3. To create element with class name

  If we want to create "div with class name myClass"

  we can use "." sign like this

  div.myClass@HIT-TAB@   => <div class="myClass"></div>

  div.myClass1.myClass2.myClass3@HIT-TAB@  => <div class="myClass1 myClass2 myClass3"></div>

  we can combine identifier with class name like this

  div#myId.myClass1.myClass2@HIT-TAB@  => <div id="myId" class="myClass1 myClass2"></div>

-- 4. To create child element

   We can use ">" between the elements

   Let's say we want to create "li" inside "ul" tag

 --------------------------------------------------------------

Desired html structure

   <ul>

                <li></li>

    </ul>

ZenCode: ul>li@HIT-TAB@

  --------------------------------------------------------------

   if we want 5 "li" tag inside "ul" just use "*" sign

Desired html structure

   <ul>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

                <li></li>

    </ul>

ZenCode: ul>li*5@HIT-TAB@

  Some more examples:

    div>p@HIT-TAB@

    div#footer>p>span@HIT-TAB@

-- 5 For sibling element

  We can use "+" sign for sibling elements

Desired html structure:

<div id="header"></div>

<div id="content"></div>

<div id="footer"></div> 

ZenCode: div#header+div#content+div#footer@HIT-TAB@

-- 6. If you want to dynamically number the item

 take the help of "$" sign

 "element$*count"

Desired html structure

 <ul id="nav">

                <li class="item-1"></li>

                <li class="item-2"></li>

                <li class="item-3"></li>

                <li class="item-4"></li>

                <li class="item-5"></li>

 </ul>

 Zencode: ul#nav>li.item-$*5@HIT-TAB@;

-- 7 To move one element up   (^) use caret sign

  Desired html structure

  <div><span id="spanId" class="spanClass"></span></div>

  <div><span></span></div>

  ZenCode: div>span#spanId.spanClass^div>span@HIT-TAB@

-- 8. If we're not writing any "html element" then emmet will treat it as "div"

 .myClass>header>li   <=> div.myClass>header>li

 if we're creating "li" tag inside "ul"

 and in this case we can ignore writing "li" tag, emmet will create it for you

  ---------------------------------------------------------------------

Desired html code

 <ul>

                <li class="myLiClass-1"></li>

                <li class="myLiClass-2"></li>

 </ul>

 ZenCode:  ul>.myLiClass-$*2@HIT-TAB@

 ---------------------------------------------------------------------

Desired html structure

<div class="myClass">

                <header>

                                <h1></h1>

                </header>

                <div class="main"></div>

                <footer></footer>

</div>

ZenCode: .myClass>header>h1^.main+footer

 ---------------------------------------------------------------------

   

-- 9. To set attributes [attr="attrValue"]

     To write some text inside tab {some text}

Desired html

     <ul>

                <li class="foo"><a href="#">some text</a></li>

                <li class="foo"><a href="#">some text</a></li>

                <li class="foo"><a href="#">some text</a></li>

     </ul>

ZenCode: ul>.foo*3>a[href="#"]{some text}

  

-- 10. To get text on demand

Type "lorem" and put the number just after it, it will create 5 words for you

lorem5  => Lorem ipsum dolor sit amet.

if we're using "*N" sign then it’ll create N number of <div>s with some dummy records

Below line will create 5 div with some dummy text

ZenCode

lorem*3  

Html structure

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, animi illo aliquam debitis culpa aspernatur ratione similique repellendus velit facilis dolor molestiae quasi quaerat quam at sed sit minima porro.</div>

                                <div>Ab, ipsum, nostrum, sapiente illum commodi sit nesciunt blanditiis maiores harum doloremque maxime deleniti dicta nihil. Omnis, corporis, nostrum commodi eaque doloribus itaque dolorum ipsam dignissimos laboriosam quisquam iusto amet.</div>

                                <div>Distinctio, quidem, architecto, rerum, illum debitis provident fugiat numquam voluptate laboriosam assumenda explicabo delectus veniam adipisci repellat labore cupiditate sed. Distinctio, quos, rerum sunt unde officiis et repudiandae voluptatem nihil!</div>

  

11. Use of ZenCode as on time calculator

We can use ZenCode to do dome simple mathematical calculation

12/3*4  “now press “Ctrl + Shift + Y” and it will get converted into 16

Now we've good understanding of zen coding let’s try this zen code and see the result

html>head>title^body>div.header>ul#nav>li.item-$*4>a[href="#"]{Item $}^^^div.main>div(lorem*3)^div#footer>p>span


NOTE: All of the above code tested in "Sublime Text 3"
             Similar tips & tricks are available for writing "CSS" using zen-coding.

References:
1.       http://docs.emmet.io/cheat-sheet/