Streamline coding with Emmet and custom abbreviations

OL Connect comes equipped with Emmet snippets and expansion capabilities. This allows you to input abbreviations in source editors to generate HTML and CSS markup, significantly improving your source code editing process. It eliminates the need to type lengthy code and remember precise notations. Furthermore, Emmet lets you create your custom abbreviations. This article explains some basic Emmet concepts and shows how to add your own abbreviations.

Emmet basics

Emmet is available in the HTML and CSS source editors of OL Connect Designer. This means it is available in the source view of the main editor but also in the source view of snippets, handlebars snippets and in the CSS/SCSS editors.

HTML tags

The foundation of Emmet abbreviations are shortcuts for basic HTML tags. For example, entering p{hello world} and pressing tab generates a <p> element and adds the text between curly braces as text node.

<p>hello world</p>

Emmet uses a CSS like syntax to add ID’s and Class names. Enter div#shipto.address and press tab expands to:

<div id="shipto" class="address"></div>

Nested elements

Use the ‘greather than’ sign (>) to create child elements. Enter ul>li>a{Upland Software} and press tab to create a list with a list item containing a hyperlink.

<ol>
    <li><a href="">Upland Software</a></li>
</ol>

Attributes

Adding attributes again uses a CSS like syntax. The following takes the example shown above and populates the href attribute of the hyperlink. Admittedly this makes things a bit more tedious.

Enter ul>li>a[href="https://uplandsoftware.com"]{Upland Software} and press tab to create the following code:

<ul>
    <li><a href="https://uplandsoftware.com">Upland Software</a></li>
</ul>

Dummy text

The child notation can also be used to invoke the Lorem Ipsum generator. Enter p>lorem and press tab to create a paragraph with dummy text.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum maxime nobis voluptas ad quos sit sapiente iusto aut autem consectetur odio esse blanditiis vero molestias aliquam tempora illo nostrum voluptate!</p>

To limit to the number of words simply append a number to ‘lorem’. Type p>lorem5 to generate a paragraph with 5 words.

Repeating elements

Adding the multiply operator (asterisk) allows the respective element to be repeated. The following combines the previous examples. The multiply operator is used to generated 5 list items (<li> elements) and a word limit is added to the Lorem Ipsum generator.

Type ol>li*5>a>lorem3 and press tab generates the following:

<ol>
    <li><a href="">Lorem ipsum dolor.</a></li>
    <li><a href="">Libero voluptates aliquid.</a></li>
    <li><a href="">Necessitatibus assumenda dicta!</a></li>
    <li><a href="">Atque ex odit.</a></li>
    <li><a href="">Earum rerum fugiat.</a></li>
</ol>

Visit the HTML section in the Emmet Cheat Sheet for more inspiration.

CSS

Emmet abbreviations are also available in CSS stylesheet editors. Below some common quick CSS examples.

Enter p4mm and press tab to create:

padding: 4mm;

Enter mt4mm and press tab to create:

margin-top: 4mm;

Enter tar and press tab to create:

text-align: right;

Visit the CSS section in the Emmet Cheat Sheet for more inspiration.

Creating custom abbreviations

Emmet also offers the ability to add custom abbreviations, which can be useful for creating complex HTML snippets and even defining shortcuts for common Handlebars patterns. Let’s explore a few examples.

Address block

Letters, invoices, contracts, postscards typically need an address block. Address blocks can be created in various ways. The following shows a snippet of an address block constructed with a <div> element where each address line is wrapped in a paragraph (<p> element). The advantage of using paragraphs is that they automatically collapse when they don’t contain any content, providing an effective way to hide empty lines like the company name or streetaddress2 line

The elements have a class assigned that can be used in CSS stylerules. The code is also prepared with Handlebars expressions. These need to match the field names in your Data Model in order to work.

<div class="address">
    <p class="address__line">
        {{title}} {{firstName}} {{lastName}} 
    </p>
    <p class="address__line">
        {{company}} 
    </p>
    <p class="address__line">
        {{streetaddress1}} 
    </p>
    <p class="address__line">
        {{streetaddress2}} 
    </p>
    <p class="address__line">
        {{postal}} {{city}} 
    </p>
</div>

To create an abbreviation for this snippet:

  1. Copy the snippet
  2. Choose: Window > Preferences > Emmet > Snippets
  3. Click New…
  4. Enter a new for the abbreviation, for example: addr
  5. Set the Context to HTML so it is active for our source editors.
  6. Paste the copied snippet in the Pattern field.
  1. Click OK to close the dialog. The abbreviation is added to Emmet.
  2. Click Apply and Close.
  3. Open the source view of an HTML editor (for example a Handlebars snippet)
  4. Type attr and press tab to insert the HTML fragment.

Handlebars if statements

Another great example are abbreviations for Handlebars block helpers. Below a basic Handlebars if-else statement.

{{#if somefield}}
    <p>Lorem ipsum dolor sit amet</p>
{{else}}
    <p>Sed ut perspiciatis unde omnis</p>
{{/if}}

The abbreviation for this setup could be something like ifelse.

An other example would be a pattern to insert an if statement with a comparision using eq using the ifeq abbreviation.

{{#if eq somefield "XYZ"}}
    <p>xyz</p>
{{else}}
    <p>abs</p>
{{/if}}

Hope these examples inspire you to setup your own abbreviations. Abbreviations are saved with the application. In the Preferences dialog, you’ll find an Emmet section that allows you to export and import sets. Attached a small collection with some Handlebars abbreviations, the address example and an abbreviation that generates HTML for an entire letter.

Download OL Connect Designer Emmet samples.zip (upzip before importing).