GremoZurbInkBundle

Creating email templates is hard. This Symfony Bundle provides help.

The original bundle thampe/ZurbInkBundle is abandoned. This fork aims to provide a maintained version of the original project. I use this bundle at work, on daily basis, and I respect semantic versioning.

Do you have a good idea and want to contribute? Let's do it! Feel free to open an issue.

Upgrade

Latest tag of the original project is 2.2.6. You can use this release only changing your Composer requirements.
Latest 2.x tag of my fork is 2.3.0 and contains some bug fixes. You can use this release changing your Composer requirements and bundle name in the kernel.

Installation

Install the bundle via Composer:

composer require gremo/zurb-ink-bundle

Then enable the bundle in the kernel:

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Gremo\ZurbInkBundle\GremoZurbInkBundle(),
        // ...
    );
}

Usage

First we need to create a template for our HTML email. You can use Foundation for Emails and Inky or write it from scratch.

Working with Foundation for Emails and Inky

Foundation for Emails is a framework for building HTML responsive emails while Inky is a templating language that converts simple HTML tags into the complex table HTML required for emails.

Extend the base Foundation for Emails layout and override the content block:

{% extends '@GremoZurbInk/foundation-emails/base.html.twig' %}

{% block content %}
    {# Inky markup and plain HTML #}
{% endblock %}

The base layout includes Foundation for Emails CSS (inlined only). Custom styles can be added overriding the stylesheets block (see Adding styles).

From scratch

Not using Foundation for Emails or Inky markup? Extend the base layout and override the body block:

{% extends '@GremoZurbInk/base.html.twig' %}

{% block body %}
    {# Plain HTML #}
{% endblock %}

Custom styles can be added overriding the stylesheets block (see Adding styles).

Adding styles

Email clients typically support only a subset of valid HTML, and don’t have strong support for CSS (especially CSS in the <head> of the HTML email). Yahoo, Outlook, and even Gmail strip CSS that’s included in the <head> of your HTML, so in most cases CSS inlining is necessary.

Stylesheets can be added calling the zurb_ink_add_stylesheet Twig function inside the stylesheets block:

{# ... #}

{% block stylesheets %}
    {{ parent() }}

    {# Custom CSS (inlined only) #}
    {{ zurb_ink_add_stylesheet('css/style.css') }}
{% endblock %}

{# ... #}

By default this will only inline the CSS. Pass a truthy value as second argument to both inline and output the CSS into the <style> tag:

{# ... #}

{% block stylesheets %}
    {{ parent() }}

    <style type="text/css">
        {# Custom CSS (both inlined and outputted) #}
        {{ zurb_ink_add_stylesheet('@AppBundle/Resources/public/css/style.css', true) }}
    </style>
{% endblock %}

{# ... #}