Layouts

The foundation of any email template in Maizzle is the Layout. These are 'master' pages that contain the boilerplate of your emails. They pull in named content sections from any page that extends them.

In Maizzle, layouts usually contain the doctype, <head> and <body> tags, with all the necessary child tags, like <meta> or other wrapper tables that always stay the same.


Creating A Layout

Layout files are Laravel Blade files, stored in the source/_layouts directory. For example, here is the master.blade.php layout in Maizzle:

<!DOCTYPE {!! $page->doctype ?? 'html' !!}>
<html lang="{{ $page->language ?? 'en' }}" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
  <meta charset="{{ $page->charset ?? 'utf8' }}">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="x-apple-disable-message-reformatting">
  @if($page->title)<title>{{ $page->title }}</title>@endif

  @if(is_object($page->googleFonts) && $page->googleFonts->isNotEmpty())
  <!--[if !mso]><!--><link rel="stylesheet" href="https://fonts.googleapis.com/css?family={{ $page->googleFontsString() }}"><!--<![endif]-->
  @endif

  @include('_partials.css.email')
  @stack('head')
</head>
<body class="{{ $page->bodyClasses ?? '' }}">

  @if($page->preheader)
  <div class="hidden text-0 leading-0" lang="{{ $page->language ?? 'en' }}">{!! $page->preheader !!}</div>
  @endif

  @yield('content')

</body>
</html>

As you can see, it's an email-tailored HTML boilerplate. It uses Laravel Blade syntax to insert page variables and partials, which are being pulled from either the config or from the page's Front Matter.

Notice the @yield('content') Blade directive. This pulls in a section named content from any page that extends this layout. More on sections, in the Templates documentation and in the Laravel Blade docs.

Referencing Variables

Variables, like those defined in the config or with Front Matter at a template level, are referenced via $page->varname. In the above example, variables like $page->language or $page->charset are pulled from the config, while others like $page->preheader have been defined with Front Matter in the templates.

Jigsaw allows you to overwrite config variables with Front Matter, from each template. So if one of your emails needs a different charset, you can easily override the global one.

Read the Jigsaw docs on custom Front Matter variables.

Extending Layouts

By default, Maizzle defines an extends key in your config, so *.[blade].md files will automatically extend the master Layout that the framework provides.

// config.php

/*
|-----------------------------------------------------------------------------
| Layout                                    https://maizzle.com/docs/layouts/
|-----------------------------------------------------------------------------
|
| Define a master layout that all templates will extend by default.
|
| Maizzle comes with a default layout that sets various tags to
| use settings from your config, but you can of course create
| your own layouts and extend them at a template level,
| with front matter.
|
*/
'extends' => '_layouts.master',

Of course, you can have each Template extend its own Layout, by specifying it with Front Matter:

// emails/letter.blade.md

---
extends: _layouts.letter
---

... or, with a Blade directive:

// emails/example.blade.php

---
title: Extending with a Blade directive, though Front Matter would work too
---

@extends('_layouts.example.master')