I’ve seen people raving about HTML & CSS tool Emmet for a while, but I’ve always been partial to hands-on and coding from scratch. I’ve always felt that if you craft a site from the ground up, you know exactly what’s going on. Now that I’ve been at this for a few years, I understand what’s going on even without crafting the code keystroke by keystroke, so why not give this Emmet thing a test?
So, What is Emmet?
Simply put, Emmet is a code editor plugin that allows you form HTML using “abbreviations” that turn into full HTML structure. Every tutorial you’ll find, including Emmet’s own documentation, begins with p.foo. Type that line in, press tab and you’ll get a full “<p class=”foo”></p>” and the cursor will even be dropped in the middle of the tag, ready to go. That may not sound too amazing yet, but let’s get fully setup and see what you can really do.
Installing Emmet is completely dependent upon which code editor you use, but I’ve installed on both on a PC with Sublime Text and on a Mac with Coda. Both were easy and well-documented in the GitHub repositories.
The first step is to go to the Emmet downloads page and find your favorite text editor. Once you’ve made your selection, you’ll go to the GitHub page where the plugin is available for download. Also on that page will be a quick walkthrough on how to install for your particular solution. It’s only a few minutes until you’re ready to go.
Your First ‘Abbreviations’
The way that Emmet works is that you type in an “abbreviation” and it expands that into the full HTML structure automatically. Like the previous example, a simple p.foo turns into a paragraph tag with a class of “foo.” While that saves a few keystrokes, it does nothing to illustrate the actual power of Emmet.
Now, let’s make building tables easier, because I know that everybody loves building tables.
Before you even start building a table, take a look at the Emmet Cheat Sheet, which has become a bookmark staple. As described, it lists all of the most used abbreviations in a tidy and useful document.
Within the cheat sheet you’ll find the table abbreviation which is simply table>tr>td. If you type this in and hit your “Expand Abbreviation” key, usually the tab key, you’ll get the following:
While that may look like it’s pretty awesome all by itself, we haven’t even begun to tap the potential of Emmet. Let’s add a couple of math functions within that last abbreviation and see what we can come up with. The math in Emmet is as simple as possible. If you need multiples of anything, a simple asterisk and a number is all that you need. So let’s say you need a table with 3 rows and 2 columns – it’s as easy as table>tr*3>td*2 and voilà:
What happened here is magic. Emmet has taken 14 keystrokes and turned it into a full formed table with three rows and two columns. The greatest part is that we’ve only scratched the surface of what can be done with this plugin.
Go install Emmet and give it a go!