Emmet Quick Start

Scott Blinch

Front End Web Developer,

Race Roster

    @scottblinch

What is Emmet?

  • Quickly build out HTML using abbreviations & CSS selectors
  • Quickly build out CSS using abbreviations
  • Use and customize pre-existing snippets or create your own

Getting started

  • Comes included in *Storm and some other editors
  • Also comes included in online editors like CodePen and JSFiddle
  • Use IDE plugin managers or emmet.io/download for everything else
  • Type a thing and hit tab!
  • Note: there may be differences between editors

HTML

# Children

div>span

# Result
<div><span></span></div>



# Siblings

div+span

# Result

<div></div>
<span></span>



# Multiplication

div*3

<div></div>
<div></div>
<div></div>
# Climb up

section>h2^section

# Result
<section>
	<h2></h2>
</section>
<section></section>



# Grouping

dl>(dt+dd)*2

# Result

<dl>
	<dt></dt>
	<dd></dd>
	<dt></dt>
	<dd></dd>
</dl>

More HTML

# IDs

div#neato

# Result

<div id="neato"></div>



# Classes

div.one-class.another-class

# Result

<div class="one-class another-class"></div>



# Other attributes

div[data-test="1"][aria-label="Beep"]

# Result

<div data-test="1" aria-label="Beep"></div>
# Text

h1{Emmet? I hardly knew it}

# Result

<h1>Emmet? I hardly knew it</h1>



# Item numbering

ol>li{Mambo number $}*5

# Result

<ol>
	<li>Mambo number 1</li>
	<li>Mambo number 2</li>
	<li>Mambo number 3</li>
	<li>Mambo number 4</li>
	<li>Mambo number 5</li>
</ol>

# Snippets

!, html:xml, etc
a:link, a:mail
input:text, input:number, etc
link:css
form:post
lorem

Going>crazy*2

# Thing

div>(header>ul>li*2>a)+footer>p

# Result

<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p></p>
	</footer>
</div>
# Thing

table>thead>tr>th[scope="col"]*2^^tbody>(tr>td*2)*2

# Result

<table>
	<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col"></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
</table>

CSS

w

width: |;



h

height: |;



w25

width: 25px;



maw100%

max-width: 100%;


mih10

min-height: 10px;

p5/10

padding: 5px 10px;



m0/a

margin: 0 auto;



bd0!

border: 0 !important;



c#bada55

color: #bada55;



vat

vertical-align: top;
fx

flex: |;



jc:c

justify-content: center;



trf:r10deg

transform: rotate(10deg);



dib

display: inline-block;



bgsz

background-size: cover;

Resources

Made with Slides.com