Accelerate your development using Emmet on Modyo

Felipe Meyer

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.

Other Developer Tips

Carlos Solís

Instant Image Optimization with Liquid in Modyo

Optimizing images is essential for any website, especially if you’re aiming for fast load times and a great user experience.

Learn more

Customers

Carlos Solís

Creating Forms in Modyo

Forms are fundamental in any financial application. They help capture critical user information, such as personal data, preferences, and financial details.

Learn more

Widgets

Carlos Solís

Enabling Debug Mode in Modyo CLI

Debugging is an essential part of software development. It allows us to identify and fix errors, optimizing the performance and stability of our applications.

Learn more

Check all Developer Tips