Tools & Tips

Speed Up Your Workflow with Emmet

Workflow and productivity are two things commonly spoken about in web development. Speeding up the work process is desired by all of us who deal with tons of code on a daily basis and sometimes it can get really repetitive and boring having to write out the same lines of code over and over again. This is where Emmet comes in. Some of you may have heard of a text-editor plugin called Zen Coding, well Emmet is the replacement name for that same plugin and can definitely enhance your productivity and workflow as a developer.

What is Emmet and how does it work?

As mentioned above, Emmet is a text-editor plugin that allows abbreviations to be expanded into functional code, for example, ul>p*5 would expand into an unordered list with 5 list items. However, for the abbreviations to be expanded into working code, the action button must be pressed (Sublime text users would hit the TAB key).

Installation

Before getting into any examples, we need to first locate the plugin and install it. Head over to the download section on Emmet’s site and click on the text editor that you want to install the plugin on, in this case Sublime Text. You will then be directed over to a GitHub page that has a step by step guide on getting the plugin installed, follow that guide. I also recommend that you read the section ‘available actions’.

Now that we have Emmet installed lets see how we can use this plugin to start a simple HTML document. In your text editor, type out html:5 and hit the action key. You should get this result:

As you can see, by just typing in html:5 and hitting the action key, we have a new HTML document, it’s that simple.

If we wanted an unordered list with the class of “nav” containing 5 list items, it would look like this: ul.nav>p*5. Hit the action key once again and you should see the abbreviation expand into this:

Lets try something else. Say we want three divs each with its own class and each containing an image tag. the abbreviation would look like this: (.first>img)+(.second>img)+(.third>img), and the result:

CSS?

Emmet also works with CSS, lets take a look at a few examples.

Lets say we want to give our class .first the value of position: relative, we would first select it in our CSS document and within curly braces type in ‘pos’ and hit the action key.

Lets now float our second div to the left, select it and type in ‘fl’

How about coloring? Lets give our third div some RGBA values, c:ra then the action key:

Thats just a quick example of want Emmet is capable of. Check out this cheat sheet provided on the Emmet site where all the syntax and abbreviations are listed in an organised form for you to play around with and start incorporating into your own workflow.

Although this is a great and useful plugin, the beginning developer should avoid using this in the early stages as it is better to type out the traditional HTML and CSS code for learning purposes.


Leave a Reply

%d bloggers like this: