Emmet - Accelerating the front end development
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Emmet - Accelerating the front end development

Uploaded on

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/

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • @Mihex
    Thank you. :D
    Are you sure you want to
    Your message goes here
  • Great work on this one, thanks for sharing.
    Are you sure you want to
    Your message goes here
  • Hi Dear,

    Compliment s of the season !!
    Um, i am miss ROSINA by name, i wish
    to have you as my friend so shall we be good friends ? I want us to base
    on mutual friendship because A 'Hello' today can mean a friendship tomorrow. Friendship is a word, the very sight of which in print makes the heart warm. A stranger is just a friend you haven't met yet; we got to take time to be friendly because it's the road to happiness so reach me at ( rosinaedward11@hotmail.com) i will send you my photo thanks.
    My best regards,
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 4

https://twitter.com 3
http://www.docseek.net 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. AbbreviationsHere’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>
  • 2. Abbreviations Syntax
  • 3. AbbreviationsID and CLASSIn CSS, you use elem#id and elem.class notation to reach the elements withspecified id or class attributes. In Emmet, you can use the very same syntax toadd these attributes to specified element: div#content.left <div id="content" class="left"> </div>
  • 4. AbbreviationsChild: >You can use > operator to nest elements inside each other: div>ul>li...will produce <div> <ul> <li></li> </ul> </div>
  • 5. AbbreviationsSibling: +Use + operator to place elements near each other, on the same level: div+p+sec ...will output <div></div> <p></p> <section></section>
  • 6. AbbreviationsClimb-up: ^With ^ operator, you can climb one level up the tree and change context wherefollowing elements should appear: div+div+>p>span+em^bq...outputs to <div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
  • 7. AbbreviationsMultiplication: *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>
  • 8. AbbreviationsText: {}You can use curly braces to add text to element: a{Clique aqui} ...will produce <a href="">Click me</a>
  • 9. Abbreviations Attribute Operators
  • 10. AbbreviationsItem numbering: $With multiplication * operator you can repeat elements, but with $ you cannumber them. Place $ operator inside element’s name, attribute’s name orattribute’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>
  • 11. CSS Abbreviationsh10...outputs toheight: 10px;h10+w20...outputs toheight: 10px; width: 20px;
  • 12. CSS Abbreviations Vendor Prefixes
  • 13. CSS Abbreviations-bdrs...will be expanded into-webkit-border-radius: ;-moz-border-radius: ;border-radius: ;
  • 14. CSS Abbreviations Gradients
  • 15. CSS Abbreviationslg(left,#fc0 30%, red)...will be expanded intobackground-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);
  • 16. CSS Abbreviations Fuzzy search
  • 17. ActionsOccasionally you have to edit your HTML andCSS code to fix bugs and add new features.
  • 18. Actions Update Image Size
  • 19. ActionsShift + Control + iUpdate image size:<img src="mario.png" alt="Its me, Mario!"><img src="mario.png" alt="Its me, Mario!" width="256" height="256">.image { background:url(mario.png); }.image { background:url(mario.png); width:256px; height:256px; }
  • 20. Actions Evaluate Math Expression
  • 21. ActionsShift + Command + yEvaluate math expression:12-21020*4+1090
  • 22. ActionsIncrement/Decrement Number
  • 23. ActionsIncrement/Decrement NumberIncrement 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 ↓
  • 24. Customization!snippets.jsonAdd your own or update existing snippets;preferences.jsonChange behavior of some Emmet filters and actions;syntaxProfiles.jsonDefine how generated HTML/XML should look.
  • 25. LinksDocumentationEmmet documentation;Emmet for Sublime Text 2Emmet plugin and keymap for Sublime Text 2;Cheat SheetList of all Emmet abbreviations.
  • 26. THE END Questions?
  • 27. Thank you! :)