Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Kicking HTML in the Teeth with Emmet

228 views

Published on

Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.

Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimized for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.

In this lightning round Stacy will introduce you to the basics of Emmet so that you too can kick HTML square in the teeth.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Kicking HTML in the Teeth with Emmet

  1. 1. Kicking HTML in the Teeth with Emmet Yes. HTML has teeth. And they are ripe for the kicking.
  2. 2. About Me  Technical Product Manager for Prime Occupational Medicine  Over 10 years in software development and design  Certifications:  Professional Scrum Master (PSM-I)  Distinguished Toastmaster (DTM)  Numerous Microsoft certifications in .NET development and ALM  Awards:  Microsoft MVP, 2009 - 2014
  3. 3. We have been #RebuiltByYou. http://rebuiltbyyou.com
  4. 4. Agenda  What is Emmet?  Examples  Demo  Resources
  5. 5. What is Emmet?  Created in 2009 by Sergey Chikuyonok  Originally called “Zen Coding” but renamed to Emmet in 2012  Available as a plugin for most text-editors of choice:  Visual Studio, via Web Essentials  Visual Studio Code  Sublime Text  Notepad++ Emmet is a language of CSS-like expressions that can be dynamically parsed to produce output based on what you type.
  6. 6. Examples
  7. 7. Elements p <p></p> a <a href=""></a> link <link rel="stylesheet" href="" /> Type then hit TAB script <link rel="stylesheet" href="" /> div <div></div>
  8. 8. Abbreviations ! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> </body> </html> Type then hit TAB
  9. 9. Attributes input#firstname <input type="text" id="firstname"> form#search.wide <form id="search" class="wide"></form> p.c1.c2.c3 <p class="c1 c2 c3"></p> Type then hit TAB p[data-type=int] <p data-type="int"></p> div.nav <div class="nav"></div> a{Click me!} <a href="">Click me!</a>
  10. 10. Child Elements with > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Type then hit TAB
  11. 11. Sibling Elements with + div+p+bq <div></div> <p></p> <blockquote></blockquote> Type then hit TAB
  12. 12. Climb-up with ^ div+div>p>span+em^^bq <div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote> Type then hit TAB
  13. 13. Multiply and Number with * and $ ul>li{Item $}*5 <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> Type then hit TAB
  14. 14. Grouping with () 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> Type then hit TAB
  15. 15. Demo
  16. 16. Demo Example !!!+html[lang="en"]>(head>meta:utf+title{My Emmet Page!}+link[href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstr ap.min.css]+link[href=https://maxcdn.bootstrapcdn.com/font- awesome/4.6.3/css/font- awesome.min.css]+script[src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7 /js/bootstrap.min.js])+body>(nav.navbar.navbar-inverse.navbar-fixed- top>.container>.navbar-header>button.navbar-toggle.collapsed[type=button data-toggle=collapse data-target=#navbar-collapse aria-expanded=false]>span.sr- only{Toggle navigation}+span.icon-bar*3^a.navbar-brand{Emmet Example}^.collapse.navbar-collapse#navbar-collapse>ul.nav.navbar- nav>li.active>a{Home}^(li>a{Link $})*2)+(.jumbotron>.container>h1{Hello, World!}+p>lorem^p>a.btn.btn-primary.btn-lg{Learn more »})+(.container>.row>(.col-md-4>h2{Heading $}+p>lorem^p>a.btn.btn- default{View details »})*3) Type then hit TAB
  17. 17. Resources VS Code code.visualstudio.com Cheat Sheet docs.emmet.io/cheat-sheet Emmet emmet.io Email: vicknairs@primeoccmed.com

×