Rapid html & css coding with emmet
Download as PPTX, PDF0 likes52 views
Emmet is a plugin that improves HTML and CSS workflow by allowing users to expand abbreviations for HTML elements and attributes into full code. Some key features include: - Expanding abbreviations like ul.pager.clearfix>li*4 into fully formed HTML code - Using syntax similar to CSS selectors to describe element positions and attributes - Wrapping selected text or list items with tags quickly - Updating image sizes inline - Encoding/decoding images to data URLs - Access to a cheat sheet of Emmet abbreviations Emmet streamlines front-end development by allowing rapid coding through abbreviation expansion.
![Emmet – HTML writing made easy
* Emmet is a plug-in for many popular text editors
which greatly improves HTML & CSS workflow
With Emmet, you go with:
ul.pager.clearfix>li.tab$@0*4>a.pagenum[href="#" rel="$@0"]>strong^span{ }
3](https://image.slidesharecdn.com/rapidhtmlcsscodingwithemmet-v2-200109232412/85/Rapid-html-css-coding-with-emmet-3-320.jpg)
Rapid html & css coding with emmet
- 1. Front-End Development Power ToolsRapid HTML & CSS Coding with Emmet Contents and code examples marked with * are from emmet.io
- 2. HTML as Assembly Languages <ul class="pager clearfix"> <li class="tab0"> <a href="#" class="pagenum active" rel="0"><strong>Discover</strong>New & Popular Videos</a><span> </span> </li> <li class="tab1"> <a href="#" class="pagenum" rel="1"><strong>Download</strong>Internet Videos</a><span> </span> </li> <li class="tab2"> <a href="#" class="pagenum" rel="2"><strong>Convert Files</strong>Watch Videos Anywhere</a><span> </span> </li> <li class="tab3"> <a href="#" class="pagenum" rel="3"><strong>Play</strong>All Formats</a><span> </span> </li> </ul> How long do you need to complete following code ? -Snippet from http://www.real.com/realplayer 2
- 3. Emmet – HTML writing made easy * Emmet is a plug-in for many popular text editors which greatly improves HTML & CSS workflow With Emmet, you go with: ul.pager.clearfix>li.tab$@0*4>a.pagenum[href="#" rel="$@0"]>strong^span{ } 3
- 4. Emmet * Sergey Chikuyonok started project development under “Zen Coding” name back in 2009. In 2012 the project was renamed to Emmet http://emmet.io/ 4
- 5. Attribute operators-- Abbreviations Syntax * Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Child: > Sibling: + Climb-up: ^ Multiplication: * Grouping: () 5
- 6. Nesting operators -- Abbreviations Syntax * Attribute operators are used to modify attributes of outputted elements.(Tab) ID and CLASS Custom attributes Item numbering: $ Text: {} NOTE : (header > ul.nav > li*5) + footer WON’T work, space is a stop symbol for Emmet 6
- 7. Wrap with Abbreviation * Wrap plain text, or list items from text editor, such as Word, TextEditor ,etc. (Shift + Ctrl + A) ▪ Wrap Hello Emmet! with tags ▪ Wrap following items with UL or OL 1. Item1 2. Item2 3. Item3 4. Item4 ▪ Wrapping individual lines ▪ Removing list markers with filters ▪ Controlling output position 7
- 8. Update Image Size In 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. Encode/Decode Image to data:URL * With Emmet, you can convert image to data:URL right in your editor, as well as convert it back to external file. (Shift + Ctrl + I) body { background: url(undefined); } 9
- 10. Emmet Cheat Sheet Play with it, and find you need. http://docs.emmet.io/cheat-sheet/ 10
- 11. Donate * The Emmet toolkit is open sourced and completely free to use. http://emmet.io/donate / 11
- 12. Donate is more welcome than Thanks! 12