How to use Materialize.css in an email?

Question

I'm trying to create an email template in Django which uses Materialize.css. Here is the template code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>New Activation</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style>
      /* Use the same logo size and positioning as in the eBay email to families */
      img.logo {
        width: 80px;
        margin: 30px 20px;
      }
      body {
        background-color: #f3f3f3;
      }
      /* Align the column with the logo */
      .col.lucy-col {
        padding-left: 20px;
        padding-right: 20px;
      }
      .card-title h4 {
        margin-top: 0px;
      }
      /* Use Materialize's default light blue color for card-action links (instead of an orange one) */
      .card-action.lucy-card-action a {
        color: #039be5 !important;
      }
      /* Make the table more compact vertically */
      td {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <img class="logo" src="https://s3-us-west-1.amazonaws.com/lucy-prod/images/logo.png" alt="LUCY"/>
    <!-- Materialize table within a Materialize card (cf. http://materializecss.com/cards.html and http://materializecss.com/table.html) -->
    <div class="row">
      <div class="col lucy-col s12 m6">
        <div class="card">
          <div class="card-content">
            <span class="card-title"><h4>New Activation</h4></span>
            <table class="striped">
              <tbody>
                <tr>
                  <td><b>Name</b></td>
                  <td>{{ first_name }} {{ last_name }}</td>
                </tr>
                <tr>
                  <td><b>Birth parent</b></td>
                  <td>{{ birth_parent }}</td>
                </tr>
                <tr>
                  <td><b>Email</b></td>
                  <td><a href="mailto:{{email}}">{{ email }}</a></td>
                </tr>
                <tr>
                  <td><b>Phone</b></td>
                  <td>{{ phone }}</td>
                </tr>
                <tr>
                  <td><b>Address</b></td>
                  <td>{{ address|linebreaksbr }}</td>
                </tr>
                <tr>
                  <td><b>Company</b></td>
                  <td>{{ company }}</td>
                </tr>
                <tr>
                  <td><b>Company email</b></td>
                  <td><a href="mailto:{{ company_email }}">{{ company_email }}</a></td>
                </tr>
                <tr>
                  <td><b>Stage</b></td>
                  <td>{{ stage }}</td>
                </tr>
                <tr>
                  <td><b>Baby arrived?</b></td>
                  <td>{{ date }}</td>
                </tr>
                <tr>
                  <td><b>First child?</b></td>
                  <td>{{ is_first_child }}</td>
                </tr>
                <tr>
                  <td><b>Tell us more</b></td>
                  <td>{{ tell_us_more|linebreaksbr }}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="card-action lucy-card-action">
            <a href={{ url }}>Case Management</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

When I hook it up to a view (passing in some dummy context), here is how it looks:

I'm trying to get this into an email using premailer. Here is the code snippet where I'm sending the email:

from premailer import transform
from django.mail import EmailMultiAlternatives

...

    message_html = transform(render_to_string('emails/activate_to_delivery.html', context))

    email = EmailMultiAlternatives(
        subject='A new family has activated!',
        body=message_text,
        from_email=settings.DEFAULT_FROM_EMAIL,
        to=self._get_recipients(family),
        reply_to=[family.point_of_contact_email])

    email.attach_alternative(message_html, "text/html")
    email.send()

However, when I send an email (through a TestCase), I get a bunch of WARNINGs and ERRORs (of which I've included a subset below):

(venv) Kurts-MacBook-Pro-2:lucy-web kurtpeek$ python manage.py test activation.tests.ActivationEmailTest
Creating test database for alias 'default'...
System check identified no issues (0 silenced).
WARNING Property: Unknown Property name. [18:3: word-wrap]
WARNING Property: Unknown Property name. [6:28081: -ms-text-size-adjust]
WARNING Property: Unknown Property name. [6:28107: -webkit-text-size-adjust]
WARNING Property: Unknown Property name. [6:28301: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:28463: -webkit-text-decoration-skip]
WARNING Property: Unknown Property name. [6:28557: -webkit-text-decoration]
WARNING Property: Unknown Property name. [6:28598: -moz-text-decoration]
ERROR   Property: Invalid value for "CSS Level 2.1" property: underline dotted [6:28636: text-decoration]
WARNING Property: Unknown Property name. [6:29334: -webkit-appearance]
ERROR   Property: Invalid value for "CSS3 Basic User Interface Module" property: 1px dotted ButtonText [6:29628: outline]
WARNING Property: Unknown Property name. [6:29704: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:29938: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:30114: -webkit-appearance]
WARNING Property: Unknown Property name. [6:30252: -webkit-appearance]
WARNING Property: Unknown Property name. [6:30305: -webkit-appearance]
WARNING Property: Unknown Property name. [6:30474: -webkit-box-sizing]
WARNING Property: Unknown Property name. [6:30545: -webkit-box-sizing]
ERROR   Property: Invalid value for "CSS3 Basic User Interface Module" property: inherit [6:30572: box-sizing]
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name.
WARNING Property: Unknown Property name. [1:18: -ms-text-size-adjust]
WARNING Property: Unknown Property name. [1:44: -webkit-text-size-adjust]
WARNING Property: Unknown Property name. [1:30: -webkit-text-decoration-skip]
WARNING Property: Unknown Property name. [1:1: -webkit-box-sizing]
WARNING Property: Unknown Property name. [1:36: -webkit-tap-highlight-color]
ERROR   Property: Invalid value for "CSS Level 2.1" property: 2.28rem [1:1: font-size]
ERROR   Property: Invalid value for "CSS Level 2.1" property: 1.52rem 0 0.912rem 0 [1:36: margin]
WARNING Property: Unknown Property name. [1:1: -webkit-box-shadow]
ERROR   Property: Invalid value for "CSS Level 2.1" property: 0.5rem 0 1rem 0 [1:19: margin]
WARNING Property: Unknown Property name. [1:64: -webkit-transition]
WARNING Property: Unknown Property name. [1:108: transition]
WARNING Property: Unknown Property name. [1:12: -webkit-box-sizing]
ERROR   Property: Invalid value for "CSS Level 2.1" property: 0 0.75rem [1:64: padding]
.
----------------------------------------------------------------------
Ran 1 test in 7.051s

OK
Destroying test database for alias 'default'...

If I check my inbox, the email looks like this:

Is there any way to fix this - that is, to use Materialize in emails? (In my case, it only has to work for GMail).

Alle · Answer 1 · 2018-08-01T08:22:14.370

2

E-mails do not support all CSS functions, I recommend you create your own CSS with alternative functions to achieve the same result.

Here's a handy website on which you can check what CSS you can and can't use for certain e-mail clients.

https://www.campaignmonitor.com/css/

edited Aug 01 '18 at 08:22

answered Jul 24 '18 at 12:34

Alle

48
8

score 1 · Answer 2 · answered Jun 24 '20 at 07:06

Just to provide you an option, look into MJML. It can be used programmatically with Node. It can create responsive and emails with all the common email clients via what is essentially a combination of HTML and CSS with baked in fixes for displaying through the various email clients.

https://mjml.io/

"MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices."

Example:

How to use Materialize.css in an email?

2 Answers2