Emmetism (n.):

A new religion for the modern era

(+ a beginner’s guide to Emmet shortcuts)

Chapter 1: Life Before Emmet (Typety-Type-Type)

Having spent the last 10 years of my life in Academia and Academic Publishing I moved to Toronto in May looking for a new challenge and hoping to kickstart a change of career with some super-fly new hard skills in Tech and Design.

This led me to Hackeryou. I started on the Design course which I loved and after grappling with Illustrator for 3 months I was hooked and eager to start learning how to move designs into the real/electronic world. I decided to apply for the full-time Front-End Development bootcamp.

I started out with absolutely no idea how to code anything so turned to the great universal mother Google for advice on how to complete the pre-coursework. I started working on Treehouse and for two weeks my dreams were filled with matrix style coding gibberish and my fingers worn down to nubs.

Determined to clear a path through the fog of p-tags, curly braces and exasperated comments that littered my poor sickly code I took an Introductory course at Hackeryou for a few weeks and was introduced to the idea of DRY and WET code:

DRY: Don’t Repeat Yourself

WET: We Enjoy Typing

and the reality of my situation captured by the catchy acronym below…

IDWTTABIDKHTS: I Don’t Want To Type Anymore But I Don’t Know How To Stop:(

(this may need some work before it goes viral)

Chapter 2: Life after Emmet: (a whole new world)

Imagine my delight when in my first week of bootcamp I learned that Emmet can do more that just rustle up a quick p-tag! On day one I witnessed the miracle of “.wrapper + tab” and choirs of angels emerged bugling from the clouds.

But the problem with shortcuts is that it’s easy to learn a couple, incorporate them into your coding routine and then totally forget about them when you get distracted by bigger shiner things. (change the case of text in MS Word anyone?… Shift+F3)

I realised it was time to take the plunge and get intimate with Emmet…

Chapter 3: Finally getting down and dirty with Emmet shortcuts

Here are some of the shortcuts I have found most useful in my brief time Subliming…

Shortcut + TAB:

Create Siblings: +

div+p+bq
<div></div> 
<p></p> 
<blockquote></blockquote>

Create Multiple elements: *x

ul*5
<li></li> 
<li></li> 
<li></li> 
<li></li> 
<li></li> 

Add sequential numbering: $

h$*5
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>

ul>li.item$*5
<ul> 
   <li class=”item1"></li> 
   <li class=”item2"></li> 
   <li class=”item3"></li> 
   <li class=”item4"></li> 
   <li class=”item5"></li> 
</ul>

Create an element with an ID: #id

(Note that #id creates a div element by default. When another element is required you need to specify the element before #id)

#header
<div id=”header”></div>

p#header
<p id="title"></p>

Create an element with a CLASS/CLASSES: .class

Note that .class creates a div element by default. When another element is required specify the element before .class

.title
<div class=”title”></div>

p.title
<p class="title"></p>

p.class1.class2.class3
<p class=”class1 class2 class3"></p>

Create an element with both a CLASS and an ID: element#ID.class

p#search.wide
<p id=”search” class=”wide”></p>

Create children: >

nav>ul>li
<nav>
  <ul>
    <li></li>
  </ul>
</nav>

Implied child type:

Certain elements have an implied child type associated with them (e.g. ul>li) meaning you do not have to specify the child type in the shortcut:

ul>.implied-child
<ul>
   <li class="implied-child"></li>
</ul>

And don’t forget…

CTRL/CMD + LEFT CLICK to input multiple cursors!

Further info:

If you want to really nerd out you can access the full cheat-sheet on the Emmet site here.

You can also learn how to customize Emmet here.