MJML 4.6.0 and gutter improvements

In MJML 4, following popular demand, we introduced a new feature enabling the creation of gutters between columns. Below is an example of how it looked like.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column padding="16px">
        <mj-text container-background-color="lightgrey">I'm in a gutter column... but I need to set background color on each node!</mj-text>
      </mj-column>
    <mj-column padding="16px">
        <mj-text container-background-color="lightgrey">I'm in a gutter column... but I need to set background color on each node!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

As you can see, it was not that simple to achieve. Previously, to create gutters, each children inside a column needed its own container-background-color to have the desired results. Even worse, if you wanted to use a CSS border or border-radius,you needed to set it on each mj-column's children.

A known workaround would be to use a css-class on mj-column, then a mj-style and target inner <td> of mj-column... still following me? No ? Yeah I'm lost too.

Without further ado (drumrolls), let me introduce you to the inner- prefix! Now you can just set inner-background-color, inner-border or inner-border-radius to achieve the desire results on columns:

<mjml>
  <mj-body>
    <mj-section>
      <mj-column padding="16px" inner-background-color="lightgrey">
        <mj-text>I'm in a gutter column... and i'm so happy with those changes !</mj-text>
      </mj-column>
    <mj-column padding="16px" inner-background-color="lightgrey">
        <mj-text>I'm in a gutter column... and i'm so happy with those changes !</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

We hope you will enjoy this new feature and that creating gutter columns in your emails will now be as easy as creating responsive emails with MJML ✨!

Templating Pre-processors

If you’re working with templating language inside MJML in NodeJS, then this pull request added preprocessors to our MJML parser.

It allows you to modify the input string right before it’s parsed.

Thanks to our contributors, there are additional features and fixes worth checking out in this version. The full changelog is available here: https://github.com/mjmlio/mjml/releases/tag/v4.6.0

What’s next ?

We’re now looking to resolve one of the oldest and toughest issues reported by our users, namely custom attributes. A beta should come out soon, but let’s leave that for another post 🚀! If you want to get involved with the development of this feature, you can see what the current implementation is as described here and come discuss about it.