Links: Documentation: http://docs.emmet.io/ Emmet for Sublime Texr 2: https://github.com/sergeche/emmet-sublime#available-actions Emmet Cheat Sheet: http://docs.emmet.io/cheat-sheet/

3. Abbreviations
Here’s an example: this abbreviation
#page>div.logo+ul#navigation>li*5>a{Item $}
...can be transformed into
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>

4. Abbreviations
Syntax

5. Abbreviations
ID and CLASS
In CSS, you use elem#id and elem.class notation to reach the elements with
specified id or class attributes. In Emmet, you can use the very same syntax to
add these attributes to specified element:
div#content.left
<div id="content" class="left">
</div>

6. Abbreviations
Child: >
You can use > operator to nest elements inside each other:
div>ul>li
...will produce
<div>
<ul>
<li></li>
</ul>
</div>

7. Abbreviations
Sibling: +
Use + operator to place elements near each other, on the same level:
div+p+sec
...will output
<div></div>
<p></p>
<section></section>

8. Abbreviations
Climb-up: ^
With ^ operator, you can climb one level up the tree and change context where
following elements should appear:
div+div+>p>span+em^bq
...outputs to
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>

9. Abbreviations
Multiplication: *
With * operator you can define how many times element should be outputted:
ul>li*5
...outputs to
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

10. Abbreviations
Text: {}
You can use curly braces to add text to element:
a{Clique aqui}
...will produce
<a href="">Click me</a>

11. Abbreviations
Attribute Operators

12. Abbreviations
Item numbering: $
With multiplication * operator you can repeat elements, but with $ you can
number them. Place $ operator inside element’s name, attribute’s name or
attribute’s value to output current number of repeated element:
ul>li.item-$*5
...outputs to
<ul>
<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>
<li class="item-4"></li>
<li class="item-5"></li>
</ul>

13. CSS Abbreviations
h10
...outputs to
height: 10px;
h10+w20
...outputs to
height: 10px; width: 20px;

14. CSS Abbreviations
Vendor Prefixes

15. CSS Abbreviations
-bdrs
...will be expanded into
-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ;

16. CSS Abbreviations
Gradients

17. CSS Abbreviations
lg(left,#fc0 30%, red)
...will be expanded into
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fc0), to(red));
background-image: -webkit-linear-gradient(left, #fc0 30%, red);
background-image: -moz-linear-gradient(left, #fc0 30%, red);
background-image: -o-linear-gradient(left, #fc0 30%, red);
background-image: linear-gradient(left, #fc0 30%, red);

18. CSS Abbreviations
Fuzzy search

19. Actions
Occasionally you have to edit your HTML and
CSS code to fix bugs and add new features.

20. Actions
Update Image Size

21. Actions
Shift + Control + i
Update image size:
<img src="mario.png" alt="It's me, Mario!">
<img src="mario.png" alt="It's me, Mario!" width="256" height="256">
.image { background:url(mario.png); }
.image { background:url(mario.png); width:256px; height:256px; }

22. Actions
Evaluate Math
Expression

23. Actions
Shift + Command + y
Evaluate math expression:
12-2
10
20*4+10
90

24. Actions
Increment/Decrement
Number

25. Actions
Increment/Decrement Number
Increment by 1: Ctrl+↑
Decrement by 1: Ctrl+↓
Increment by 0.1: Alt+↑
Decrement by 0.1: Alt+↓
Increment by 10: Alt + Option ↑
Decrement by 10: Alt + Option ↓

26. Customization!
snippets.json
Add your own or update existing snippets;
preferences.json
Change behavior of some Emmet filters and actions;
syntaxProfiles.json
Define how generated HTML/XML should look.

27. Links
Documentation
Emmet documentation;
Emmet for Sublime Text 2
Emmet plugin and keymap for Sublime Text 2;
Cheat Sheet
List of all Emmet abbreviations.

28. THE END
Questions?

29. Thank you!
:)