Our Emmet Cheatsheet

The essential toolkit for web-developers

Emmet is a plugin for many text editors which aim to improves HTML & CSS workflow

HTML from CSS


Using abbreviations: emmet's synthaxe it 's an like CSS selectors with a few extensions specific to code generation

Abbreviations

Dynamic snippets


In running time each abbreviation is trasformed: by slightly change its name you get different result

Getting a different result

Emmet provide ultra-fast coding


We can quickly write bunch of code, wrap code with new tags quickly traverse and select important code parts and more"

Time is money

User matters


Users can easly add new snippets and fine-tune Emmet experience with just a Few JSON files

Files

Platform for tools's innovation


ImmersionEmmet source code recycled its modules to create our personnal and original actions

Originality

Highly portable


Emmet is written in pure js and works accross different platforms: web browser, Node.js, Microsoft WSH and Mozila Rhino

Here’s a typical example

The heart of the Emmet toolkit: Abbreviation

#page>div.logo+ul#navigation>li*5>a{Item $}

instead of

<div id="page">

<divequal"logo"></div>

<ul idequal"navigation">

<li><a hrefequal" ">Item 1</a></li>

<li><a hrefequal" ">Item 2</a></li>

<li><a hrefequal" ">Item 3</a></li>

<li><a hrefequal" ">Item 4</a></li>

<li><a hrefequal" ">Item 5</a></li>

</ul>

</div>

This example illustrate the power of emmet skills: a single key stroke remplaces all of those rows code

More, in editors like Sublime Text 2, Eclipse, Espresso inter alia, plugins can generate proper tabstop marks so you can quickly traverse between important places of generated code with the Tab key.


.com
We may find so many helpful tools

Emmet aims to makes developping process easier and faster. Here is the link for more details

Download plugin for your editor