This is a proof of concept, re-creating USWDS styles in MJML.
Email clients don't render everything the same way as web browsers -- for example, <button> element is not supported in email clients. There are many workarounds to get buttons to work in many email clients, each with pros and cons.
Tools like MJML help make this easier, by providing an abstraction layer over the complex markup we need to ensure cross-email-client compatibility.
I've also taken some inspiration from:
- https://caniemail.com
- https://www.goodemailcode.com/
- New Jersey Unemployment Insurance email templates: https://www.figma.com/community/file/1242850667740493704
Two files here:
- One example email template in the
.mjmlformat, with common typography elements and some buttons. - An approximation of USWDS base styles for emails in
styles.css(not thorough or tested; a work-in-progress)
To get this running locally, so you can test it:
- Install the MJML App
- Download this Gist
- Open the folder for this Gist in the MJML App
- Open the MJML online editor
- Copy-paste in the
.mjmlfile below into the web editor. - Copy-paste the
.csscontents below into the same file, in themj-head. Like this:
<mjml>
<mj-head>
<mj-style inline="inline">
PASTE HERE
</mj-style>
</mj-head>
</mjml>
- I think there are better ways we could pull out the typography CSS - I just grabbed the ones I thought were most important, manually.
- More components, like
alertand others. New Jersey Unemployment Insurance has some great examples. - If this is helpful, we could move this out of a Gist and into a full GitHub repository.
- We could make MJML components for some of these. I'm not sure we need to - the css/
mj-classapproach is pretty good! I think custom components are more important if there is DOM re-writing (like buttons -> tables)
