Say hello to Emmet and write HTML with less pain ( more fun )
If you have to create above mentioned Layout, you have to
- write loads of HTML tags
- add classes or ids for styling
- add content.
HTML code for sample layout
If you miss closing tag of one/some of the tag then finding them become so irritating. Time taken to type entire code character by character will be more time consuming.
Every developer wants to add some tools/automation to their workflow, so they can add speed and efficiency to their regular work.
In this case Emmet (formerly known as Zen Coding) becomes savior. It is a plugin for many popular text editors which greatly improves HTML & CSS workflow.
How to configure Emmet in editor
- Visual Studio Code : https://code.visualstudio.com/docs/editor/emmet
- Sublime Text : https://github.com/sergeche/emmet-sublime#readme
- Atom : https://github.com/emmetio/emmet-atom#readme
- Notepad ++ : https://github.com/emmetio/npp#readme
- Dreamweaver : https://github.com/emmetio/dreamweaver#readme
I have listed some of majorly used editors. You can use this link to configure other editors.
In this story I will be explaining most commonly used feature of Emmet for HTML generation, using Visual Studio Code editor for sample.
How to use
Abbreviations are the heart of the Emmet toolkit: these special expressions are parsed in runtime and transformed into structured code block, HTML for example.
Child Elements:
Use > operator to nest elements inside each other.
Sample : div>p
Sibling Elements:
Use + operator to place elements near each other, on the same level.
Sample : div+p
Multiplication Elements:
Use * operator with how many times element should be outputted.
Sample : ul>li*5>a
ID and CLASS:
Use elem#id or elem.class to generate HTML with class or id.
Sample : div.someclass or div#someid
Use elem#id.class to generate HTML with class and id.
Sample : div#someid.someclass
Add Text to element:
Use {some text} add text to element.
Grouping Elements:
Use () grouping subtrees in complex abbreviation.
Sample : (div.root>div.child+p)+footer
Custom attributes
Use elem[attrname="value"] add attribute to element.
Notes on abbreviation formatting
When you get familiar with Emmet’s abbreviations syntax, you may want to use some formatting to make your abbreviations more readable. For example, use spaces between elements and operators, like this:
(header > ul.nav > li*5) + footerBut it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.
Emmet code for above mentioned layout
div.wrapper#wrapper>(header>img.brand[src="http://somedomain.com/images/logo" alt="logo"]+nav.main_nav>ul>li*4>a[href="http://somedomain.com/item$"]{item$})+(div.container>aside+section)+(footer>nav.footer_nav>ul>li*4>a[href="http://somedomain.com/item$"]{item$})Follow below mentioned link if you want to use more feature from Emmet :
