README

ZURB Inky email templating Language + CssToInlineStyles CSS inliner is the perfect match for creating responsive emails.

Example

I made a simple example of how to quickly implement inky-premailer.

Thanks to

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

Installation

The recommended installation way is through Composer.

$ composer require dreamvention/inky-premailer

or add the package to your composer.json file directly.

Usage

<?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;

Inky templating Language

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.

Add links to CSS files

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;

How CSS is rendered?

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

License

See the LICENSE file for license info (it's the MIT license).

dreamvention / inky-premailer

Maintainers

Details