Same for tags, it needs to be wrapped inside or tag. We can't use tags without wrapping it in a tag. Now you may ask, can I just use tag alone since we are not styling anything or use any features from until the ? The answer would be no.
#Mjml set font code
To finish off this section, let's add tag along with the expected styles from the design - see the code below. Every single column has to contain something because they are responsive containers, and will be vertically stacked on a mobile view but in this case it won't because of its parent preventing it. Column width should be expressed in percentage to be responsive, if not defined will be 100% divided by the number of its siblings. This tag enables us to horizontally organize the content within our sections. This tag prevents columns from stacking on mobile. By default, it has a width of 600px, since that's also the width of our sections based on the design, so we don't need to specify the width. These tags are intended to be used as rows within our email template. So below, I've added the tag inside the tag. It's good to add a comment to your sections so it would be easier to locate them when maintaining it in the future. Now, let's build the first section of our email template. The syntax is so simple! Email Title section This is another thing which I like about MJML. Moving on to tag for now, we can set the background color of our entire template with the code below: Īs you can tell by now, from setting our default styles to setting the body's background color, it looks exactly the same way we define it in CSS. We can also apply styles to a group of components using tag to help us reduce duplications in our code we'll get to use that later as well. We can add MJML component tags (like, ,, etc.) inside tag to override the default settings on a specific component. I have also set the padding to 0 because some components have default padding, by resetting it to 0 will make it easier for us to construct our template especially when following the expected design. Using tag makes it easier to override the style of MJML components via one tag.
#Mjml set font update
Let's update the code with the following below: Next, let's define a default style for our MJML components. The tag allows us to control on which breakpoint the layout should go desktop/mobile. To start with, let's define the breakpoint by writing the following code below: Inside tag we can define things like breakpoint, attribute overrides, create reusable classes and styles and inside tag is where the sections of our email template will be. It's more of an extension of what we already know and used to. It doesn't feel like writing code in a new language. That's what I like about MJML, it doesn't look too foreign.
This should look very familiar to you since it's like, and in regular HTML. Open the main file src/index.mjml and type the following below: Let's set up the initial structure of our MJML code. Delete or clear the contents of the following below: This is the index.html served by our local server. If you end up seeing the directory of /src/, just refresh the page and you should see your email template. You should be able to see the boilerplate with the text Hello World displayed on your browser. This command will open your default browser and go to If it doesn't, you can do it yourself too. Once installed, you can run the local development by typing the script in your terminal: yarn run dev
#Mjml set font install
Next, type the following below in your terminal to install the dependencies of the boilerplate: yarn install Then, open the terminal in Visual Studio Code. Make sure to install them if you haven't!Īlright, let's start by opening our project in Visual Studio Code. This is the link to the email template we'll accomplish by the end of this post, you can use it as your reference throughout this tutorial.īy the way, upon writing this post, I assume that you have some web development background and basic knowledge regarding npm, yarn, HTML and CSS. To start, you would need to setup your local development for MJML framework, I've written a separate post just for that, but you can also just clone the boilerplate to save time: git clone mjml-sample-edm If you're new to it, then you're in the right place because I'm going to build an email template using MJML framework in a step by step way so you can follow me along. Originally created by a team of developers at Mailjet, MJML's objective is to simplify the way people design responsive emails. It's called MJML - short for Mailjet Markup Language. If you haven't heard about it yet, there's already an email framework that makes it less painful to build responsive email templates.
0 kommentar(er)
