0
AbbreviationsHere’s an example: this abbreviation#page>div.logo+ul#navigation>li*5>a{Item $}...can be transformed into<div...
Abbreviations           Syntax
AbbreviationsID and CLASSIn CSS, you use elem#id and elem.class notation to reach the elements withspecified id or class a...
AbbreviationsChild: >You can use > operator to nest elements inside each other:     div>ul>li...will produce      <div>   ...
AbbreviationsSibling: +Use + operator to place elements near each other, on the same level:    div+p+sec    ...will output...
AbbreviationsClimb-up: ^With ^ operator, you can climb one level up the tree and change context wherefollowing elements sh...
AbbreviationsMultiplication: *With * operator you can define how many times element should be outputted:    ul>li*5    ......
AbbreviationsText: {}You can use curly braces to add text to element:    a{Clique aqui}    ...will produce    <a href="">C...
Abbreviations  Attribute Operators
AbbreviationsItem numbering: $With multiplication * operator you can repeat elements, but with $ you cannumber them. Place...
CSS Abbreviationsh10...outputs toheight: 10px;h10+w20...outputs toheight: 10px; width: 20px;
CSS Abbreviations    Vendor Prefixes
CSS Abbreviations-bdrs...will be expanded into-webkit-border-radius: ;-moz-border-radius: ;border-radius: ;
CSS Abbreviations         Gradients
CSS Abbreviationslg(left,#fc0 30%, red)...will be expanded intobackground-image: -webkit-gradient(linear, 0 0, 100% 0, col...
CSS Abbreviations      Fuzzy search
ActionsOccasionally you have to edit your HTML andCSS code to fix bugs and add new features.
Actions  Update Image Size
ActionsShift + Control + iUpdate image size:<img src="mario.png" alt="Its me, Mario!"><img src="mario.png" alt="Its me, Ma...
Actions      Evaluate Math       Expression
ActionsShift + Command + yEvaluate math expression:12-21020*4+1090
ActionsIncrement/Decrement      Number
ActionsIncrement/Decrement NumberIncrement by 1: Ctrl+↑Decrement by 1: Ctrl+↓Increment by 0.1: Alt+↑Decrement by 0.1: Alt+...
Customization!snippets.jsonAdd your own or update existing snippets;preferences.jsonChange behavior of some Emmet filters ...
LinksDocumentationEmmet documentation;Emmet for Sublime Text 2Emmet plugin and keymap for Sublime Text 2;Cheat SheetList o...
THE END  Questions?
Thank you!             :)
Emmet - Accelerating the front end development
Emmet - Accelerating the front end development
Upcoming SlideShare
Loading in...5
×

Emmet - Accelerating the front end development

2,165

Published 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/

Published in: Technology
3 Comments
3 Likes
Statistics
Notes
  • @Mihex
    Thank you. :D
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great work on this one, thanks for sharing.
       Reply 
    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,
    ROSINA
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,165
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
3
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Emmet - Accelerating the front end development"

  1. 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. 2. Abbreviations Syntax
  3. 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. 4. AbbreviationsChild: >You can use > operator to nest elements inside each other: div>ul>li...will produce <div> <ul> <li></li> </ul> </div>
  5. 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. 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. 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. 8. AbbreviationsText: {}You can use curly braces to add text to element: a{Clique aqui} ...will produce <a href="">Click me</a>
  9. 9. Abbreviations Attribute Operators
  10. 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. 11. CSS Abbreviationsh10...outputs toheight: 10px;h10+w20...outputs toheight: 10px; width: 20px;
  12. 12. CSS Abbreviations Vendor Prefixes
  13. 13. CSS Abbreviations-bdrs...will be expanded into-webkit-border-radius: ;-moz-border-radius: ;border-radius: ;
  14. 14. CSS Abbreviations Gradients
  15. 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. 16. CSS Abbreviations Fuzzy search
  17. 17. ActionsOccasionally you have to edit your HTML andCSS code to fix bugs and add new features.
  18. 18. Actions Update Image Size
  19. 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. 20. Actions Evaluate Math Expression
  21. 21. ActionsShift + Command + yEvaluate math expression:12-21020*4+1090
  22. 22. ActionsIncrement/Decrement Number
  23. 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. 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. 25. LinksDocumentationEmmet documentation;Emmet for Sublime Text 2Emmet plugin and keymap for Sublime Text 2;Cheat SheetList of all Emmet abbreviations.
  26. 26. THE END Questions?
  27. 27. Thank you! :)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×