Emmet Tools for Web Developers

1. EmmetTools for Web Developers

2. Emmet for Sublime • “Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow” • Adds tons of shortcuts to make writing html very fast • emmet.io

3. Emmet for Sublime Available for many editors • Sublime • Eclipse • Coda • Notepad++ • Dreamweaver • Brackets • Codepen • JsFiddle • And more

4. Emmet for Sublime How does it work? • You simply type in a shortcut • div • Then press tab, it becomes • <div></div>

5. Emmet for Sublime You can even do multiples • div*3 becomes • <div></div> • <div></div> • <div></div>

6. Emmet for Sublime You can add a class • div.this becomes • <div class='this'></div> You can add an id too • div#this becomes • <div id='this'></div>

7. Emmet for Sublime These can be combined to be even more complex • div.these*3 becomes • <div class='these'></div> • <div class='these'></div> • <div class='these'></div>

8. Emmet for Sublime Use > to designate child elements • ul>li#item*3 becomes • <ul> • <li id='item'></li> • <li id='item'></li> • <li id='item'></li> • </ul>

9. Emmet for Sublime But wait, the ids are the same! We can Increment using $ • ul>li#item$*3 becomes • <ul> • <li id='item1'></li> • <li id='item2'></li> • <li id='item3'></li> • </ul>

10. Emmet for Sublime We can put inner text using {} • p{This is text.} becomes • <p>This is text.</p> We can also do attributes with [] • img[src='image.jpg'] becomes • <img src='image.jpg'></img>

11. Emmet for Sublime You can make siblings with the + • div>h1+ul>li*3 becomes • <div> • <h1></h1> • <ul> • <li></li> • <li></li> • <li></li> • </ul> • </div>

12. Emmet for Sublime Sublime also has a feature where you can leave off the tag and it assumes which you want • .this becomes • <div class='this'></div> • ul>.this*3 becomes • <ul> • <li class='this'> • <li class='this'> • <li class='this'> • </ul>

13. Emmet for Sublime When building a table, it assumes the row AND data cell • table>.row>.col becomes • <table> • <tr class="row"> • <td class="col"></td> • </tr> • </table>

14. Emmet for Sublime Handy Shortcuts • ! or doc creates a full html5 skeleton • input:radio creates a full radio input button • link:css creates a link tag with the css info • meta:utf creates a meta tag with the full utf info • meta:vp creates a meta tag with viewport info • form:post creates a POST form

15. Emmet for Sublime Css is handled a bit differently because it would be hard to remember all of the shortcuts for css attributes (although they still have them if you want to use them). Instead, they have something called fuzzy search. The way it works is that you can type whatever you like, and emmet guesses which you meant. If you wanted overflow:hidden; you could type ovh, ov:h, ov-h, or even oh.

16. Emmet for Sublime The full list of commands is available at http://docs.emmet.io/cheat-sheet/

17. Emmet for Sublime Questions Write a valid line of Emmet code for an unordered list with three list items, each having an incremental id (item1, item 2, item 3). How can you create the skeleton of a web page quickly using one character in Emmet? What is 'fuzzy search', and why is it useful? List three editors that Emmet is available for.