Emmet - Accelerating the front end development


Published on

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/

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 ( rosinaedward11@hotmail.com) 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

No notes for slide

Emmet - Accelerating the front end development

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