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
>
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.
14.
<
mj-column
>
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.