ZURB Inky email templating Language + CssToInlineStyles CSS inliner is the perfect match for creating responsive emails.
I made a simple example of how to quickly implement inky-premailer.
- Thampe for providing php implementation of Foundation for Email parser https://github.com/thampe/inky
- tijsverkoyen for making such a wonderful class to convert HTML into HTML with inline styles https://github.com/tijsverkoyen/CssToInlineStyles
The recommended installation way is through Composer.
$ composer require dreamvention/inky-premaileror add the package to your composer.json file directly.
<?php
use Dreamvention\InkyPremailer\InkyPremailer;
$inkyPremailer = new InkyPremailer();
$html = '<html><head><style>body{ background:#ccc; } .hello{ color:red; }</style></head><body><div class="hello">Hello World</div></body></html>';
$email = $inkyPremailer->render($html);
echo $email;It's really an awesome thing what ZURB Foundation guys have done with inky. Instead of counting all those td's and tr's you now have a dosen of tags and a clean markup.
This is HTML that an email uses to be responsive. Madness, right.
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>Put content in me!</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>And this is Inky markup
<container>
<row>
<columns>Put content in me!</columns>
</row>
</container>If you want to start right away using inky go here
Try the example or use ready made templates from Froundation.
You can also add links to CSS files either relative to your root folder or with full address.
<?php
use Dreamvention\InkyPremailer\InkyPremailer;
$inkyPremailer = new InkyPremailer();
$html = '<html><head><style>body{ background:#ccc; } .hello{ color:red; }</style></head><body><div class="hello">Hello World</div></body></html>';
$links = array();
$links[] = 'css/style.css'; // this will override the styles in the template file.
$styles = '.header { background:#fff; }'; //this is the final styles that will overwrite all the others.
$html = file_get_contents('template/basic.html');
$email = $inkyPremailer->render($html, $links, $styles);
echo $email;- First the styles in your html file are rendered.
- Then if you have added links to CSS, they will be rendered, rewriting styles added eariler.
This sometimes may be tricky so just stick to one way of adding CSS - in the HTML template file or adding CSS links via php.
$links and $styles are optional
See the LICENSE file for license info (it's the MIT license).