Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rapid html & css coding with emmet

1,360 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

×