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

Contents

Carlos Solís

Consume APIs with the Modyo SDK in your JavaScript app

Learn how to easily integrate Modyo’s headless API into your JavaScript app using its SDK. Follow a step-by-step guide with a React example for seamless consumption.

Learn more

Channels

Carlos Solís

Configure Security Headers in Modyo to Strengthen Your Website

In a digital environment where threats are constant, ensuring the security of websites is essential. One of the best ways to protect your applications is through Security Headers, HTTP configurations that act as protective barriers against attacks

Learn more

Architecture

Carlos Solís

Domain Driven Design: How to Implement a Scalable Architecture for Your Business

Learn how Domain Driven Design (DDD) empowers you to build applications that align with your business. Apply DDD in microservices and micro frontends architectures to create scalable,and maintainable solutions,leveraging the power of Modyo.

Learn more

Check all Developer Tips