Emmet(Zen Coding)Overview
What is Emmet?
“Emmet (previously known as Zen Coding)is a web-developer’s toolkit that cangreatly improve your HTML & CSSworkflow:”     ...
How to Install it?
You should have one of those IDE
Download Emmet plugin:Go to http://docs.emmet.io/ and chose yourfavorite IDE from the list.Follow the instruction and inst...
Syntax
Expand single element (element name)You type:          You get:div                <div></div>p                  <p></p>img...
Expand multiple elements (*n)                 You get:You type:                 <div></div> div*2           <div></div>   ...
Add Custom text in elements({})You type:         You get: p{Lorem ipsum}   <p>                         Lorem ipsum        ...
Element nesting (>) child nestingYou type:         You get:ul>li             <ul>                           <li></li>     ...
Element nesting (+) siblings nestingYou type:                      You get: Same Level as second div                      ...
Element nesting (^) climb upYou type:                            You get: Level 2 nesting   Back to Level 1               ...
Element nesting (^) climb upYou type:                     You get: Level 2 nesting                              <div>     ...
AttributsId attribute:           <div id=“header”>div#header              </div>class attribute         <div class=“someHe...
Upcoming SlideShare
Loading in …5
×

Emmet(zen coding)

3,659 views
3,470 views

Published on

Simple overview of Emmet technology

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,659
On SlideShare
0
From Embeds
0
Number of Embeds
2,305
Actions
Shares
0
Downloads
33
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Emmet(zen coding)

  1. 1. Emmet(Zen Coding)Overview
  2. 2. What is Emmet?
  3. 3. “Emmet (previously known as Zen Coding)is a web-developer’s toolkit that cangreatly improve your HTML & CSSworkflow:” Emmet web site
  4. 4. How to Install it?
  5. 5. You should have one of those IDE
  6. 6. Download Emmet plugin:Go to http://docs.emmet.io/ and chose yourfavorite IDE from the list.Follow the instruction and install the pluginSome editors support package control andconsole line plugin installation
  7. 7. Syntax
  8. 8. Expand single element (element name)You type: You get:div <div></div>p <p></p>img <img src="" alt="">
  9. 9. Expand multiple elements (*n) You get:You type: <div></div> div*2 <div></div> <p></p> <p></p> p*3 <p></p> <p></p> img*2 <img src="" alt=""> <img src="" alt="">
  10. 10. Add Custom text in elements({})You type: You get: p{Lorem ipsum} <p> Lorem ipsum </p> a{Click me} <a href=“”>Click me</a>
  11. 11. Element nesting (>) child nestingYou type: You get:ul>li <ul> <li></li> </ul> <div>div>p <p></p> </div>
  12. 12. Element nesting (+) siblings nestingYou type: You get: Same Level as second div <div></div> <div>div+div>p+span <p></p> <span></span> </div> Same Level as the p element
  13. 13. Element nesting (^) climb upYou type: You get: Level 2 nesting Back to Level 1 <div> <p>div>p>span^span <span></span> </p> <span></span> </div>
  14. 14. Element nesting (^) climb upYou type: You get: Level 2 nesting <div> <p>div>p>span^^span <span></span> </p> </div> Outside of nesting <span></span>
  15. 15. AttributsId attribute: <div id=“header”>div#header </div>class attribute <div class=“someHeader”> </div>div.someHeader <div name=“theHead”>custom attribute </div>div[name = “theHead”]

×