Is it possible to nest layouts?


reading the Foundation Emails docs, I found that Panini is some kind of mix of Handlebars and Jekyll. Panini took the FrontMatter block from Jekyll. The Jekyll docs show something really useful which can be done with that: Nesting of templates.

I tried whether that works with Foundation Email/Panini, but it doesn’t. Here’s what I did:


That’s simply the basic layout.

{{!-- This is the base layout for your project, and will be used on every page. --}}

<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" lang="{{lang}}" xml:lang="{{lang}}" class="{{template}}">

  <link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width">
  <!-- <style> -->

  <span class="preheader">{{description}}</span>
  <table class="body">
      <td class="center" align="center" valign="top">
          {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}}
          {{> body}}
  <!-- prevent Gmail on iOS font size manipulation -->
  <div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>



That’s basically the vanilla basic.html layout, but I removed the content and replaced it with {{> content }}

layout: default

<wrapper class="header">
    <row class="collapse">
      <columns small="6">
        <img src="">
      <columns small="6">
        <p class="text-right">BASIC</p>


  <spacer size="16"></spacer>
    <columns small="12">
      {{> body}}

  <wrapper class="secondary">

    <spacer size="16"></spacer>

      <columns large="6">
        <h5>Connect With Us:</h5>
        <button class="facebook expand" href="">Facebook</button>
        <button class="twitter expand" href="">Twitter</button>
        <button class="google expand" href="">Google+</button>
      <columns large="6" valign="bottom">
        <h5>Contact Info:</h5>
        <p>Phone: 408-341-0600</p>
        <p>Email: <a href=""></a></p>


That’s the actual email I’d like to create. The html only contains the content.

layout: basic
subject: My Basic Email Template Subject

<h1>Hi, Susan Calvin</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum
  asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident
  delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
<callout class="primary">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio
    dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad,
    alias eos!</p>

Unfortunately the output isn’t nested. It just loads the basic.html layout and renders the whole email. It skips putting the rendered basic.html into the default.html layout.

Is there a way to make that work or do you have another approach to reuse layouts that way?
I could create a merged basic and default layout, sure. But that would mean a change at the “default layout level”. So I’d need to change every layout by hand which would contradict the D.R.Y principle.