Getting Started with Maizzle, a Framework for Rapid Email Prototyping
Tags: todayilearned, html, css, emaildev
Published: 2020-02-03 14:47:12

---
title: Getting Started with Maizzle, a Framework for Rapid Email Prototyping
published: true
description: I set up my first Maizzle project and documented my experience.
tags: #todayilearned #html #css #emaildev
cover_image: https://i.imgur.com/Ss11EMT.png
---

For the past several years, coding HTML emails has been part of every job I've had. However, despite all the modern front-end tooling that's been created in recent years, my email development process has remained relatively basic and manual. Write static HTML, inline CSS by hand, copy/paste, etc.

A few times I tried twisting a framework into outputting high-quality HTML emails, but was never successful.

Fast forward to last week, I saw a tweet about [Maizzle](https://maizzle.com/), another framework for building HTML emails. I was initially skeptical, but that changed after a few minutes clicking around the documentation.

> Maizzle is an email framework that helps you quickly build emails with utility-first CSS and advanced, email-specific post-processing.

This piqued my interest: utility classes are _kinda_ like writing inline CSS, which is how I currently develop emails.

So last week I set aside a few hours to dive in. I also opened up a blank text document to record my reactions as I went through the process. This is that document. 😀

---

# Getting started

Alright _(cracks knuckles)_, let's start by setting up a new project.

I followed the instructions in [Maizzle's installation docs](https://maizzle.com/docs/installation/). I’m not the most comfortable using the command line, but I was able to follow these instructions and get a new project up and running locally within in a few minutes.

![starter templates rendered locally.](https://i.imgur.com/Rhk9DbK.png)

Nice, that wasn’t too bad.

# Editing

Let’s open up the transactional email and see if I can change the title of `templates/transactional.njk`…

![Two emails side by side, the second with an updated title.](https://i.imgur.com/IqjtvGx.png)

Nice, so this is where the template files live, I can edit them and see my changes in a browser, and better than best `browsersync` automatically reloads the browser even time I save a change in my editor.

I love this idea of building emails using JavaScript partials. Not the newest idea, but there aren’t many off-the-shelf options to do this specifically for email (I’ve tried unsuccessfully to hack a few static site generators to build emails.

# Configuring

Ok so the Javascript part of this is cool, but let's check the actual HTML that was rendered since that’s the final email that someone would actually experience.

![Email files in Finder with a large file size.](https://i.imgur.com/gBRit2Q.png)

Whoa…! This email is `433kb`??? For this tiny little thing? Let’s open up the rendered HTML and see what’s going on.

![HTML source with lots of unused CSS included.](https://i.imgur.com/fee6m3D.png)

Oh… the email includes ALL of TailwindCSS 🤦‍♂️

TailWindCSS is a utility-first CSS framework comprised of tons of tiny, single-purpose CSS classes. And it looks like our email has the entire framework included in the `<head>`. All 25,000+ lines of CSS would certainly account for that file size!

I remember seeing something about this in Maizzle's docs…

[Here it is](https://maizzle.com/docs/environments/). We can configure build environments by editing their respective `config.js` files. Looks like `config.js` is for local development, so let’s pop that open.

Looks like `inlineCSS` and `removeUnusedCSS` are both set to `false`. Let’s change those to `true` so that our CSS is inlined (still a thing in email development, yea) and all unused CSS classes are removed.

Let’s save and re-run Maizzle.

![Email files in Finder with a small file size.](https://i.imgur.com/rRYnflA.png)

Much better!

There are some nice options in the config file. I’ll review in-depth later, but we’re back on track for now.

# Templates and Partials

Checking out the folder for partials and thinking of use cases…

* A header + logo for each product line
* A footer for each ESP (and their unsubscription info).
* Spacers and other non-editable components
* 🤔 I wonder if you can specify a component and send in variables (Eg. Define the code / design of a button but send in a unique URL and text for each instance). Will research.

I also like the option to have multiple base templates… handy for those one-off fancy designs.

# Tailored for Email Development

I love the choice of utility classes for email development. Writing a bunch of small, single-purpose CSS classes to style a component is really a more efficient way to writing inline CSS. (✋ I still write most of my email code by hand and inline the CSS.)

Maizzle also includes a lot of niceties specific to email developers, such as [sensible and customizable CSS inlining](https://maizzle.com/docs/css-inlining/), [accessible `<table>` tags](https://maizzle.com/docs/extra-attributes/), [setting base image url ONCE](https://maizzle.com/docs/base-image-url/), [automatically adding url parameters](https://maizzle.com/docs/url-parameters/) automatically prevent widows, and more.

Also while TailwindCSS defaults to modern units like `rem` and `vh`, Maizzle’s default output uses units like `px` and attributes like `bgcolor` (also still a thing in email development). Maizzle does this by customizing `tailwind.config.js` with email-friendly CSS. This is a huge piece that I was missing from previous attempts to use a modern web framework to build emails 🔥.

Worth noting is that we’re still writing HTML in Maizzle. Other options like MJML and Foundation abstract away some of the verbose HTML in custom tags like `<column>` and `<row>` and `<button>`. While some find that freeing, I find it limiting. Maizzle allows us to write the HTML we *really* want.

Maizzle abstracts away *some* annoyances of email development by solving them with modern web technologies, allowing:

* web devs to code proper emails using tools & techniques they're already familiar with.
* email devs to build emails quick without losing control of their code.

---

I’m excited to start porting over parts of [our email design system](https://stackoverflow.design/email/) into a Maizzle project to see how it holds up.