A cool plug-in that can greatly speed up your HTML & CSS workflow. It's the essential toolkit for web-developers. It's previously known as Zen Coding.
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
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.
In many editors (such as Eclipse, Sublime Text 2, Espresso etc.) plugins will also generate proper tabstop marks so you can quickly traverse between important places of generated code with the Tab key.
Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example. The abbreviation’s syntax looks like CSS selectors with a few extensions specific to code generation. So every web-developer already knows how to use it.
Here are some examples of HTML abbreviations. For more abbreviations, scroll down to furthur reading.
base
br
link:favicon
form
input:t
btn
<base href="" />
<br />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<form action=""></form>
<input type="text" name="" id="" />
<button></button>
To get the HTML 5 boilerplate, you can simply type html:5.
html:5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
You can use > operator to nest elements inside each other.
header>nav>ul>li>a
<header>
<nav>
<ul>
<li><a href="|"></a></li>
</ul>
</nav>
</header>
Use + operator to place elements near each other, on the same level.
h1+div+p
<h1></h1>
<div></div>
<p></p>
With ^ operator, you can climb one level up the tree and change context where following elements should appear.
You can climb up as many levels you desire with ^ operator.
header+section>h2+p^footer
<header></header>
<section>
<h2></h2>
<p></p>
</section>
<footer></footer>
With * operator you can define how many times element should be outputted.
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations. You can even have a group within a group.
header+(nav>ul>li*2>a)+footer
<header></header>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
<footer></footer>
In CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element. You can also use [attr] notation (as in CSS) to add custom attributes to your element.
img[title="One"]
div#header+div.page+div#footer
<img src="|" alt="" title="One">
<div id="header"></div>
<div class="page"></div>
<div id="footer"></div>
With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element.
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
You can use curly braces to add text to element.
a{Click Me}
a{Click $}*3
<a href="|">Click Me</a>
<a href="">Click 1</a>
<a href="">Click 2</a>
<a href="">Click 3</a>
Lorem Ipsum is dummy text. lorem is not just a normal snippet — it’s actually a generator. Every time you expand it, it will generate a 30-words dummy text, splitted into a few sentences. You can specify how many words should be generated right in the abbreviation. For example, lorem100 will generate a 100-words dummy text.
lorem15
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia consequuntur enim minus ut libero veniam!
For CSS syntax, Emmet has a lot of predefined snippets for properties. For example, you can expand m abbreviation to get margin: ; snippet. But you don’t want just margin property, you want to specify a value for this property. So you have to manually type, let’s say, 10px. Emmet can greatly optimize your workflow here: you can inject value directly into abbreviation. To get margin: 10px; you can simply expand the m10 abbreviation. Want multiple values? Use a hypen to separate them: m10-20 expands to margin: 10px 20px.
You'll find there are too many CSS snippets to remember. To make CSS writing a bit easier, Emmet implement fuzzy search logic for CSS snippets: every time you enter unknown abbreviation, Emmet will try to find a closest snippet definition. For example, instead of writing ov:h (overflow: hidden;) abbreviation, you can write ov-h, ovh or even oh.
Here are some examples of CSS abbreviations. For more abbreviations, scroll down to furthur reading.
m
ml
ml50
m50-20
bgc
c#4f
fz20
w50p
margin: ;
margin-left: ;
margin-left: 50px;
margin: 50px 20px;
background-color: #FFF;
color: #4f4f4f;
font-size: 20px;
width: 50%;
Emmet’s CSS resolver has a nice feature that can greatly improve your CSS3 experience. Every time you precede CSS property or its abbreviation with a hyphen, Emmet automatically creates vendor-prefixed copies of this property. Now you can type on all lines at once. Also, it actually works without preceding with a hyphen, and produces the same result. Sometime it works without including the colon.
-bdrs:
-webkit-border-radius: |;
-moz-border-radius: |;
border-radius: |;
Now let's try adding vendor prefixes to the transform property.
trf
-webkit-transform: |;
-moz-transform: |;
-ms-transform: |;
-o-transform: |;
transform: |;
Adding vendor prefixes to the transition property is a nice feature. After you hit the tab key, it will automatically highlight the word prop on all lines. Now you can change it to whatever CSS property you desire. Hit tab again and it will do the same for the time.
trs-
-webkit-transition: prop time;
-moz-transition: prop time;
-ms-transition: prop time;
-o-transition: prop time;
transition: prop time;
Adding vendor prefixes to the box-shadow property is easy to implement, as you can see in the example below.
bxsh2px4px5px#000
-webkit-box-shadow: 2px 4px 5px #000;
-moz-box-shadow: 2px 4px 5px #000;
box-shadow: 2px 4px 5px #000;
You know how hard it can be to write a CSS gradient for all the vendor prefixes. Emmet has a CSS3 Gradient Generator that can do all the hard work for you.
lg(red, blue)
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background-image: -webkit-linear-gradient(red, blue);
background-image: -moz-linear-gradient(red, blue);
background-image: -o-linear-gradient(red, blue);
background-image: linear-gradient(red, blue);
Run "Package Control: Install Package" command. Mac: ⌘+shift+p. Win: ctrl+shift+p. Just type the word install or package and click the first result given.
Find and install Emmet plugin. Just type the word emmet and click the first result given.
Restart Sublime Text (if required). You can now start improving your workflow.
