4.2 Emmet

In the previous lesson, I gave you a demonstration on using Zen Coding to create your HTML markup very quickly. But now I'm gonna show you the future of Zen Coding which has been renamed to Emmet. So there is a plugin that's in development for Sublime. I scroll down on this GitHub Page, you'll see it's a work-in-progress official plugin for Sublime that will eventually replace Zen Coding. So at the time of this recording, this is still very early in development, but I thought it would be a nice time to give you a quick sample of what you'll be able to do. So right now again, at the time of this recording, you might want to check if you're watching this. Later than September or October 2012, but at the time of this recording, we can't install in it through package control. It's not to that point yet. So we need to get it through GitHub. Assuming you have get installed, we'll just grab that URL, we'll cd into the library applications, Sublime Text 2 into the package's directory. And now, I will clone that repo and we'll call it Emmet. All right, that's finished. The next step is to restart Sublime. So I will exit out and let's just drag this folder in, to test it out. If I open the CSS directory and we just have a sample style sheet, let me show you some cool things we can do. Let's say we have a box right here. If I were to write p20 and hit tab, notice that expands to padding 20 pixels. If I do p50, that's padding 50. So that alone can be really helpful and as you would expect, that can also be done for things like margin. So maybe you need ten pixels of margin all around this box. Instead of doing margin 10 pixels, you would do m10 tab and you're done. Padding 25 and you're done. Well what about width though? Well I would do width 50 tab, and we get the same results which defaults to pixels. If you instead want to do something like percentage you could say width equals eighty p, then tab, and now we have eighty percent. If I need multiple values, I could say margin ten dash twenty. And now that will automatically figure out that you need to do a top and bottom in the left and right respectively. So something that you've probably done many times is you've set the top and bottom margins to zero and the left and right to auto to center a container. Well now, rather than doing margin zero auto like that, you would simply do m0-auto, and now you've done the exact same thing. So what we have here is a new syntax, that's greatly going to speed up how quickly you write your style sheets. So here's another really cool thing that we can do with Emmet. Think of a CSS3 property. If I do transition all over the course of one second. Well, we have to remember, what about webkit, what about Mozilla, what about Opera, what about Microsoft? Those can be difficult to remember. Well, that's what we talked about, Prefixer. I could select this and hit Ctrl+Cmd+X to run that through the Prefixer surface, I could definitely do that. Or with the Emmet plugin, you can add a dash before the property name. If I hit dash transition, that's how we signal to Emmet that we're working with prefixes. Now if I hit tab, notice that it will automatically expands to include all of the properties. Then we do all one second. Now one thing to keep in mind though is that there isn't too much intelligence going on here, so for example, -border-radius: 10px, yeah, this is not necessary. At this stage of the game, you can stick with the official property, you don't need those additional prefixes, certainly not -ms and things like that. And the same thing, maybe box shadow, -box-shadow. Yeah, we don't need all three of those, two of them would be sufficient now. So just keep that in mind. Take advantage of this but, don't blindly accepts that at all times for these properties you need every single prefix because that's just not the case. You can refer to www.caniuse.com if you need to research it or, a little tip, if you were to do box-shadow once again. Ten pixel, ten pixel, ten pixels and 666. If you ever wonder if you should be using a certain CSS3 prefix or not, the Prefixer plugin will take care of that for you. Watch, if I run it, Ctrl+Cmd+X. If one is not necessary, the prefixer service will strip it from your page. Now the irony here is, I'm being told that, if you look at the bottom of the screen, moz-box-shadow should be included. They don't really know what they're talking about. You really don't need Mozilla at this point unless there's some weird reason why you need to go back that far. But what we do see is that for transition, yep, we do need all five of those properties. So let me backtrack and we'll also do border-radius is 10 pixels. Cmd+A, we're gonna run it through Prefixer with Ctrl+Cmd+X and now you can see, border-radius we only needed the official form. For box-shadow we did need Mozilla, and for transition we kept all of those on, so that's a good little tip to have. Now there's lots of things playing for Emmet, but some of them haven't yet been implemented. For example, we should be able to use the carrots when this plug in is done to go up a level. So what I mean by that is, let's say you have a Header and then an H1 and then an H1. Well, you should be able to hit a carrots to go back up, and then continue on. But, at the time of this writing that is not working as expected, but maybe you should try it and see if it works, for you. There's also little helpers like for example you need to generate lorem text. Maybe I want 20 words worth of lorem, I type lorem20 and now I have that. Or maybe we need 200 words, lorem200, tab and now that sets us up nicely. Cool. Now there's also things like implicit tags. So for example, if we were to add an unordered list and relist items, we would have to do it like this with the standard Zen Coding plugin. But if you think about it, a list item will always be the child of an unordered list. So with Emmet, we could just say, U-L and then the class name for the item. Maybe, item for now times three, and when the plugin is done, that should be an L-I. So as you can see, this is very much in development, it's trying to add a div here when it shouldn't. But other things work like if I do an em followed by an element with the class of hello, which is terrible. You'll see that it does know that if we have an end tag, then the only thing that it should be is a span, we're not gonna have a div, it should be a span. The only correct option is for that to be a span, so it does that for you, you don't have to be explicit about that. Okay. So the plug in is called Emmet, it's going to replace the sublime Zen Coding plugin in the future, so keep an eye on it.