Front-End Development Power ToolsRapid HTML & CSS Coding with EmmetContents and code examples marked with * are from emmet...
HTML as Assembly Languages<ul class="pager clearfix"><li class="tab0"><a href="#" class="pagenum active" rel="0"><strong>D...
Emmet – HTML writing made easy* Emmet is a plug-in for many popular text editorswhich greatly improves HTML & CSS workflow...
Emmet* Sergey Chikuyonok started projectdevelopment under “Zen Coding”name back in 2009.In 2012 the project was renamed to...
Attribute operators-- Abbreviations Syntax* Emmet uses syntax similar to CSS selectors fordescribing elements’ positions i...
Nesting operators -- Abbreviations Syntax* Attribute operators are used to modify attributes ofoutputted elements.(Tab)ID ...
Wrap with Abbreviation* Wrap plain text, or list items from text editor, such asWord, TextEditor ,etc. (Shift + Ctrl + A)...
Update Image SizeIn HTML, place caret in <img> ; in CSS with url() .(Shift + Ctrl + U)<img src="demo.jpg" alt="" /><style>...
Encode/Decode Image to data:URL* With Emmet, you can convert image to data:URL right inyour editor, as well as convert it ...
Emmet Cheat SheetPlay with it, and find you need.http://docs.emmet.io/cheat-sheet/10
Donate* The Emmet toolkit is open sourced and completelyfree to use.http://emmet.io/donate/11
Donate is more welcomethan Thanks!12
Upcoming SlideShare
Loading in …5
×

Rapid html & css coding with emmet

1,160 views
1,062 views

Published on

Brief introduction to Emmet. This is a series of Front-End development power tools.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,160
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Rapid html & css coding with emmet

  1. 1. Front-End Development Power ToolsRapid HTML & CSS Coding with EmmetContents and code examples marked with * are from emmet.iowww.linkedin.com/in/deanyan
  2. 2. HTML as Assembly Languages<ul class="pager clearfix"><li class="tab0"><a href="#" class="pagenum active" rel="0"><strong>Discover</strong>New&amp; Popular Videos</a><span>&nbsp;</span></li><li class="tab1"><a href="#" class="pagenum" rel="1"><strong>Download</strong>InternetVideos</a><span>&nbsp;</span></li><li class="tab2"><a href="#" class="pagenum" rel="2"><strong>Convert Files</strong>WatchVideos Anywhere</a><span>&nbsp;</span></li><li class="tab3"><a href="#" class="pagenum" rel="3"><strong>Play</strong>AllFormats</a><span>&nbsp;</span></li></ul>How long do you need to complete following code ?-Snippet from http://www.real.com/realplayer2
  3. 3. Emmet – HTML writing made easy* Emmet is a plug-in for many popular text editorswhich greatly improves HTML & CSS workflowWith Emmet, you go with:ul.pager.clearfix>li.tab$@0*4>a.pagenum[href="#" rel="$@0"]>strong^span{&nbsp;}3
  4. 4. Emmet* Sergey Chikuyonok started projectdevelopment under “Zen Coding”name back in 2009.In 2012 the project was renamed toEmmethttp://emmet.io/4
  5. 5. Attribute operators-- Abbreviations Syntax* Emmet uses syntax similar to CSS selectors fordescribing elements’ positions inside generatedtree and elements’ attributes.Child: >Sibling: +Climb-up: ^Multiplication: *Grouping: ()5
  6. 6. Nesting operators -- Abbreviations Syntax* Attribute operators are used to modify attributes ofoutputted elements.(Tab)ID and CLASSCustom attributesItem numbering: $Text: {}NOTE : (header > ul.nav > li*5) + footer WON’T work, space is a stop symbol for Emmet6
  7. 7. Wrap with Abbreviation* Wrap plain text, or list items from text editor, such asWord, TextEditor ,etc. (Shift + Ctrl + A)Wrap Hello Emmet! with tagsWrap following items with UL or OL1. Item12. Item23. Item34. Item4Wrapping individual linesRemoving list markers with filtersControlling output position7
  8. 8. Update Image SizeIn HTML, place caret in <img> ; in CSS with url() .(Shift + Ctrl + U)<img src="demo.jpg" alt="" /><style>.block {background: url(demo.jpg);}</style>8
  9. 9. Encode/Decode Image to data:URL* With Emmet, you can convert image to data:URL right inyour editor, as well as convert it back to external file.(Shift + Ctrl + I)body {background: url(undefined);}9
  10. 10. Emmet Cheat SheetPlay with it, and find you need.http://docs.emmet.io/cheat-sheet/10
  11. 11. Donate* The Emmet toolkit is open sourced and completelyfree to use.http://emmet.io/donate/11
  12. 12. Donate is more welcomethan Thanks!12

×