Let's take the following layout to illustrate this: Nesting Basic layout example You can also manually set the size of your columns, in pixels or percentage, by using the width attribute on mj-column. If we add a third one, it goes down to 33%, and with a fourth one to 25%. Since the first section defines only 2 columns, the engine will translate that in a layout where each column takes 50% of the total space (300px each). Let's take the following layout to illustrate this: The default behavior of the MJML translation engine is to divide the section space (600px by default, but it can be changed with the width attribute on mj-body) in as many columns as you declare.Īny mj-element included in a column will have a width equivalent to 100% of this column's width. We'll remind them when useful but better start learning them early on. Columns are what makes MJML responsive.īelow, you'll find some basic rules of MJML to keep in mind for later. ![]() Inside any section, there should be columns (even if you need only one column). The body of your email, represented by the mj-body tag contains the entire content of your document:įrom here, you can first define your sections: Like a regular HTML template, we can split this one into different parts to fit in a grid. Optional setting when inlining css, see mjml-cli documentation for more infoĪ free-to-use MJML API is available to make it easy to integrate MJML in your application. Option to keep comments in the HTML outputĪvailable values for the validator: 'strict', 'soft', 'skip'įull path of the specified file to use when resolving paths from mj-include components You can pass optional options as an object to the mjml2html function: optionĭefault fonts imported in the HTML rendered by MJML Print the responsive HTML generated and MJML errors if any Inside Node.js import mjml2html from 'mjml' /* Validation level: 'strict', 'soft' or 'skip' Mjml eMjmlConfigOptionsĪllows to use the options attribute from. mjmlconfig file in the current working directory, if any mjmlconfig file in the specified path or directory to include custom components Options for html minifier, see mjml-cli documentation for more info Preserve some tags when inlining css, see mjml-cli documentation for more info Watches the changes made to (file or folder) The outputs first line contains the file in the format Writes the output to stdout without an comment containing the source file in the first line You can pass optional arguments to the CLI and combine them. Command line interfaceĬompiles the file and outputs the HTML generated in output.html mjml input.mjml -o output.html
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |