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
Emmet
emmet on c9
- 1,112