Layouts

Layouts are the foundation of any email template in Maizzle.

Use them to define markup that doesn't need to change often, like doctype, and <head> or <body> tags, with all the necessary child tags, like <meta>.

Creating Layouts

Layouts are typically stored in the src/layouts directory.

Simply create a mylayout.njk file in there, and add a minimal boilerplate with tags to yield the CSS and the Template body:

<!DOCTYPE html>
<html>
<head>
  {% if css %}<style>{{ css }}</style>{% endif %}
</head>
<body>
  {% block template %}{% endblock %}
</body>

You can use it as a Layout that your Templates can extend.

Default Layout

The build.layout file path will be used as the default Layout for any Template that does not explicitly extend a Layout:

// config.js
module.exports = {
  build: {
    layout: 'src/layouts/default.njk', // or master.html, master.email, master.blaster...
    // ...
  }
  // ...
}

AMP For Email

Maizzle includes an amp4email.njk Layout. It's basically the default Layout, with a few tags adapted to the AMP HTML for Email requirements.

Check out the ⚡4email example →

Template Blocks

A Layout simply pulls in a Nunjucks {% block %} named template:

{% block template %}{% endblock %}

It looks for a block with the same name in every template that extends this layout, inside your templates directory.

Read more about blocks, in the Nunjucks documentation ↗

Variables

Variables from your environment config or from the Template's own Front Matter are available in a Layout under the page object:

<meta charset="{{ page.charset or 'utf8' }}">

The compiled Tailwind CSS for the current Template is available under css :

{% if css %}<style>{{ css }}</style>{% endif %}