Emmet (formerly Zen Code) Examples

Share httpJunkie.com on..
Tweet about this on TwitterShare on FacebookShare on Google+Share on TumblrEmail this to someone

First I just want to note that Emmet was previously called Zen Coding, to be honest I had heard of both, but when I went to write this article I did so because I could not find any examples of Zen Coding. The reason is because I wasn’t searching for Emmet. SO if that is your problem as well, now you know. This article is short and sweet and then I link to an Emmet Cheat Sheet!

The following examples are for my personal reference only, if they help you out in what you are trying to do or in your learning of Emmet’s syntax, well that’s great. I use primarily use Foundation 5 and AngularJS for a lot of my projects so the following examples will be syntax that give me back results that are compatible for those technologies. You could easily apply these examples to any framework the main thing that changes in your case would just be the class names. Not the Emmet concepts.

The concepts

The first thing we want to learn is how to add basic classes and Id’s in Emmet. Just as in CSS, when we want to specify a class attribute we use the DOT (.) and to specify an ID attribute we use the HASH (#). To insert text inside that button we use curly braces. So if I want to create a Foundation button with the class names of “tiny” and “button” and the inner text of Submit, we would do the following:

a.tiny.button>{Submit}

By typing that code and pressing TAB you will get the following scaffolded HTML.

<a class="tiny button" href="">Submit</a>

Just as above, in each of the examples I will state the emmet syntax and below that will be the actual Emmet scaffolded code.

Lt’s create and Anchor link with a Foundation button using Angular’s ui-router and ui-sref state value with inner text of a Foundation Icon followed by the text “BACK”

a.tiny.button[ui-sref="productList"]>i.fi-arrow-left>{Back}
<a class="tiny button" ui-sref="productList" href="">
    <i class="fi-arrow-left">Back</i>
</a>

The things to remember when coding in Emmet are that tags are represented just as we would assume, and anchor is an “a” a div would be “div” that’s easy enough. then we append the class name onto that tag with a dot concatenator and another dot for every additional class name. If we want an attribute (something other than class and a value for it, we use brackets with a key value pair. If we would like to nest another tag within we do that using the Greater than carat, followed by the item you will be nesting. In this case the first thing we nest is an i tag. Again we specify the class name and instead of nesting a tag, we want to nest actual text inside the i tag. To specify a text value we use our curly braces.

One thing I would like to note is tht if we wanted to use an “id” instead of a class, we could have used the HASH sign instead of the DOT. And if we wanted the text “BACK” text to be next to (sibling of) the i tag instead of inside of it we could have used the PLUS sign instead of the GREATER THAN sign.

So you can use parenthesis as a way of grouping structures and the curly braces allow us to insert plain text, so let’s learn what we have used so far to figure out how to get an entire html structure. This is not really practical as all editors and IDE’s have a shortcut for generating the HTML structure, but it can be a good exercise.

So let’s think this through, we will have an `html` tag that will enclose everything else and inside we will have a head section that contains a title `(head>title)` and then we will have as sibling to the head area a `>body` but we will use the carat sign, because we had wrapped the head and title section in parenthesis. One more thing is that we want to prepopulate the title with some text so we will add `>{Some new page}` into the parenthesis code we just used. All together it should look something like this:

html>(head>title>{My new page})>body

Let’s break that down with some space in between to digest it a little better:

html> (head>title >{My new title text}) >body

Breaking those little digestible pieces apart makes it easier to understand how it works, and hopefully you can think of a long line of Emmet code into these little chunks to help you write it. Here is the output:

<html>
<head>
    <title>My new title text</title>
</head>
<body>
	
</body>
</html>

I have one more thing I would like to add to our little sample and that is the html5 doctype, it’s actually real easy and gives us some additional code we didn’t have, plus like I said the IDE’s and editors usually have a way to generate this basic html structure, so the reason I would use Emmet instead would be to put some actual content into the scaffolded structure that we can’t get from the editor check it out, I am going to write some code and show what it generated:

html:5>(head>title>{Solving World Hunger})>body>(h1>{Headline})+(p>{paragraph text})+(h2>{Headline})+(p>{paragraph text})
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <head>
        <title>Solving World Hunger</title>
    </head>
    <body>
        <h1>Headline</h1>
        <p>paragraph text</p>
        <h2>Headline</h2>
        <p>paragraph text</p>
    </body>
</body>
</html>

Now the reason I show you this long form way is so that you have some practice with Emmet, yagain youmay want to be specific about what it adds to the title and body and some people save little Emmet code snippets to use over and over, so now you know how to do that, but I do want to mention that if you just do:

html:5

and press TAB you will get:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
	
</body>
</html>

Now, if you have made it through this entire article, first off I appreciate you reading my blog, but it also means you are very interested in learning more about Emmet and I want to share with you a wonderful cheat sheet that will give you much more power than this little article, check it out at docs.emmet.io/cheat-sheet

Now for some shortcuts, I’m just going to show examples and their scaffolded code. I’m not going to explain them other than it’s implicit syntax, so instead of writing something like ul>li.classname you could just do ul>.classname and Emmet will know what that you are trying to shortcut to the li‘s classname:

Shortcuts

<!--if no parent is specified div is default-->
.className
<div class="className"></div>

<!--this works for ul or li-->
ul>.className
<ul>
    <li class="className"></li>
</ul>

<!--this works for th or li-->
table>.className>{someinfo}
<table>
    <tr class="className">someinfo</tr>
</table>

<!--this works for table, tr, tbody, thead, tfoot, etc..-->
table>.className>.className
<table>
    <tr class="className">
        <td class="className"></td>
    </tr>
</table>

<!--watch where your cursor is placed afterwards, I like it!-->
select>.optionClass>{whatever text}
<select name="" id="">
    <option class="optionClass">whatever text</option>
</select>

em>.className{some text}
<em><span class="className">some text</span></em>

<!--When the child tags is not obvious, it doesn't work-->
dl>.className
<dl>
    <div class="className"></div>
</dl>

<!--insert an id and class-->
form#search.wide
<form action="" id="search" class="wide"></form>

<!--obvious css page-->
link:css
<!--notice how the filename is selected afterwards-->
<link rel="stylesheet" href="style.css">

<!--meta viewport!-->
meta:vp
<!--awesome!->
<meta name="viewport" content="width=device-width, user-scalable=no, 
      initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<!--source media!-->
src:m
<source media="(min-width: )" srcset="">

<!--input hidden!-->
input:h
<input type="hidden" name="">

<!--input text!-->
input:t
<input type="text" name="" id="">

tarea
<textarea name="" id="" cols="30" rows="10"></textarea>

We could be here all day, please check the docs.emmet.io/cheat-sheet for additional information! Emmet ids a great tool and is learned fast, because it makes sense.

Thanks for reading!

Leave a Reply

You must be logged in to post a comment.