22-02-2017 15:00:00

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.

Le PSD utilisé dans cette vidéo a été créé par Corey Lewis

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.
<mjml>
  <mj-head>
    <mj-font name="Open Sans" href="https://fonts.googleapis.com/css?family=Open+Sans" />
    <mj-attributes>
      <mj-all font-family="Open Sans" padding="0" align="center" color="#5E5E5E"></mj-all>
      <mj-class name="header" color="#FFF" text-transform="uppercase"></mj-class>
      <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>
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-container width="640">

      <mj-section padding="77 0 108 0" background-url="http://lorempicsum.com/mail/images/header.jpg" background-size="cover" full-width="full-width">
        <mj-column>
          <mj-image width="92" src="http://lorempicsum.com/mail/images/logo.png" padding-bottom="14"></mj-image>
          <mj-text mj-class="header" padding-bottom="74" font-size="19" font-weight="300">Awesome Designs</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

Les composants disponibles sont accessibles dans la documentation.

Etendre le MJML

Sous le capeau, mjml utilise ReactJS 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.