zen coding emmet cheatsheet

//NESTING

place element inside previous element

• place element along side previous element

//grouping (.foo>h1)+(.bar>h2) will output this:

//MULTIPLICATION ul>li*3

//NUMBERING ul>li.item$*3

//implicit html tags li for ul and ol tr for table, tbody, thead and tfoot td for tr option for select and optgroup

//css w100, and it will generate: width: 100px;

Running h10p+m5e will generate: height: 10%; margin: 5em;

@f will generate:

@font-face { font-family:; src:url(); }

ov:h and ov-h and ovh will generate: overflow: hidden;

//prefixes the - prefix will generate: -webkit-super-foo: ; -moz-super-foo: ; -ms-super-foo: ; -o-super-foo: ; super-foo: ;

//gradients lg(left, #fff 50%, #000) will generate: background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000)); background-image: -webkit-linear-gradient(left, #fff 50%, #000); background-image: -moz-linear-gradient(left, #fff 50%, #000); background-image: -o-linear-gradient(left, #fff 50%, #000); background-image: linear-gradient(left, #fff 50%, #000);

//lorum ipsum Type lorem10 will generate: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

p*3>lorem5 will generate

Lorem ipsum dolor sit amet.

Voluptates esse aliquam asperiores sunt.

Fugiat eaque laudantium explicabo omnis!