Accelerate your development using Emmet on Modyo
Emmet is a tool that is integrated in the Channels module in Modyo, which helps us to improve the HTML and CSS workflow. It quickens the way we write the code, using abbreviations that resolve into the complete code.
Emmet Syntax in HTML
The syntax in Emmet in HTML is very simple, you write any element without < > tags and by pressing Tab, Emmet will automatically generate the HTML tag.
For example, if we write html and press the tab:
<html></html>
Siblings +
h1+h2+p+btn
<h1></h1> <h2></h2> <p></p> <button></button>
Child >
table>tr>td
<table>
<tr>
<td></td>
</tr>
</table>
Climb-up ^
table>tr>td^^ul>li
<table>
<tr>
<td></td>
</tr>
</table>
<ul>
<li></li>
</ul>
Multiplication *
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Grouping ()
(table>tr>td)*2
<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table>
(table>tr>td)+ul>li
<table>
<tr>
<td></td>
</tr>
</table>
<ul>
<li></li>
</ul>
Emmet syntax in CSS
In CSS, Emmet's syntax is not the same as HTML but it helps in ways similar to a autocomplete function. In the same way that in HTML, in CSS we use the shortcuts and press Tab.
For example, you can type m and press Tab to resolve to:
margin: ;
But we can still give it a value by adding a number, for example m10 autocompletes to:
margin: 10px;
If we leave a blank after the number it will give us the measurement in pixels but we can add p, e, or x to give us the following measurements:
p → % e → em x → ex
w100p
width: 100%
m10p30e5x
margin: 10% 30em 5ex
As with HTML we can add more properties by nesting with + for example:
m10+p10p
margin: 10px; padding: 10%;
If you want to know more about Emmet, check their documentation.
Photo by Olivier Jodoin on Unsplash.
By
Felipe Meyer
