Quick layouts with Zen Coding in HTML

Zen coding is something amazing which is used to develop a layout just in some seconds. It allows us to rapidly create our Mark Up .We can use this feature by installing a plug in for our editor.

You can also see some tricks of using Zen Coding in “code.google.com/zen-coding “


Let us see how we can use Zen Coding:

1] If you want to create an element you just need to type the element name and press trigger It will generate the opening and closing tags.

Eg .

Just type

[box type="shadow" ]ul[/box]

And press the trigger

You will have the generated code as following:

[box type="shadow" ]

<ul> </ul>

[/box]

2] When you enter the following code :

[box type="shadow" ]

.example

[/box]

It will generate a div with class name emaple.

[box type="shadow" ]

 <div class="example"></div>

[/box]

3] You can give id to div tags using  # sign

[box type="shadow" ]#someid [/box]

Will give

[box type="shadow" ]

<div id="someid"></div>

[/box]

4] To generate nested tags  &lt sign is used

[box type="shadow" ]ul>li[/box]

will generate

[box type="shadow" ]

<ul>

<li></li>

</ul>

[/box]

5] The sign * indicates number of the elements to be generated

[box type="shadow" ]ul > li * 5  [/box]

will generate

[box type="shadow" ]

<ul>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

[/box]

6] Curly braces are used to indicate the content of particular tag

Eg.

[box type="shadow" ].wrap Header> h1 { My header } [/box]

Will generate the following code :

[box type="shadow" ]

<div class= ”wrap”>
 <header> 
  <h1>
   My header
  </h1>
 </header>
</div>

[/box]

7] To generate a sibling for any tag you can use + sign

Eg.

[box type="shadow" ].wrap Header> h1 { My header } + nav> ul> li*5[/box]

Will generate following code

[box type="shadow" ]

<div class= ”wrap”>
 <header>
  <h1>
   My header
  </h1>
 </header>
 <nav>
  <ul>
   <li> </li>
   <li> </li>
   <li> </li>
   <li> </li>
   <li> </li>
                </ul>
 </nav>
        
</div>

[/box]

8] You also can initialize any property of any element with square braces

Eg . let us initialize anchor tag with the attribute href = “#”

[box type="shadow" ].wrap Header> h1 { My header } + nav > ul > li*5> a [ href=”#”][/box]

Will generate :

[box type="shadow" ]

<div class= ”wrap”>
 <header> 
  <h1>
   My header
  </h1>
 </header>
 <nav>
  <ul> 
   <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>
       </nav> 
</div>

[/box]

9] You can navigate on tags after generation of actuall code by pressing trigger

In sublime text the key “Tab” where as in notepad ++  “ctrl + E” works as the Trigger .

Enjoy quick layouts using Zen Coding in any editor.