Step 2 starts when you put the css-class in the target mj-text and write a matching mj-style. Step 1 led me to the mj-text with "I'm red and underlined"-the target mj-text. Email authors can do both of those with MJML, but we're learning to do them with CSS and HTML. This is where you'd decide to make the text "I'm red and underlined" (wait for it!), red and underlined. In this case, step 1 is complete with the MJML script above (you wouldn't have the mj-styles yet). Use CSS in mj-style to style the target DOM object. Then, in the HTML, find that class and the DOM object you'd style as an HTML author (the target DOM object). The objective now is to know where MJML will put the CSS class the exact stylings can come later. Add a css-class to the MJML and write an mj-style for the class you used. If you can't find MJML stylings to get the right rendering, identify the MJML tag you want to target. Here's an introduction to a technique you might use a lot as an email author with MJML. That's how that text got to be red, underlined, and italicized. The text in the div is affected by (1) the attribute within the div calling for italics, and (2) the attributes from class "red-text" (CSS and HTML rules) calling for red and for underlining on child divs. The div has an HTML attribute "font-style:italic" and text of "I'm red and underlined". This element has a class of "red-text" and a child div. My line 108 is part of an HTML table, in particular a td. The HTML inside is identical to the code within the MJML mj-style tag that contains "red-text". My line 75 is part of an HTML style tag MJML included. I found them with a search for "red-text" that should work in many other versions. They're probably tied to MJML version 4.7.1. I hope you'll see code you recognize as HTML and CSS. If you're using the URL above, touch/click the words "View HTML" near the top right of the rendering window. How did that happen? MJML created HTML let's look at the HTML. The text is red, underlined, and italicized. Indeed we see all those in the browser rendering. In the mj-text tag above, perhaps you'd expect the MJML syntax of font-style="italic" would italicize the text.In the mj-style containing ".red-text" (CSS code, remember), we specify we want the text to be red and underlined (CSS and HTML rules and effects).There are lots of live questions and answers at (signup: ).Ĭompared to the documentation, I used three lines (rather than one) and I added the MJML attribute font-style. The MJML team supports a VS Code plug-in. The community offers a desktop application. Otherwise, you'll want access to the MJML program and to MJML and HTML files. Mostly for others or for later readers: If you're not able to use the URL and wish to recreate the following, maybe you can copy-and-paste the above code into. There, you'll see the above script and its browser rendering. You might find this URL useful-I hope it won't go stale for at least a month. This is code from MJML documentation (almost, see below). MJML translates MJML markup to HTML, but email authors must depend on that translation process. All syntax, application rules, and effects come only from CSS and HTML.Įmail authors can apply MJML attributes and mj-class only to MJML components, not to HTML elements. That is, the code inside the mj-style tags is CSS, not either HTML or MJML. The MJML mj-style component supports specifying CSS code that MJML includes in the HTML. We can use MJML attributes both in and out of mj-classes. Similarly, in MJML we can interact with MJML components via MJML attributes and the MJML concept of mj-class. We can use attributes, both in and out of classes. In HTML, we can interact with DOM objects via CSS, sometimes using the concept of class. If we restrict ourselves to HTML and CSS constructs that email clients (Gmail, etc.) support, we can get good email results. That is, the MJML program translates the MJML markup into HTML and CSS. MJML depends entirely on HTML and CSS for browser effects.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |