Then moving on to the second part, I made a container with three columns and added one image to each column using mj-image tag by specifying image URL as src attribute, added the corresponding text below the mj-image tag using the mj-text tag. Then I made a container with one row and one column using mj-container, mj-section and mj-column tag and changed the container background color to #CB202D using background-color attribute, then In that container I wrote a heading which says `Hey! Your documentation generated successfully` with mj-text tag, Then you will get the red background top bar with the success message. So, In mj-head tag, I have imported all the necessary fonts using the mj-class tag and wrote my custom CSS in mj-style. The main goal of this example is to make a responsive email which looks like the image given below. #Mjml code for a line download#Hey! Your documentation generated successfully Preview it Download it Deploy it Thanks for using Yaydoc Here I’m sharing the snippet used for generating email in Yaydoc. For example mj-text, mj-image, mj-section etc… Mjml has a lot of react components pre-built for creating the responsive email. Then add mjml to your path export PATH= " $PATH./node_modules/.bin” Open in GitHub Desktop Open with Desktop. 222 lines (191 sloc) 5 KB Raw Blame Edit this file. Mjml is a responsive email generation framework which is built using React (popular front-end framework maintained by Facebook) Newsletter Builder with MJML components in GrapesJS - grapesjs-mjml/index.ts at master When going through the GitHub trending list, I came across mjml and was totally stunned by it’s capabilities. The problem with HTML email is adding custom CSS and making it responsive, because the emails will be seen on various devices like mobile, tablet and desktops. But then initially, Yaydoc was sending email in plain text without any styling, so I decided to make an attractive HTML email template for it. In Yaydoc, an email with a download, preview and deploy link will be sent to the user after documentation is generated.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |