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-headqui contient les attributs de la pagemj-bodyqui contient le corps de l'email avec desmj-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.
