Documentation

Quick start

Revolvapp uses templates with simplified email syntax. This makes it easier and faster to create templates

Compare, this is a typical html email for a button:

<table cellpadding="0" cellspacing="0" border="0" width="auto" style="width: auto; font-size: 18px; font-weight: normal; background-color: rgb(0, 145, 255); color: rgb(255, 255, 255); border-radius: 24px; border-collapse: separate;">
    <tr>
        <td align="center" valign="top" style="vertical-align: top; line-height: 1; text-align: center; font-family: Roboto, Arial, Helvetica, sans-serif; border-radius: 24px;">
            <a target="_blank" href="https://example.com" style="display: inline-block; box-sizing: border-box; cursor: pointer; text-decoration: none; margin: 0px; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; background-color: rgb(0, 145, 255); color: rgb(255, 255, 255); border-radius: 24px; border: 1px solid rgb(0, 145, 255); padding: 14px 40px;">
                Check it out
            </a>
        </td>
    </tr>
</table>

Looks scary. Doesn't it?

And here's a simplified syntax of the same button that is used in Revolvapp:

<re-button href="https://example.com">
    Check it out
</re-button>

It's very simple and reliable. Revolvapp itself will generate reliable HTML, the code of all elements of the email and this code will display perfectly in different email clients.

Create the template #

As in the usual html inside Revolvapp template, everything starts with tags: html, head, and body.

<re-html>
    <re-head>...</re-head>
    <re-body>...</re-body>
</re-html>

Next body is divided into three areas: header, main, footer

<re-html>
    <re-head>...</re-head>
    <re-body>
        <re-header>...</re-header>
        <re-main>...</re-main>
        <re-footer>...</re-footer>
    </re-body>
</re-html>

The header usually displays the logo, email menu and other head information. Header is an optional area, you may not want to use it if it is not provided by the design.

The main contains the body of the email and all the main blocks with information. The main required element of the template.

The footer contains address, social links, how to unsubscribe, and other secondary info. Footer is an optional template area.

Blocks #

Blocks are the basic building unit of the template. Everything inside the template is made up of blocks. Any tag, must be placed in the block.

<re-html>
    <re-head>...</re-head>
    <re-body>
        <re-header>...</re-header>
        <re-main>
            <re-block>
                <re-heading>...</re-heading>
            </re-block>
            <re-block>
                <re-text>...</re-text>
            </re-block>
        </re-main>
        <re-footer>...</re-footer>
    </re-body>
</re-html>

There can be several tags in one block.

<re-html>
    <re-head>...</re-head>
    <re-body>
        <re-header>...</re-header>
        <re-main>
            <re-block>
                <re-heading>...</re-heading>
                <re-text>...</re-text>
            </re-block>
        </re-main>
        <re-footer>...</re-footer>
    </re-body>
</re-html>

Grids #

The grid helps divide the content into columns. In this case, the block will be the column itself and the elements do not need to be wrapped additionally in the block.

<re-main>
    <re-block>
        <re-grid>
            <re-column width="290px">
                <re-image src="..."></re-image>
            </re-column>
            <re-column-spacer width="20px"></re-column-spacer>
            <re-column width="290px">
                <re-heading>...</re-heading>
                <re-text>...</re-text>
            </re-column>
        </re-grid>
    </re-block>
</re-main>

Properties #

Properties are tag attributes that define styles, such as text color, background etc.

<re-text color="#555">...</re-text>
<re-heading level="h2">...</re-heading>
<re-image src="https://example.com/my-image.jpg"></re-image>

See all the properties of each tag .