Emmet

Az Emmet egy ingyenes plugin, ami a legtöbb ismert szerkesztőhöz letölthető és arra hivatott, hogy meggyorsítsa a munkafolyamatokat.
 

A legfontosabb támogatott programok:

• Sublime
• Atom Text
• Coda
• Eclipse/Aptana
• TextMate 2
• Notepad++
• NetBeans
• Adobe Dreamweaver

Az Emmet css-szerű rövidítéseket alakít html kóddá.

Segítségével villámgyorsan elkészíthetjük egy weboldal HTML struktúráját (természetesen nem csak erre jó, de most ezen a vonalon fogjuk vizsgálni).
A működése hihetetlenül egyszerű, csak beírjuk a rövidítést és nyomunk egy "TAB"-ot (fontos, hogy a kurzor a rövidítés végén álljon).
 
Nézzük is meg a működését különböző példákon keresztül:

1. HTML elem "ID"-val:

div#megnevezes -> <div id="megnevezes"></div>
p#megnevezes -> <p id="megnevezes"></p>
span#megnevezes -> <span id="megnevezes"></span>

2. HTML elem "class"-al:

div.megnevezes -> <div class="megnevezes"></div>
p.megnevezes -> <p class="megnevezes"></p>
span.megnevezes -> <span class="megnevezes"></span>

3. Gyermek elemek létrehozása

div.megnevezes>p.leiras
 
<div class="megnevezes">
<p class="leiras"></p>
</div>

4. Testvér elemek létrehozása

div.megnevezes+div.leiras
 
<div class="megnevezes"></div>
<div class="leiras"></div>
 
 
Végezetül pedig készítettünk pár gifet amin élesben is látható, hogy mennyire hatékony eszközről van szó és milyen mértékben tudjuk vele meggyorsítani a kódolási folyamatokat.

HTML5 váz

navigáció

unordered list készítése adott elemekből villámgyorsan (CTRL+SHIFT+G billenytűkombinációval hívható elő a panel)

különböző rövidítések akcióban

Kérj tőlünk ajánlatot, vedd fel velünk a kapcsolatot vagy keress minket e-mailben: hello@whiteelephant.digital!