Using MJML in Flow to Create Responsive Email Layouts

This blog post is about using MJML Responsive Email Builder to create email templates in Flow. MJML lets you build responsive email templates in an own markup language (pretty similar to html). Like Twitter/Bootstrap it gives the user a preset of building bricks you can use. But this post is not about MJML itself, more about integrating it into the Flow-Framework. 
To get more information about MJML in general visit: https://mjml.io/ (it is really easy to learn)

... the installation of mjml. I Recommend installing it globally on your system via npm install -g mjml

Next you have to create a new mjml-template next to your standard html-template (if you already have one). If not just create one in Resources/Private/Mail/YourTemplate.mjml.
Fill your template with mjml-components according to the documentation. You also can rebuild the partials of your existing templates with mj-include: https://mjml.io/documentation/#mj-include
Start the watcher for your templates: mjml -w my-template
 

You also can use all your Fluid or own View Helpers in mjml. But defining the namespaces is a bit ugly. You cannot define them outside of mjml at the top of your template. You have to put them inside a mjml-component. I put them inside a raw-component at the top of my template:

As you can see I defined some empty namespaces to avoid rendering errors from Fluid. The reason is that mjml generates some tags inside the transpiled html template which Fluid interprets as View Helpers. To avoid an error of not existing View Helpers you have to define those namespaces as empty.
Here is an example of what mjml generates:

<!--[if mso]>
<xml>
	<o:OfficeDocumentSettings>
		<o:AllowPNG/>
		<o:PixelsPerInch>96</o:PixelsPerInch>
	</o:OfficeDocumentSettings>
</xml>
<![endif]-->

If you use the translation View Helper be sure to use it this way:

<span>
	<f:translate id="my.identifier"></f:translate>: {property}
</span>

Without the closing tag, mjml would transpile it in a way where the text behind the translation tag would be missing in the html-template.