CSS Frameworks for Email

Operating Systems, Editors, and Tools
1

I’m looking for a CSS framework that will let me create nice-looking HTML emails quickly.

Here are a few that I found in my research. If anyone else knows of any, leave a comment below.

MJML

This looks relatively simple, but it might not support templating as well as some other options. I haven’t looked closely enough to tell yet.

https://mjml.io/

Maizzle

This one is based on Tailwind CSS and looks pretty good.

Foundation for Emails

Foundation for Emails looks good, but I’m not sure if it’s what I’m looking for.

https://get.foundation/emails.html

CSS Tricks has a comparison of Foundation and MJML here:
https://css-tricks.com/choosing-a-responsive-email-framework mjml-vs-foundation-for-emails/

2

I once worked on a project that generated HTML email. We found it easiest to run an internal web server and do an HTTP request to get the content and add the resulting HTML as a MIME part.

1 Like
3

I’m trying MJML on a Django 3.1.3 site at the moment. I installed django-mjml and installed mjml in the root of my project with npm.

I experienced an error message when running the development server:

django.core.exceptions.ImproperlyConfigured: Problem to run command "mjml -i -s"
[Errno 2] No such file or directory: 'mjml'
Check that mjml is installed and allow permissions for execute.
See https://github.com/mjmlio/mjml#installation

I think the problem was that I didn’t have mjml installed globally. (I temporarily installed it globally to check.) It seems like the program would require npx mjml to find it in the local node_modules directory.

After looking more closely at the docs, I fixed it by adding this to settings.py:

MJML_EXEC_CMD = './node_modules/.bin/mjml'

I’m adding this comment here in case it can help someone who is searching in Google for that error message.

4

One thing that I didn’t see in the django-mjml docs is how to render the template, but this worked:

from django.template.loader import get_template

context = {"some_name": "some_value"}
html = get_template("path/to/mjml/template.html").render(context)

Then send the HTML into the transactional email system or however it’s being sent. I used html2text to create text versions of the emails.

So far it’s working out.