Emmet
Emmet — the essential toolkit for web-developers
First of all, Very Very Happy New Year To You And Your Family.
Let's talk about the topic, I'm using Emmet about a year ...and I'll be using it because it's just awesome. Emmet official website.
What is Emmet?
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
This is written in Emmet's official site. So it's totally perfect defination of it :).
Why Emmet?
- Actually Emmet previously known as Zen Coding. I'm sure some of you've heard about it.
- Emmet is robust, faster and user-friendly Toolkit/Plugin.
- With Emmet you can write html with css-like way. Don't get it? Okay..
Example: you write ul>li
will be expanded to....
<ul>
<li></li>
</ul>
- Written in Emmet official Docs:
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
- We can also say that we're just writing abbreviations.
Where is Emmet supported/available?
It's available in many native apps and many web apps. Some of those are ...
Native apps:
Sublime Text
Coda
TextMate
Brackets
Adobe Dreamweaver etc...
Web apps:
CodePen
JSFiddle
JS Bin
CSSDeck etc...
You can go directly to this page for more information on it.
- Emmet is really helpful when we want to write many lines. Like If we want 5 <nav>....in which a <ul> contains 5 <li> with <a>, Then we've to just write nav*5>ul>li*5>a which'll be expanded to...
<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>
<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>
<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>
<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>
<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>
- We're writing similar to CSS Selectors. Right !! - You can also do it with html-preprocessor like with the help of Haml. Above example can be written in Haml as...
-(1..5).each do |i|
%nav
%ul
-(1..5).each do |i|
%li
%a
- It will give the same output.
There are many Features of Emmet.
Expand Abbreviation
Match Tag Pair
Go to Matching Pair
Wrap with Abbreviation
Go to Edit Point
Select Item
Toggle Comment
Split/Join Tag
Remove Tag
Merge Lines
Update Image Size
Evaluate Math Expression
Increment/Decrement Number
Reflect CSS Value
Encode/Decode Image to data:URL
From Emmet Docs
- Below are some examples of these features.
- Remember Emmet is genius If you write simple .class It'll be expanded to <div class="class"></div> but if you write ul>.link-$*5 then it'll be expanded to...
<ul>
<li class="link-1"></li>
<li class="link-2"></li>
<li class="link-3"></li>
<li class="link-4"></li>
<li class="link-5"></li>
</ul>
- So, It knows that li comes inside ul. Remember you've to hit Tab after all the examples.
Examples:
html-5 will be expanded to...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
(header>ul#nav>li*4>a{link-$})+(#content>h1{Hi}) will be expanded to...
<header>
<ul id="nav">
<li><a href="">link-1</a></li>
<li><a href="">link-2</a></li>
<li><a href="">link-3</a></li>
<li><a href="">link-4</a></li>
</ul>
</header>
<div id="content">
<h1>Hi</h1>
</div>
- Emmet also works for CSS..
bg will be background: ;
ovh will be overflow: hidden;
tac will be text-align: center;
p0 will be padding: 0;
bsh will be like this...
-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
- What if we want to write many properties at a time...
p0+m0+mt1em+pl-1em+f++fwb+fsi will be expanded to...
padding: 0;
margin: 0;
margin-top: 1em;
padding-left: -1em;
font: 1em Arial,sans-serif;
font-weight: bold;
font-style: italic;
p0!+m0!+dib will be expanded to...
padding: 0 !important;
margin: 0 !important;
display: inline-block;
lg(left, #fc0 10%, red) will be expanded to...
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.1, #fc0), to(red));
background-image: -webkit-linear-gradient(left, #fc0 10%, red);
background-image: -moz-linear-gradient(left, #fc0 10%, red);
background-image: -o-linear-gradient(left, #fc0 10%, red);
background-image: linear-gradient(left, #fc0 10%, red);
- Final example:
html-5((header>nav>ul>li*5>a{link-$})+(div.content>h1{Hi}+p{Hello})+footer{It's footer})will be expanded to...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="">link-1</a></li>
<li><a href="">link-2</a></li>
<li><a href="">link-3</a></li>
<li><a href="">link-4</a></li>
<li><a href="">link-5</a></li>
</ul>
</nav>
</header>
<div class="content">
<h1>Hi</h1>
<p>Hello</p>
</div>
<footer>It's footer</footer>
</body>
</html>
Cheat Sheet
Final Words
Emmet is just awesome. We like to write fastly, So Emmet is the tool to help us. Use it and comment about your experience and also comment if you found anything better or anything new or like that. Thanks.