Categories
Tips and Tricks

Emmet for faster HTML and CSS coding

Let’s Start High Speed Coding!

In 2009, Sergey Chikuyonok started project Zen Coding, later (2012) rename as Emmet, one of the most popular free plugin for text editors to write HTML and CSS code faster. Emmet is web developer toolkit written in pure JavaScript and works across different platforms.  It saves time, save our time from lot of typing and makes writing code like fun.

Emmet is collection of abbreviations that expand input abbreviation into valid HTML/CSS. Once we get used to the Emmet syntax, it will change the way of writing HTML and CSS code. When you use it in our workflow it will definitely boost up productivity so let start using it.

“Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:” Emmet web site

 About Support

Emmett is used in all major text editors. Below I have listed some of the code editors that support Emmet.

  • Sublime Text (cross-platform)
  • Eclipse/Aptana(cross-platform)
  • TextMate (OS X)
  • Coda(OS X)
  • Espresso(OS X)
  • Chocolat(OS X)
  • Komodo Edit(cross-platform)
  • Notepad++(Windows)
  • PSPad(Windows)
  • Textarea(browser based, cross-platform)
  • CodeMirror(browser based, cross-platform)
  • Brackets(cross-platform)
  • NetBeans(cross-platform)
  • Adobe Dreamweaver(Windows, OSX)

 Online Support

  • JSFiddle (http://jsfiddle.net/)
  • JS Bin (http://jsbin.com/)
  • CodePen(http://codepen.io/)
  • ICEcoder (https://icecoder.net/)
  • Divshot(https://divshot.com/)
  • Codio (https://codio.com/)
  • Codeanywhere(https://codeanywhere.com/)

Third-party support

Third party software may not support all Emmet features and actions.

  • SynWrite
  • WebStorm
  • PhpStorm
  • Vim
  • HTML-Kit
  • HippoEDIT
  • CodeLobster PHP Edition
  • TinyMCE
  • EverEdit
  • EditPlus
  • Emacs

To install plugin on favorite IDE of above list you can go through http://docs.emmet.io/ and follow the instruction.

Basic Emmet Element

Here I will discuss about use of some basic Emmet Element.

To make output in our favorite text editor simply type the abbreviation and hit the action key (TAB) or Ctrl+E.

Single element
div
<div> </div>

p

<p> </p>

img

<img src="" alt="">

 

Multiple elements (*n)
div*2
<div> </div>
<div> </div>

p*3

<p> </p>
<p> </p>
<p> </p>

 Add Custom text in elements({})

p{ Text demo}

<p>
    Text Demo
</p>

a{Click me}

<a href=””>Click me</a>
 Child Element :(>)

You can use > operator to nest elements inside each other:

ul>li

<ul>
     <li></li>
</ul>

div>p

<div>
  <p> </p>
</div>
 Sibling Element: (+)

You can use + operator to place elements near each other, on the same level:

h1+h2

<h1> </h1>
<h2> </h2>
 Climb-up Element: ^

With ^ operator, you can climb one level up the tree and change context where following elements should appear:

Div>p>span^span

<div></div>
   <p> 
      <span></span>
   </p>
<span></span>

You can use as many ^ operators as you like, each operator will move one level up:

div+div>p>span^^^span

<div></div>
<div><p><span></span></p></div>
<span></span>
 Grouping Element: ()

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:

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

<div>
<header>
  <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
  </ul>
</header>
<footer>
  <p></p>
</footer>
</div>

 Item numbering: $

With multiplication * operator you can repeat elements, but with $ you can number them.

ul>li.item$*5

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
For more detail

Emmet has provided a cheat sheet with all of the possible functions. http://docs.emmet.io/cheat-sheet/

Notes on abbreviation formatting

Use spaces between elements and operators, like this:

(header > ul.nav > li*5)+ footer

But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.

 

Some other HTML Examples

! or html:5

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

 

 

Conditional styles for Non IE Browsers

cc:noie

<!--[if !IE]> <!-->
<!--<![endif]-->

 

Lorem Text Generage in HTML

ul>lorem5.item$*5

<ul>
    <li class="item1">Lorem ipsum dolor sit amet.</li>
    <li class="item2">Earum cupiditate at molestiae officia!</li>
    <li class="item3">Tempore id sed consequatur quod.</li>
    <li class="item4">Necessitatibus aspernatur praesentium tempore molestias.</li>
    <li class="item5">Dolor dignissimos ab maiores veniam.</li>
</ul>

table+

<table>
    <tr>
        <td></td>
    </tr>
</table>

select+

<select name="" id="">
 <option value=""></option>]
</select>