Great Scott! Five lesser known shortcuts for Emmet.io that rock!
I'm a huge fan of Emmet. It allows you not only to create markup in no-time by using a CSS-like syntax in your most favourite code editor (e.g. ul>li*5 expands to one <ul> element with five nested <li> elements in HTML after hitting the tab key. Alternatively, you can just type m20 in your CSS to get margin: 20px after hitting tab).
If you don't have Emmet, check out the list of available plugins and install it right now. Or if you want to just give it a try Codepen also implements Emmet in their CSS and HTML views.
Here a the five shortcuts, that not only surprised me most, but also boosted my productivity up to eleven!
CSS: bxsd -- txs
I never can remember the values for both the box-shadow and text-shadow properties in CSS. I know them a little, but I always have to try it out first in dev tools. But if I type
bxsd
and hit the tab key, I get this snippet inserted in my CSS code:
-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color;
Wohoo! Just need to adapt the values (Sublime does multi-cursor, too) and I'm all done.
In Codepen, bxs does the same, just Sublime needs an extra d. SCNR.
Same goes for text-shadow. A simple
txs
expands to
text-shadow: hoff voff blur #000;
I don't use prefixed box-shadow anymore, but deleting lines is always a lot easier than typing each value on its own.
Update
The guys from Emmet told me via Twitter, that you can update your preferences to disable certain prefixes. Thank you, guys!
HTML: lorem
You know what
p*5>lorem
does? Exactly that. It inserts five paragraphs of Lorem Ipsum.
p*5>ipsum
does the same. You know that Lorem Ipsum is fucking evil, and I'm absolutely behind that. But to check if your design holds a massive amount of text, there's no easier way to do that.
If you just need it every once in a while, type lorem or ipsum to get just one paragraph.
CSS: bz
box-sizing is at the moment the only CSS property that I still prefix. It's mostly (I even think just) used for layout tasks, and leaving it unprefixed would cause issues on older Android browsers. Writing all prefixed properties is cumbersome, so before using Emmet, I included a little Sass mixing that came with Bootstrap:
@mixin box-sizing($val: border-box) {
-webkit-box-sizing: $val;
-moz-box-sizing: $val;
box-sizing: $val;
}
to use with:
@include box-sizing();
It's okay, but I always find mixins kinda laborious, especially if they just prefix stuff. Emmet knows, that if you want to add box-sizing in your CSS, you might just have one and only one desire: Set it to border-box for all available platforms. So if you type:
bz
it expands to
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
after hitting the tab key. Great, all I need and just by typing two letters!
CSS: lg()
Another thing that I always used a mixin for was linear gradients. Mostly because specification changed over and over, and after having almost the same implementation across all platforms, the very first value describing the direction got changed by a W3C specification. If you know German, check out buddy Peter's cents on that topic. Anyhow, I never gave much ado about it, and mostly used a tool or a mixin for that task.
But with lg in Emmet, everything seems so much, much easier.
Typing
lg(left, #bada55 60%, #c0ffee)
and hitting tab, results in
background-image: -webkit-gradient(linear, 0 0, 100% 0,
color-stop(0.6, #bada55), to(#c0ffee));
background-image: -webkit-linear-gradient(left, #bada55 60%, #c0ffee 100%);
background-image: -moz-linear-gradient(left, #bada55 60%, #c0ffee 100%);
background-image: -o-linear-gradient(left, #bada55 60%, #c0ffee 100%);
background-image: linear-gradient(left, #bada55 60%, #c0ffee 100%);
This does not include the W3C proposed specification, well, at least yet. But I think it will be in a future update. For know, it works, at least for me.
HTML: !
My most favourite of all is the ! shortcut. I found it especially tedious to create the basic HTML structure, so i used a lot of HTML boilerplate code and created some snippets for sublime. Emmet just needs a little
!
at the start of a line in your HTML, and you get this:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</html>
with the cursor pointing to the start of the <title> tag (which is by the way the thing I forget most when creating new sites). This is heavy!
Also interesting
If you want to have a complete overview of available Emmet shortcuts, be sure to check out there cheat sheet
Image: Wikipedia
