How to use Codedmails Premium?

22nd October 2020

codedmails blog

This article will explain how efficient it is to use the premium version of codedmails to create responsive HTML emails quickly with semantic code which will work on all email clients.

With our templates you write less code and generate full blown semantic HTML emails. We use MJML as the email markup language, which helps us create responsive emails and email client specific code. You also end up writing 80% less code. You can read more about MJML later in this article.

Downloading

After downloading the premium version, unzip the file and open the folder in any code editor of your choice. e.g i am using VSCode. You should have the following folder structure. File Structure

  • MJML folder contains all the source files
  • HTML folder contains the rendered HTML versions

Editing Templates

The code screenshot below is of General Email Template Dineos with live split preview. We will explain later how you can use the split view in VSCode. Code Split

Now you can edit your files, change text, images etc as per you needs. Once your changes are complete you can now build the HTML version which can be now used anywhere. To build the HTML version please follow the simple steps below.

If you check the ready to use HTML code of the template above, you will see approximately 500-600 lines or codes. Now compare that with approximately 120 lines of code with clean mjml components like mj-section ( to create sections), mj-text (to add text), etc. That's around 80% less code. With the source files you can edit the templates and keep the structure clean and readable.

Installation

Codedmails requires Node.js v4+ to run. Open the folder using any terminal and then Install the dependencies and devDependencies by running the command below.

$ npm install -d

Development

Build, watch and run a server locally

The command below will run the server and also watch for any MJML file changes.

$ npm run start

You can visit http://127.0.0.1:8080/ or http://localhost:8080 to view them in your browser.

Build all the HTML files

$ npm run build

The above command read all the mjml files inside static/templates/mjml and build them inside static/templates/html folder. Now you can copy the HTML and use it in your projects.

BONUS: MJML - The Email Framework

All the templates are designed using MJML syntax. If you don't know about MJML, it is a markup language designed to code responsive emails. It is easy to understand and code especially the layouts e.g containers, sections, columns etc . For more information please visit MJML website. We will cover more about MJML in a different article .

If you are using VS Code, we recommend using VSCode MJML Extension to use the split view for easy editing of mjml source files.

MJML Extension VS Code Preview

Thank you and happy emailing.

If you have questions or feedback please send us an email to support@codedmails.com. We would love to hear from you ❤️.

This article is about the premium version of codedmails which contains all the source files and can be used for commercial/enterprise projects. If you like to use the template for open source or personal purposes, you can always use the free version. Click here to read more about the free version.

Guideline for HTML Emails

The most important guideline for HTML emails is that CSS layout just doesn’t work everywhere. The major email clients don't support it at all or have to use client specific HTML. Unless you are using a very simple email design or all your customers us a modern email client, <table> tags are the way forward at least 99% of the time. And when you use tables to create layouts, you end up with a lot of HTML code.

For more email related news, articles and tutorials

OR

Subscribe to get news directly to your inbox

We will only email important stuff once a month