Layouts

Layouts are the foundation of any email template in Maizzle.

Besides the standard parent-child templating relation, you can use Layouts 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 layout.html file in there, and add a minimal boilerplate with tags to yield the CSS and the Template body:

<!DOCTYPE html>
<html>
<head>
  <if condition="page.css">
    <style>{{{ page.css }}}</style>
  </if>
</head>
<body>
  <block name="template"></block>
</body>

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

Template Blocks

The Layout above uses a <block> tag that acts like a 'marker'.

For each Template that extends this Layout, that marker is replaced with the contents of the Template's own <block name="template"> (as long as it has one, obviously).

Of course, you can use custom names for blocks, like <block name="content">.

Variables

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

You can use curly braces to output variables:

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

As you can see, inside curly braces you can write JavaScript expressions. These will be evaluated and the result will be output in your HTML.

Compiled CSS

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

<if condition="page.css">
  <style>{{{ page.css }}}</style>
</if>

We use 3 curly braces so that we output the variable without escaping it.

Environment

The environment name is available under page.env. You can use it to output stuff based on the build command that you ran.

For example, we could use page.env to output some content only when running the maizzle build production command:

<if condition="page.env === 'production'">
  <p>This text will show when running `maizzle build production`</p>
</if>

Root

You can define a path to the directory where your Layouts live:

// config.js
module.exports = {
  build: {
    layouts: {
      root: 'src/layouts',
    }
  }
}

This allows you to specify a src="" relative to the path in that root key:

<extends src="base.html">
  <block name="template">
    <!--  -->
  </block>
</extends>