Introduction to emmet

super quick fast html & css with emmet

Fast HTML/CSS with emmet

  • Installing emmet
  • Cool, what is emmet?
  • emmet syntax beat down
  • emmet HTML abbreviations
  • emmet Lorem Ipsum generator
  • CSS completion

Installing emmet

apm install emmet

With cursor at the last curly brace press "tab" on your keyboard to expand abbreviation

Behold emmet Power

In the editor save index.html 

#page>div.logo+ul#navigation>li*5>a{Item $}

In the editor, undo. Should see:

#page>div.logo+ul#navigation>li*5>a{Item $}

Move cursor to end of "#page" and press tab on keyboard to expand

emmet #, >, .

In the editor, undo; add:

expand abbreviation using tab

#page

In editor, delete down to:

What does the hash do? With no element what does emmet do? Where does cursor go?

#page>div.logo

What does the > do?

What does the dot do?

emmet +, *, $, []

In the editor, expand this abbreviation

#page>div.logo+ul#navigation

In editor, expand this abbreviation

What does the + do? 

#page>div.logo+ul#navigation>li*5

What does the * do?

In the editor, expand this abbreviation

#page>div.logo+ul#navigation>li*5>a[href=#$]

What does the $ do?

What does the [] do?

emmet {}, lorem

In the editor, expand this abbreviation

#page>div.logo+ul#navigation>li*5>a[href=#$]{Item $}

In editor, expand this abbreviation

What does {} do? 

p>lorem

What does just "lorem" do?

In the editor, expand these abbreviations

p>lorem15

What does the lorem15 do?

p>lorem*15

What does the lorem*25 do?

emmet css m, p

Create styles.css

#page {
      
}

In styles.css, add a selector

#page {
 m10p     
}

In styles.css, add then expand

What does the m do?

What does the p do?

emmet css mt, e

#page {
  mt10e    
}

In styles.css, add then expand

What does the mt do?

What does the e do?

There are over 200 abbreviations in the emmet CSS tool

whoa... is there a cheat?

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

My experience: 1 abbrevation per week = amazing amount of increased productivity

emmet css m, p

In project navigator, create styles.css

#page {
      
}

In styles.css, add a selector

#page {
 m10p     
}

In styles.css, add then expand

What does the m do?

What does the p do?

html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}^^^+div#content>h1+p*4^div#sidebar>ul>li*5^^div#footer

The Page You Want:

Emmet Build Page Play: Add, preview, undo

Preview index.html

Starting with a blank page add and expand:

html:5

Undo; add more emmet and expand:

html:5>div#wrapper

Preview index.html

Iterate until done!

Emmet

By Ric McLaughlin