- Edit css in mjml how to#
- Edit css in mjml manual#
- Edit css in mjml code#
getStyles: this method was created precisely for the reason mentioned above. While this is valid for HTML & MJML attributes, it is not valid to use CSS styles on our HTML elements (as they should be inside a style attribute) htmlAttributes: this method adds to the rendered output the attributes that are passed to it as an argument, following the syntax attribute="value". Here is the important difference between the two: On line 4, we define that no other MJML component can be used inside it. On line 2 and 3, we define that mj-basic-component can be used inside mj-hero and mj-column. Edit css in mjml how to#
You’ll discover how to use and pass attributes in your own components, as well as how to make them render the output you want.įirst, we are registering the dependencies of our components, to state where it can be used. Let’s start with a component that simply outputs a text wrapped inside 2 star icons wrapped inside a HTML.
Let’s now look at the custom components located in /components and start with the simplest one: MjBasicComponent.js. You now know how the gulp build command you ran earlier works! Creating your own component
Edit css in mjml code#
Pretty useful to build as you code your own component!
watch: this task will watch any change made to the components located in /components as well as the index.mjml file and automatically run the compile function when changes are detected. build: this task will simply run the compile function when executed. In the first 13 lines, we’re importing all the dependencies needed (such as MJML but also each component located in /components), while from lines 14 to 16, we’re registering each component thanks to the registerComponent method of mjml-core (importing them only is not enough).įinally, we simply declare two gulp tasks, that are available with gulp *task* ( *task* being the actual name of the task as described below). : this file is responsible for building each component and registering them in MJML, so that they can be used in index.mjml.īefore looking at the components themselves, let’s look at the file to understand how to render our own components. You should not edit any file in this folder. /lib: this folder will contain the compiled output of the components located in /components. /components: this folder contains the custom components we will use and that we are referring to in index.mjml. index.mjml: this file is the MJML file where we will use our custom components. Now that we installed and used the boilerplate, let’s look at what’s inside. Understanding the structure of the boilerplate You just rendered your first custom components! Open the index.html file which was created in the same repository to see the 3 custom components we’ll study today. Then, go to the folder where you downloaded it: cd mjml-component-boilerplate 
Edit css in mjml manual#
To get you started smoothly, we created a boilerplate which will relieve you from having to do any manual setup.įirst, open a terminal and download the boilerplate with git: git clone Let’s create our first custom component together. With MJML 4, we made the creation of a custom component even simpler.
This can be especially useful if you need to reuse a specific layout across your templates. However, it is also possible to create your own components. Some of those tags can be very high-level (such as mj-carousel which abstracts the complexity of having a functional carousel in an email, with all necessary fallbacks), while others are more basic ( mj-text for example). If you use a google font api it seems to work correctly.Built around components, MJML comes with a library of standard tags. I have found it difficult to use custom fonts using the mj-font tag.
0 kommentar(er)
