How to be 300% more productive as a web designer with Zen Coding / Emmet

Posted by SolidShops on November 09, 2012 at 02:31 PM

If you are a web designer or web developer, it’s important to be as productive as possible. Don’t you also feel like you’re reinventing the wheel over and over again when crafting HTML and CSS templates?

If you are like me, you will feel like you’re repeating yourself over and over again for the simplest things like adding a doctype, creating unordered lists with list elements and so on.

There’s an easy solution to avoid typing the same tags manually over and over again and it’s called Emmet (it used to be called Zen Coding). With Emmet, you can code you templates with an abbreviated syntax that’s very short and easy to understand for anyone who’s used to working with CSS selectors.

Take a look at the following video to see how it all works and how easy it is to code in a much more productive way that you’re used to. Make sure to put the quality in HD and maximize the video to full screen to follow along.

When starting a new HTML document you probably want to include a doctype. Here’s how you can create the HTML5 doctype and base tags easily with Emmet. If you want to follow along, create a new template file in one of your SolidShops themes.

Enter the following short piece of code and press the TAB key.

html:5

This will expand to:

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

</body>
</html>

Pretty sweet huh? Don’t want to use HTML5 but an xHTML Strict doctype? Easy. Type in the following short tag and press the TAB key:

html:xs

This expands to:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>Document</title>
</head>
<body>

</body>
</html>

Now let’s take a look at the following example:

div#page>div.logo+ul#navigation>li*5>a

What the example above actually says is:

  1. create a div with id page
  2. inside that div, create a div with class logo
  3. also, create a ul with id navigation
  4. inside that ul we want five list items, containing a link inside each list item

After pressing the tab key, you get:

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

The same principle works for CSS files. Create a new CSS file and open it in SolidShops. Now let’s say you want to write the following:

background-image: url();

With Emmet, you just type the following abbreviation, followed by the TAB key, which will expand to the full CSS code above.

bgi /* when pressing TAB, this expands to background-image: url(""); */
bgc /* when pressing TAB, this expands to background-color: ; */
pt  /* when pressing TAB, this expands to padding-top: ; */
...

This works for all widely used CSS properties.

If you feel like learning more about using Emmet in your daily workflow (and you should!), take a look at the documentation page on http://docs.emmet.io/ or download the Cheat Sheet for easy access to all available shortcuts.

Happy coding!

Posted in Releases