Creating email templates is hard. This Symfony Bundle provides some help:
- Foundation for Emails 2 Integration for awesome and responsive emails. Checkout their documentation.
- Use normal CSS files for styling, add them via
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/styles.css") }}. - Automatic inline styles via the
{% ìnlinestyle %}tag (powered by Tijs Verkoyen's CssToInlineStyles). - Imports your CSS rules also in html head via
{{ includeStyles(zurb_ink_styles) }} - New in 2.0: Inky-Template Support via the
{% inky %}tag (powered by https://github.com/thampe/inky)
You can install this bundle using composer
composer require hampe/zurb-ink-bundle
or add the package to your composer.json file directly.
Php 5.4 is now required. Make sure your composer.json, does not set the platform to php 5.3.*:
"config": {
"bin-dir": "bin",
"platform": {
"php": "5.4.0"
}
},
After you have installed the package, you just need to add the bundle to your AppKernel.php file:
// in AppKernel::registerBundles()
$bundles = array(
// ...
new Hampe\Bundle\ZurbInkBundle\HampeZurbInkBundle(),
// ...
);
If you want to use the zurb ink framework, extend the HampeZurbInkBundle::base.html.twig.
{% extends 'HampeZurbInkBundle:FoundationForEmails:2/base.html.twig' %}
{% block preHtml %}
{# add your css files here, please use a bundle relative path #}
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/style1.css") }}
{{ zurb_ink_styles.add("@YourBundle/Resources/public/css/style2.css") }}
...
{% endblock %}
{% block content %}
{# html #}
{% endblock %}
{% extends 'HampeZurbInkBundle::base.html.twig' %}
Note: If you prefer not to have the CSS-Styles also in the <head> of your HTML-Document, you can override the headStyles-Block: {% block headStyles %}{% endblock %}. Be aware that some CSS-Rules can't be realized with inline-styles, like :hover-States or @media-Queries (both uesed by ZURB Ink Framework)!
{% spaceless %}
{# add your styles before the inlinestyle tag #}
{{ zurb_ink_styles.add("@YourBUndle/Resources/public/css/style.css") }}
{% inlinestyle %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
{% block headStyles %}
<style type="text/css">
{% autoescape false %}
{{ includeStyles(zurb_ink_styles) }}
{% endautoescape %}
</style>
{% endblock %}
</head>
{% inky %} {# inky-tag for inky-template support #}
<body>
{% block body %}
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{% block content %}
{% endblock %}
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> </div>
{% endblock %}
</body>
{% endinky %}
</html>
{% endinlinestyle %}
{% endspaceless %}
See the LICENSE file for license info (it's the MIT license).
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent