emmet(zen coding)
DESCRIPTION
Simple overview of Emmet technologyTRANSCRIPT
Emmet(Zen Coding)Overview
What is Emmet?
“Emmet (previously known as Zen Coding)
is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:”
Emmet web site
How to Install it?
You should have one of those IDE
Download Emmet plugin:
Go to http://docs.emmet.io/ and chose your favorite IDE from the list.
Follow the instruction and install the plugin
Some editors support package control and console line plugin installation
Syntax
Expand single element (element name)
You type:
div
p
img
You get:
<div></div>
<p></p>
<img src="" alt="">
Expand multiple elements (*n)
You type:
div*2
p*3
img*2
You get:
<div></div><div></div>
<p></p><p></p><p></p><p></p>
<img src="" alt=""><img src="" alt="">
Add Custom text in elements({})
You type:
p{Lorem ipsum}
a{Click me}
You get:
<p>
Lorem ipsum
</p>
<a href=“”>Click me</a>
Element nesting (>) child nesting
You type:
ul>li
div>p
You get:
<ul>
<li></li>
</ul>
<div>
<p></p>
</div>
Element nesting (+) siblings nesting
You type:
div+div>p+span
You get:
<div></div>
<div>
<p></p>
<span></span>
</div>
Same Level as second div
Same Level as the p element
Element nesting (^) climb up
You type:
div>p>span^span
You get:
<div>
<p>
<span></span>
</p>
<span></span>
</div>
Level 2 nesting Back to Level 1
Element nesting (^) climb up
You type:
div>p>span^^span
You get:
<div>
<p>
<span></span>
</p>
</div>
<span></span>
Level 2 nesting
Outside of nesting
Attributs
Id attribute:
div#header
class attribute
div.someHeader
custom attribute
div[name = “theHead”]
<div id=“header”>
</div>
<div class=“someHeader”>
</div>
<div name=“theHead”>
</div>