ZenCoding becomes Emmet
Emmet (formerly Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow. Last year my blogpost gives insight on Zen Coding with Notepad++. Things have changed since last year and for better. I haved ditched Notepad++ for SublimeText2 and ZenCoding project is changed to Emmet project. Emmet is developed and optimised for web-developers whose workflow depends on HTML,XML,XSL and CSS, but can be used with programming languages too. Emmet plugins are currently available for the following editors:
Eclipse/Aptana,Sublime Text 2,TextMate 1.x,Coda 1.6 and 2.x,Espresso,Chocolat,Komodo Edit/IDE,Notepad++,PSPad,CodeMirror2/3,Brackets
Head over to the Emmit.io webpage and follow the instructions for the specifics on the install for your editor.
Here in I present a sneak preview of the awesomeness of Emmit in the context on SublimeText 2.
Open a new Document and save it as yourfilename.html
1 | html:5 |
and hit the TAB or use the hotkey Ctrl+E , it outputs the following code:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> |
Hang on we are just getting started here. Now type in the following:
1 2 | div#content>form:get>input:text[name="userName"]#usrName |
Hit Ctrl+E, see the output
1 2 3 | <div id="content"> <form action="" method="get"><input type="text" name="userName" id="usrName" /></form> </div> |
By now you should be jumping in joy, for those who need to see more..here is another example
1 2 | ul>li.listItems$*5 |
Hit Ctrl+E, see the output
1 2 3 4 5 6 7 8 | <ul> <li class="listItems1"></li> <li class="listItems2"></li> <li class="listItems3"></li> <li class="listItems4"></li> <li class="listItems5"></li> </ul> |
Links:
Emmet.io
Emmet.io on GitHub
Notepad++
SublimeText2
~Rushi