Emmet for web developers

Posted by
Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: emmet.io
Emmet will save your valuable time,emmet supports many text editors and ide's.
Download emmet for your text editor --- http://emmet.io/download/
Let's try few emmet snippets, to run these snippets hit tab
  • Html
!
This will produce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
  • div ul and li
div>ul>li
output
<div>
<ul>
<li></li>
</ul>
</div>
  • If you need 5 li simply type
div>ul>li*5
  • ul with 5 list items
ul>li.item$*5
output
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
  • div class,label with a input
.form-group>label+input.form-control
output
<div class="form-group">
<label for=""></label>
<input type="text" class="form-control">
</div>
  • simple href
a{Click me}
output
<a href="">Click me</a>
These are few examples, Refer emmet documentation for more cool stuff
http://docs.emmet.io/
Resources
Hope you learn something new, Thank you for Reading:)

Comments

Post a Comment