Zen Coding with Emmet – A real time saver

Emmet

If you have never heard before of the term “Zen Coding” or the plugin “Emmet” (for various text editors, including your own website’s text areas using JavaScript), then you are almost one step away from saving tons and tons of hours while coding a web project in your favourite text editor.

How could I define it?

It is easy to describe, sounds so simple once you catch the drift but I can only imagine the creativity and innovative thinking that the creators had to have to come out with this marvelous tool. It is basically based on snippets, using algorithms to make it more intelligent, and it also relies on math to create multiple elements.

It looks like CSS syntax, with parenthesis to group elements, brackets to set attribute values and curly braces to display content with spaces and possible syntax sensitive information.

Click here to skip the rigmarole and install it!

How do I use it?

You can use it for HTML and CSS coding, the method to install it will be down below this mini-tutorial on how to start enjoying this tool. Let’s start with a simple example in order to begin to understand how it works:

Imagine you have to write a long long list of items inside an unordered list, like this:

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

Now, you would copy the first element and then paste it below, once you had more elements, select a larger group and paste it after the previous group and so forth. Now… that is NOT how I would like to spend my time; with Emmet, all you have to do is type in the syntax and press the Tab key to expand the intelligent snippet.

Using the previous example, all you have to do once you’ve installed Emmet is to write this:

ul>li*5

Then, press the Tab key and the good thing about it is that if you tap Tab you can travel between <li></li> which allows you to add content to each one of the elements, neat huh?

You can also give numeration to each list item using the $ symbol, for example, if you want them to have an ID corresponding to the item number, you can type ul>li.$ — Don’t worry, classes will be covered in a moment :). For now just learn that tag.text will return a tag with the name “tag” that has a class with the name of “text”. But if you put $, it will return 1, 2, 3, 4 successively until there are no more items to display and count inside the parent element.

Now let me explain what happened: first you typed in the very first element without < or >, just the plain tag name. The > is used for the syntax and means “Create a child element, with the parent being the previous element”, in this case it would be the <ul> tag (unordered list). If you type the asterisk symbol after an element, Emmet will create (multiply) that same element five times as stated after the symbol (we typed 5, thus creating 5 <li> items). Remember we are now in a lower lever due the > symbol and the *5 won’t create five unordered lists with just one <li> item in them; for that you could use what is called a group syntax, or parenthesis.

(ul>li)*3
<!-- This will return the following code once you press Tab -->
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<ul>
  <li></li>
</ul>
<!-- If you were to use (ul>li*5)*3, it would return
the code exemplified above five times -->

To create a DIV with a class or an ID, the proper syntax would be #IDname (for ID’s) and .ClassName (for classes); returning the value of <div id=”IDname”></div> and <div class=”ClassName”></div> respectively.

If you put something before the point or the hash (number symbol, hatch), Emmet will produce a tag with the name of the value you established. For example if we type fieldset.myClass it will return <fieldset class=”myClass”></fieldset>; whereas fieldset#myID will, as you guessed (right guess!), return <fieldset id=”myID”></fieldset>.

It’s also possible to add more than just one class to an element as you might already know; to do this just append more .class.class (as much as you want). Like this: span.red.empty.weird , it will return the code of <span class=”red empty weird”></span>.

Placing tags one after the other

The normal syntax is to just use the plus sign (+) in between the tags. You can put as many as you want, to elucidate more on what I’m talking about here, check this example out:

h1+p+(ul>li.fruits*5)+p
<!-- Emmet will produce first an H1 (a level 1 heading title)
tag, after that, a paragraph, right down below it will insert a
unordered list with five list items (which have a class named
"fruits") and after all of this, another paragraph to finish -->
<h1></h1>
<p></p>
<ul>
  <li class="fruits"></li>
  <li class="fruits"></li>
  <li class="fruits"></li>
  <li class="fruits"></li>
  <li class="fruits"></li>
</ul>
<p></p>

Note that ul>li.fruits*5 is contained within parenthesis, that’s because the > symbol places the level one step down, without those parenthesis you’d get five list items with the class of fruits, plus a paragraph below the five items; all of this contained within the parent <ul> tag. The li.fruits*5 code is treated as a single expression, so if you wanted to contain a paragraph inside each list item, you can place a > symbol and put the letter “p” after it; two possible ways to accomplish this are: a) ul>li.fruits*5>p and b) ul>(li.fruits>p)*5. The second one makes more sense though.

Now let’s move on to something that we love to insert, dummy text.

Lorem ipsum – Insert it like you want

A cool feature of Emmet, is the one by the syntax of lorem[x], replacing x with the number of desired words in your dummy text. For example, you are testing a small box with user information and you want to type in the description of the user. You would want to use an average of 20 words instead of a whole document in Latin, right? You can specify the number of words of your lorem ipsum text using the following syntax:

<p>lorem20</p>
<!-- After you established the tag you want your lorem text
to be contained in, all you have to do is place the caret
inside your containing tag and write lorem10 if you want
10 lorem words or specify your own number; then just press Tab -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quod, odit, repudiandae vel similique laudantium aliquid
voluptatum nesciunt placeat natus modi.</p>

Not impressed yet? Let’s see what else Emmet can do :).

Grab list values and place it inside tags

Using what it’s called the “Wrap with Abbreviation” method, you can have a tag-less list of elements and insert those individual values inside more tags the times you want, in the places you want to. First of all, you need to know the usage of the asterisk (*) inside this method. The asterisk works as a repeater that wraps each one of the list’s value inside the tag written before the asterisk.

For example, you have a list like this: [Milk, Juice, Eggs, Tomatoes, Soup] and you want each one of those elements to be wrapped inside a link, which in turn is contained inside a list item. You need to type in the list as portrayed in the code box below, select all the elements you want to wrap and use the keyboard shortcut Shit+Ctrl+A (Mac) or Shit+Ctrl+G (Windows), you will be prompted to write your abbreviation, to make it happen bear in mind the following syntax (write this in the prompt box and hit ENTER afterwards): li*>a .

<ul>
  Milk
  Juice
  Eggs
  Tomatoes
  Soup
</ul>
<!-- The item that needs to be repeated is indeed the
list item, so we put the asterisk after li and whatever tag
(or tags) that follows will contain each of our list's values.
After pressing tab, it will display the following code -->
<ul>
  <li><a href="">Milk</a></li>
  <li><a href="">Juice</a></li>
  <li><a href="">Eggs</a></li>
  <li><a href="">Tomatoes</a></li>
  <li><a href="">Soup</a></li>
</ul>

And what if you want to include the same values of the list inside the href attribute and the class of each list item (we would have to add a class first), you can start with the learning of both attribute and content selectors.

Specifying attribute and content values

Curly braces {} for content and square brackets [] for attributes. In case you want to specify the content of a tag you put the curly braces after the tag name (remember, no spaces in the syntax unless it’s something contained inside curly braces or square brackets!) and inside them, just write your content. Now, say you want to specify the attributes src, title and alternative text of an image tag (<img />), you can try with img[src=img/image.jpg title=dumb alt=”Dumb Photo”]. If you look closely at the example, you will notice a pair of “quotation marks” that contain the string Dumb Photo; this is because inside the brackets, each space separates attributes, this means that if you want to type in a value consisting of more than just 1 word (or alphanumeric string without spaces) you MUST put your string inside quotation marks as you normally would in HTML (I personally like to wrap every attribute value inside quotation marks).

As for the content, a simple example would be a[href=www.google.com target=_blank title=google]>{Search it yourself, punk.} — Focus on the > symbol and the curly braces, the content will be converted to a link because it’s a direct child of the anchor tag (if you don’t put the > symbol, when you try to add more than just text, let’s say a span or a bold tag, those tags will appear after the link, and not inside it and after/before whatever text you want). The returned code will be: <a href=”www.google.com” target”_blank” title=”google”>Search it yourself, punk.</a> .

> Back to where we were! The last thing (but not on the whole system, just in this post) I want to explain is the $# placeholder, that can put your output or individually selected list item values wherever you want inside an abbreviation. Let’s put a clear example not to ramble anymore:

REMEMBER: To successfully separate each list item, you need to add * after li; like this: li* .

Shift+Ctrl+A (or G on Windows) Once the list items are selected, then replace the value or add a new one with the following abbreviation:

ul>li[id=$#]*>{$. $# - }+a[href=info/$#.html]>{Read More}
Abbreviation and result
This is how you would do this, then press ENTER.

And how exactly does this work? Easy, let’s follow step by step like an algorithm:

Emmet creates an unordered list tag, then goes down one level to insert the selected list items separately (because we put the * symbol and thus giving each item its correspondent value [Dogs, Cats, etc]). These list items are direct children of the unordered list (because of the >), now we go down one level again to insert two different elements (three if we count the final text string) as the content of the list item; we first remember the $ which returns the item number and after it, a dot and a space to place the $# placeholder, and if you remember well, that placeholder will return the designated value of the list item. Now we close the curly braces because we are going to add a tag (an anchor tag for a link). The plus symbol ADDS an anchor tag and the square brackets give it a new value to the href attribute; we want a link that takes us to the correspondent pages of each type of item (Dogs, Birds, etc), so we imagine that we have a folder named “info” and inside that folder all our types of animal/insect are there as individual html pages with the proper name and file extension (.html). It would be obvious to put again the $# placeholder followed by the file extension, to later on close the brackets and set a text to our link (remember, the content of a link should be a child of the anchor tag itself) with the curly braces {Read More}. Now we press ENTER and et voila! Look:

IMPORTANT: What we just did IS NOT a good HTML practise, why? Because we could have easily used the Ordered List tag (<ol>) and avoid all this brain-bash. So don’t do this in a real project, it was just to exemplify things.

Installation

Now that you are convinced and excited about this, let’s cut to the chase. If you are on Sublime Text, run the Package Control installer and type “Emmet”, click on it and it will be automatically installed, ready to use. If you want to learn how to use it on Coda, Text Areas, Dreamweaver, Textmate and more, check out the Link to the site and click on the option that you can use.

Documentation:

docs.emmet.io

Check this out, and the cheat sheet too! You will learn to do more than the things I wrote here.

Link to the site:

emmet.io

If you didn’t understand a thing of my mini-tutorial, you can just sit and watch a random video that I picked up from Youtube without reviewing its content:

Please comment, if you have any questions or suggestions, you can express yourself!

Advertisements

4 thoughts on “Zen Coding with Emmet – A real time saver

Ask, comment, or give feedback :)

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s