gremo / zurb-ink-bundle
Creating email templates is hard. This Bundle provides help.
Installs: 228 382
Dependents: 0
Suggesters: 0
Security: 0
Stars: 24
Watchers: 4
Forks: 37
Open Issues: 2
Type:symfony-bundle
Requires
- php: ^5.6.0 || ^7.0
- lorenzo/pinky: ^1.0
- symfony/framework-bundle: ^2.8 || ^3.3 || ^4.0
- tijsverkoyen/css-to-inline-styles: ^1.5 || ^2.0
- twig/twig: ^1.23 || ^2.0
README
⛔ Warning ⛔ this project is now archived. It's ok to use it for legacy Symfony 2/3 projects, it should work fine. New Symfony project should use
twig/cssinliner-extra
andtwig/inky-extra
(see inlining CSS and use inky).
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
- Last tag supporting Symfony 2 and 3 is 4.0.1. After that, this project only support Symfony 4 and 5.
- 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 config/bundles.php:
<?php // config/bundles.php return [ // ... Gremo\ZurbInkBundle\GremoZurbInkBundle::class => ['all' => true], // ... ];
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 %} {# ... #}