Le MJML

Un framework qui va vous permettre de créer des emails responsives plus simplement.

MJML est un framework qui va vous permettre de créer des emails responsives plus simplement. Pour remplir cet objectif, MJML propose une syntaxe alternative à l'HTML avec une série de composants testés sur les différents clients email.

 

Structure

La structure d'un fichier mjml est relativement similaire à celle d'une page HTML avec une balise mjml racine qui contient deux sous-éléments :

  • mj-head qui contient les attributs de la page
  • mj-body qui contient le corps de l'email avec des mj-section.

Etendre le MJML

Sous le capeau, mjml utiliseReactJS pour créer ces composants et effectuer la conversion vers l'HTML final. Il est donc aussi possible d'étendre ce système afin de créer vos propres composants pour générer un code HTML spécifique. Afin de vous simplifier le travail un dépôt Github vous offre le boilerplate nécessaire pour commencer.

 

01.<mjml>
02.  <mj-head>
03.    <mj-font name="Open Sans" href="https://fonts.googleapis.com/css?family=Open+Sans" />
04.    <mj-attributes>
05.      <mj-all font-family="Open Sans" padding="0" align="center" color="#5E5E5E"></mj-all>
06.      <mj-class name="header" color="#FFF" text-transform="uppercase"></mj-class>
07.      <mj-button color="#FFF" background-color="#00c49b" align="left" font-weight="500" font-size="12" text-transform="uppercase" border-radius="37" height="37" inner-padding="0 15"></mj-button>
08.    </mj-attributes>
09.  </mj-head>
10.  <mj-body>
11.    <mj-container width="640">
12. 
13.      <mj-section padding="77 0 108 0" background-url="http://lorempicsum.com/mail/images/header.jpg" background-size="cover" full-width="full-width">
14.        <mj-column>
15.          <mj-image width="92" src="http://lorempicsum.com/mail/images/logo.png" padding-bottom="14"></mj-image>
16.          <mj-text mj-class="header" padding-bottom="74" font-size="19" font-weight="300">Awesome Designs</mj-text>
17.        </mj-column>
18.      </mj-section>
19.    </mj-container>
20.  </mj-body>
21.</mjml>

L'ensemble des composants disponibles sont accessibles dans la documentation.