First glance to Emmet

emmet_logotype

Emmet(previously called Zen Coding) is a set of tools, normally added to the IDE or the text editor by using a third party plugin or extension that allow web developers to speed up writing HTML and CSS. Because Emmet is an open source project, you’ll find a plenty of open source plugins that you can install for your favorite text editor like Notepad++, Sublime Text, Eclipse and even Visual Studio.

For the developers who have some knowledge in C#, Emmet is very similar to C# snippets that are built-in Visual Studio IDE like

  • ctor for creating a constructor to the class file
  • prop for adding a class property

The only difference between Emmet syntax and the C# Snippet is that Emmet is based on: CSS Selectors so if you’re a web developer and you’re familiar with the concept you’ll find working with it too much FUN.

In this blog post I’ll try to show you the syntax of Emmet for HTML, In order to do that I’m going to use Visual Studio IDE and because by default VS doesn’t provide this feature we’re going to need a third-part extension like web essentials.

HTML Elements

If you want to generate an HTML element just write its name and hit Tab

div

will generate

<div></div>
IDs and Classes

In HTML and CSS, the id of an element is always referred to by this syntax elm#id and the class is referred to by this syntax elm.class

div#article.main-container

will generate

<div id="article" class="main-container"></div>
Custom HTML Attributes

Any attributes other than id and class is referred to by the [attr] notation

img[src="http://paymentmagnates.com/wp-content/uploads/2014/04/twitter-icon.png" alt="Official Twitter Icon"]

will output

<img src="http://paymentmagnates.com/wp-content/uploads/2014/04/twitter-icon.png" alt="Official Twitter Icon" />
Nesting Elements

Nesting elements are represented by the CSS selector >

ul>li>p>span

will generate

<ul>
    <li>
        <p>
            <span></span>
        </p>
    </li>
</ul>
Sibling Elements

The + is used to represent sibling elements

div>p+ul>li

will output

<div>
    <p></p>
    <ul>
        <li></li>
    </ul>
</div>
Element Text content

Use {} notation when you want to add some text content to an HTML element

a[href="http://www.google.com/"]{google.com}

will output

<a href="http://www.google.com/">google.com</a>
Multiple HTML elements

You can use the * operator to generate multiple HTML element

ul>li*4

will output

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Group multiple HTML elements

Use the ( ) notation if you want to group multiple elements together

div.container>(header>nav>ul>li*2>a)+footer>p

will output

<div class="container">
    <header>
        <nav>
            <ul>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </nav>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
Item numbering

The $ operator is used to number the element starting from 1

ul>li{item$}*4

will output

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>

using multiple $ will pad the number with zeros

ul>li{item$$$}*4

will output

<ul>
    <li>item001</li>
    <li>item002</li>
    <li>item003</li>
    <li>item004</li>
</ul>
Fill in HTML elements with “Lorem Ipsum” Text

If you want to fill in the generated HTML element with a Lorem Ipsum Text for testing purposing just use the lorem abbreviation

ul>li.item$>lorem

will output

<ul>
    <li class="item1">Tincidunt integer eu augue augue nunc elit dolor, luctus placerat scelerisque euismod, iaculis eu lacus nunc mi elit, vehicula ut laoreet ac, aliquam sit amet justo nunc tempor, metus vel.</li>
    <li class="item2">Placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante.</li>
</ul> 

You can customize the length of the generated lorem text like this

ul>li.item$>lorem5

will output

<ul>
    <li class="item1">Consectetur adipiscing elit fusce vel.</li>
    <li class="item2">Sapien elit in malesuada semper.</li>
</ul>   

Summary

Emmet is a very handy set of tools that, if you master it, will save you a lot of time and improve your productivity. If you really like Emmet and think that you can really improve it this is the official repository in Github where you can find many open source plugins for the most used text editor https://github.com/emmetio

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s