Layouts
The workflow in Maizzle revolves around the concept of Layouts, Templates and Components.
A Layout is basically a Component that contains the doctype
, <head>
and <body>
tags of your HTML - the kind of code that changes rarely and can be reused.
Layouts may include a <yield />
tag, which can be used to render a Template. This allows us to create a parent-child relationship between Layouts and Templates.
In Maizzle we add this <yield />
tag in the <body>
of the main.html
Layout, to define where a Template's HTML should be injected.
Getting started
Layouts are typically stored in the src/layouts
directory.
Layouts must include a <yield />
tag, which is where the Template's HTML will be rendered.
Here's a very basic layout.html
:
<!doctype html>
<html>
<head>
<style>
@tailwind components;
@tailwind utilities;
</style>
</head>
<body>
<yield />
</body>
<style>
tag like above or through a
<link>
tag that references a CSS file.
When creating a Template, you may use that Layout like this:
<x-layout>
<!-- your email template HTML... -->
</x-layout>
As you can see, the <x-layout>
tag name is based on the Layout's file name, with the .html
extension removed, here are some examples:
Layout file name | Layout tag name |
---|---|
src/layouts/main.html | <x-main> |
src/layouts/alt.html | <x-alt> |
Read more about this in the Components docs.
Tailwind CSS
In order for Tailwind CSS to work, you need to include it in a <style>
or <link>
tag.
style tag
When using a <style>
tag, you can include Tailwind's utilities
and components
by using the @tailwind
directive:
<!doctype html>
<html>
<head>
<style>
@tailwind components;
@tailwind utilities;
</style>
</head>
<body>
<yield />
</body>
@tailwind base
because it contains CSS resets that won't work or are not needed in HTML emails. Also, some resets use the
*
selector, which can cause issues when CSS is inlined.
link tag
Maizzle also supports <link rel="stylesheet">
tags - it will try to read the file from the href
attribute and process it with PostCSS (including Tailwind CSS).
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="src/css/tailwind.css" inline>
</head>
<body>
<yield />
</body>
inline
attribute on the
<link>
tag, this will replace it with a
<style>
tag that can be inlined and is generally better supported in email clients.
Then, in your tailwind.css
file:
@tailwind components;
@tailwind utilities;
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 the curly braces expression syntax to output variables in a Layout:
<meta charset="{{ page.charset || 'utf8' }}">
Basic JavaScript expressions are supported inside curly braces. These expressions will be evaluated and the result will be rendered in your HTML.
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, you 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>
<env:production>
tag,
see the docs
.