Embed Size (px)
Citation preview
Kicking HTML in the Teeth with EmmetYes. HTML has teeth. And they are ripe for the kicking.
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
Agenda
What is Emmet? Examples Demo Resources
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.
Examples
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>
Abbreviations
! <!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8" /> <title>Document</title></head><body></body></html>
Type then hit TAB
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>
Child Elements with >
nav>ul>li
<nav> <ul> <li></li> </ul></nav>
Type then hit TAB
Sibling Elements with +
div+p+bq
<div></div><p></p><blockquote></blockquote>
Type then hit TAB
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
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
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
Demo
Demo Example
!!!+html[lang="en"]>(head>meta:utf+title{My Emmet Page!}+link[href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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
Resources
VS Codecode.visualstudio.com
Cheat Sheet docs.emmet.io/cheat-sheet
Emmetemmet.io
Email: [email protected]
