Uvod
Emmet je sjajan plugin za ubrzano pisanje koda koji može da se doda mnogim poznatim text editorima i IDE. Poseduje određene skraćenice koje, kada se kombinuju, daju gotov kod koji je mnogo duži i kompleksniji. Instalira se kao dodatak (plugin) a instalacija zavisi od IDE aplikacije u koju se implementira. Opisao sam kako se Emmet plugin instalira u sklopu PHP Storm-a na stranici “Instalacija alata za web development”. Koristi se tako što se u editoru ispiše skraćenica (eng. abbreviation) nakon čega se pritisne “okidač dugme”, default-no dugme je TAB.
Emmet syntax
> (nivo na niže)
nav>ul>li*3
|
1 2 3 4 5 6 7 |
<nav> <ul> <li></li> <li></li> <li></li> </ul> </nav> |
+ (isti nivo)
div+p+bq
|
1 2 3 |
<div></div> <p></p> <blockquote></blockquote> |
^ (nivo na više)
div>p>span+em^bq
|
1 2 3 4 |
<div> <p><span></span><em></em></p> <blockquote></blockquote> </div> |
( ) grupisanje
div>(header>ul>li*2>a)+footer>p
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div> |
. (klase)
p.class1.class2.class3
|
1 |
<p class="class1 class2 class3"></p> |
# (ID)
form#search
|
1 |
<form id="search"></form> |
$ (dinamički broj)
Primer br.1
ul>li.item$*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> |
Primer br.2
ul>li.item$$$*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> |
Primer br.3
ul>li.item$@3*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul> |
Primer br.4
ul>li.item$@-*5
|
1 2 3 4 5 6 7 |
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> |
{ } (tekst)
a{Click me}
|
1 |
<a href="">Click me</a> |
[ ] (atributi)
p[title=”Hello world”]
|
1 |
<p title="Hello world"></p> |
Emmet HTML skraćenice
Na sledećim primerima su prikazane često koriščene skraćenice:
!!!
|
1 |
<!DOCTYPE html> |
!
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> |
lorem
Generiše različite rečenice od 30 reči.
|
1 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa in natus sapiente? Aspernatur assumenda in incidunt magni necessitatibus optio. Deleniti expedita fugit ipsam, laboriosam quis repellendus tenetur totam voluptas voluptatem. |
lorem5
Generiše različite rečenice od 5 reči.
|
1 |
Lorem ipsum dolor sit amet. |
a
|
1 |
<a href=""></a> |
br
|
1 |
<br /> |
link
|
1 |
<link rel="stylesheet" href="" /> |
img
|
1 |
<img src="" alt="" /> |
iframe
|
1 |
<iframe src="" frameborder="0"></iframe> |
form
|
1 |
<form action=""></form> |
input
|
1 |
<input type="text" /> |
label
|
1 |
<label for=""></label> |
video
|
1 |
<video src=""></video> |
bq
|
1 |
<blockquote></blockquote> |
btn
|
1 |
<button></button> |