vitorhsb/jsbin.emmet-tips.css

## jsbin.emmet-tips.css
/* The basic CSS shortcuts stuff you should know */

w100
/* width: 100px;  */

h25.5p
/* height: 25.5%; */

m55p
/* margin: 55%; */

mt50p
/* margin-top: 50%; */

mr50
/* margin-right: 50px; */

pb40
/* padding-bottom: 40px; */

pl43p
/* padding-left: 43%; */

bg
/* background: #000; */

bgi
/* background-image: url(); */

c
/* color: #000; */

f
/* font: ; */

ff
/* font-family: ; */

bd
/* border: ; */

bd+
/* border: 1px solid #000; */

## jsbin.emmet-tips.html
<!DOCTYPE html>
<title>Emmet tips</title>
<meta description="Collection of examples of what Emmet can do via http://mmcfadyen.ca/blog/all-the-emmet-shortcuts-you-forgot/">

<p>Via <a href="http://mmcfadyen.ca/blog/all-the-emmet-shortcuts-you-forgot/">mmcfadyen.ca</a> & <a href="https://twitter.com/addyosmani">@addyosmani</a></p>

<p>Just hit <code>tab</code> at the end of each of the lines below to discover how emmet expands these out (same goes for the CSS panel).</p>

<hr>

<!-- use > add a child element -->

li>p

ul>li>p

<!-- use + add an sibling element -->

ul>li>p+a

<!-- use * to create multiple elements -->

ul>li*3>p+img

<!-- ( ) groupings -->

ul>(header>ul>li*2>a)+footer>p

ul>(li>p+img+a)+li*3>p+img

<!-- add text with { } -->

a{click me}

p>{Click }+a{here}+{ to continue}

<!-- add class names with . -->

ul.wrapper

.container

<!-- Item Numbering with $ -->

ul>li.item$*5

<!-- start numbering at number by adding $@ -->

ul>li.item$@3*5

<!-- you can also do number ordering in descending order by adding $@- -->

ul>li.item$@-{pizza $@-}*5

<!-- climb up one child with ^ -->

div>p>em{hello}^a

<!-- enter a attribute by using [attr_name="value"] -->

img[src="http://placecage.com/300/300" alt="nicCage"]

<!-- code comments -->

.container>ul>li*5>a|c

<!-- #putting it all together -->

div.list>ul>(li.item$>p{paragraph $}+img[src="http://placecage.com/300/300"])+li.item$@2*4>p{paragraph $@2}+img[src="http://placesheen.com/$@1$$/$@5$$"]+a^^^footer>p{Place cage vrs placesheen}
	/* The basic CSS shortcuts stuff you should know */

	w100
	/* width: 100px; */

	h25.5p
	/* height: 25.5%; */

	m55p
	/* margin: 55%; */

	mt50p
	/* margin-top: 50%; */

	mr50
	/* margin-right: 50px; */

	pb40
	/* padding-bottom: 40px; */

	pl43p
	/* padding-left: 43%; */

	bg
	/* background: #000; */

	bgi
	/* background-image: url(); */

	c
	/* color: #000; */

	f
	/* font: ; */

	ff
	/* font-family: ; */

	bd
	/* border: ; */

	bd+
	/* border: 1px solid #000; */
	<!DOCTYPE html>
	<title>Emmet tips</title>
	<meta description="Collection of examples of what Emmet can do via http://mmcfadyen.ca/blog/all-the-emmet-shortcuts-you-forgot/">

	<p>Via <a href="http://mmcfadyen.ca/blog/all-the-emmet-shortcuts-you-forgot/">mmcfadyen.ca</a> & <a href="https://twitter.com/addyosmani">@addyosmani</a></p>

	<p>Just hit <code>tab</code> at the end of each of the lines below to discover how emmet expands these out (same goes for the CSS panel).</p>

	<hr>

	<!-- use > add a child element -->

	li>p

	ul>li>p

	<!-- use + add an sibling element -->

	ul>li>p+a

	<!-- use * to create multiple elements -->

	ul>li*3>p+img

	<!-- ( ) groupings -->

	ul>(header>ul>li*2>a)+footer>p

	ul>(li>p+img+a)+li*3>p+img

	<!-- add text with { } -->

	a{click me}

	p>{Click }+a{here}+{ to continue}

	<!-- add class names with . -->

	ul.wrapper

	.container

	<!-- Item Numbering with $ -->

	ul>li.item$*5

	<!-- start numbering at number by adding $@ -->

	ul>li.item$@3*5

	<!-- you can also do number ordering in descending order by adding $@- -->

	ul>li.item$@-{pizza $@-}*5

	<!-- climb up one child with ^ -->

	div>p>em{hello}^a

	<!-- enter a attribute by using [attr_name="value"] -->

	img[src="http://placecage.com/300/300" alt="nicCage"]

	<!-- code comments -->

	.container>ul>li*5>a\|c

	<!-- #putting it all together -->

	div.list>ul>(li.item$>p{paragraph $}+img[src="http://placecage.com/300/300"])+li.item$@2*4>p{paragraph $@2}+img[src="http://placesheen.com/$@1$$/$@5$$"]+a^^^footer>p{Place cage vrs placesheen}