Emmet Shortcuts

EMMET SHORTCUTS YOU SHOULD KNOW!!!
==================================

HTML
====
use > add a child element
=========================


li>p

<li>
    <p></p>
</li>


ul>li>p

<ul>
    <li>
        <p></p>
    </li>
</ul>



use + add an sibling element
============================


ul>li>p+a

<ul>
    <li>
        <p></p>
        <a href=""></a>
    </li>
</ul>

use * to create multiple elements
=================================


ul>li*3>p+img

<ul>
    <li>
        <p></p>
        <img src="" alt="">
    </li>
    <li>
        <p></p>
        <img src="" alt="">
    </li>
    <li>
        <p></p>
        <img src="" alt="">
    </li>
</ul>


( ) groupings
=============


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

<ul>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</ul>



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

<ul>
    <li>
        <p></p>
        <img src="" alt="">
        <a href=""></a>
    </li>
    <li>
        <p></p>
        <img src="" alt="">
    </li>
    <li>
        <p></p>
        <img src="" alt="">
    </li>
    <li>
        <p></p>
        <img src="" alt="">
    </li>
</ul>




add text with { }
=================

a{click me}

<a href="">click me</a>


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

<p>Click <a href="">here</a> to continue</p>


add class names with .
======================


ul.wrapper

<ul class="wrapper"></ul>


.container

<div class="container"></div>


Item Numbering with $
=====================


ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>


start numbering at number by adding $@
======================================


ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>


you can also do number ordering in descending order by adding $@-
=================================================================


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

<ul>
    <li class="item5">pizza 5</li>
    <li class="item4">pizza 4</li>
    <li class="item3">pizza 3</li>
    <li class="item2">pizza 2</li>
    <li class="item1">pizza 1</li>
</ul>


climb up one child with ^
=========================


div>p>em{hello}^a

<div>
    <p><em>hello</em></p>
    <a href=""></a>
</div>


enter a attribute by using [attr_name="value"]
==============================================


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

<img src="http://placecage.com/300/300" alt="nicCage">


#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}


<div class="list">
    <ul>
        <li class="item1">
            <p>paragraph 1</p>
            <img src="http://placecage.com/300/300" alt="">
        </li>
        <li class="item2">
            <p>paragraph 2</p>
            <img src="http://placesheen.com/101/505" alt="">
            <a href=""></a>
        </li>
        <li class="item3">
            <p>paragraph 3</p>
            <img src="http://placesheen.com/202/606" alt="">
            <a href=""></a>
        </li>
        <li class="item4">
            <p>paragraph 4</p>
            <img src="http://placesheen.com/303/707" alt="">
            <a href=""></a>
        </li>
        <li class="item5">
            <p>paragraph 5</p>
            <img src="http://placesheen.com/404/808" alt="">
            <a href=""></a>
        </li>
    </ul>
</div>
<footer>
    <p>Place cage vrs placesheen</p>
</footer>



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;