Your SlideShare is downloading. ×
Emmet - Accelerating the front end development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Emmet - Accelerating the front end development


Published on

Links: …


Emmet for Sublime Texr 2:

Emmet Cheat Sheet:

Published in: Technology

  • @Mihex
    Thank you. :D
    Are you sure you want to  Yes  No
    Your message goes here
  • Great work on this one, thanks for sharing.
    Are you sure you want to  Yes  No
    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 ( i will send you my photo thanks.
    My best regards,
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

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! :)