Download - Kicking HTML in the Teeth with Emmet

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

We have been #RebuiltByYou.http://rebuiltbyyou.com

http://rebuiltbyyou.com/

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 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]

https://code.visualstudio.com/

http://docs.emmet.io/cheat-sheet/

http://docs.emmet.io/cheat-sheet/

http://emmet.io/

mailto:[email protected]