foundation / inky Goto Github PK

Convert a simple HTML syntax into tables compatible with Foundation for Emails.

Home Page: http://foundation.zurb.com/emails

JavaScript 100.00%

inky's Introduction

Inky

Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for Foundation for Emails.

Give Inky simple HTML like this:

<row>
  <columns large="6"></columns>
  <columns large="6"></columns>
</row>

And get complicated, but battle-tested, email-ready HTML like this:

<table class="row">
  <tbody>
    <tr>
      <th class="small-12 large-6 columns first">
        <table>
          <tr>
            <th class="expander"></th>
          </tr>
        </table>
      </th>
      <th class="small-12 large-6 columns first">
        <table>
          <tr>
            <th class="expander"></th>
          </tr>
        </table>
      </th>
    </tr>
  </tbody>
</table>

Installation

npm install inky --save-dev

Usage

Inky can be used standalone, as a Gulp plugin, or with a CLI. You can also access the Inky parser class directly.

Standalone

var inky = require('inky');

inky({
  src: 'src/pages/**/*.html',
  dest: 'dist'
}, function() {
  console.log('Done parsing.');
});

With Gulp

var inky = require('inky')

function parse() {
  gulp.src('src/pages/**/*.html')
    .pipe(inky())
    .pipe(gulp.dest('dist'));
}

Command Line

Install foundation-cli to get the foundation command.

Plugin Settings

src (String): Glob of files to process. You don't need to supply this when using Inky with Gulp.
dest (String): Folder to output processed files to. You don't need to supply this when using Inky with Gulp.
components (Object): Tag names for custom components. See custom components below to learn more.
columnCount (Number): Column count for the grid. Make sure your Foundation for Emails project has the same column count in the Sass as well.
cheerio (Object): cheerio settings (for available options please refer to cheerio project at github).

Custom Components

Inky simplifies the process of creating HTML emails by expanding out simple tags like <row> and <column> into full table syntax. The names of the tags can be changed with the components setting.

Here are the names of the defaults:

{
  button: 'button',
  row: 'row',
  columns: 'columns',
  container: 'container',
  inky: 'inky',
  blockGrid: 'block-grid',
  menu: 'menu',
  menuItem: 'item'
}

Programmatic Use

The Inky parser can be accessed directly for programmatic use. It takes in a Cheerio object of HTML, and gives you back a converted Cheerio object.

var Inky = require('inky').Inky;
var cheerio = require('cheerio');

var options = {};
var input = '<row></row>';

// The same plugin settings are passed in the constructor
var i = new Inky(options);
var html = cheerio.load(input)

// Now unleash the fury
var convertedHtml = i.releaseTheKraken(html);

// The return value is a Cheerio object. Get the string value with .html()
convertedHtml.html();

inky's People

Contributors

Stargazers

Watchers

Forkers

jplhomer candoimage navelpluisje ragboyjr digitallandes jacobjpope digideskio mshanken laczoka chrisjenglish andrewmnlv acezard vincentducorps rolandish krielkip dherges somewebmedia getglad arthurpf securecloud-biz sibsfinx clementparis016 chwine brandonbarringer bc-ian iansoper romellem nugit tommyteavee modulexcite purii yvmarques youearnedit graforlock miguelramosfdz sco-tt aaronmclayton marcandre stephenmoloney rbsx joaocunha cybernetics dudeonthehorse yadhn ohmyjersh tazzydemon jmfury stevesmename saurindashadia tomazzaman enterstudio jnasoy lukemeaden rayantony rgaz1962 michaelmcandrew easehr ampagency brendenseidel aliakseit bdo triadai licx santosg1123 wlodpawlowski andrewerrico stafftraveler arciisine mosk heldermattos kuba-kubula daks01 vosaul alexandrdrvn fscherwi robloach edheltur mknadia xerxes-j edwd algoan sampsoncrowley wlechowicz nelyj josephjlee evanre elcaptain andycoffey-uno grindpress gosignal sncf-connect-tech aryrabelo vncdias jwmunn x3nosiz lisunovdv lisocodes kelseythejackson uiforks capesepias

inky's Issues

xhtml self closing tags

Hello,

Since emails are written in XHTML 1.0 Strict, self closing tags should have a slash at the end of the name.

ie: <br> should be <br />

When I compile a file with Inky, the result is written in html5 style (<br>)

If you agree, I can make a pull request that solves this issue.

Thank you.

Callout innermost cell should be a TH

According to the SCSS, the callout cell should be a TH, but inky outputs a TD (as per the tests). Thus, coloring classes are not coloring anything.

Self-closing tags being changed

<hr />

Becomes

<hr>

Extraneous Dependencies in Programmatic Mode

I'm looking at integrating inky into my development process, and following the directions for using it programmatically, I don't see a need for pulling in vinyl and vinyl-fs (which has many transitive dependencies).

Is it possible to make those into peer dependencies (especially if you are using gulp) or provide a separate core package that only has the transformation piece as a package?

Implementation of gitflow workflow

Speaks for itself I think

text-center on button doesn't center the text

When using text-center on a I'd expect it to center the text on the button. Text doesn't center in a button when the text wraps into two lines (on a smaller device for example).

Programmatic Use Example Doesn't Work

Hi,

When I try the example in the readme

var Inky = require('inky').Inky;
var cheerio = require('cheerio');

var options = {};
var input = '<row></row>';

// The same plugin settings are passed in the constructor
var i = new Inky(options);
var html = cheerio.load(input)

// Now unleash the fury
var convertedHtml = i.releaseTheKraken(html);

// The return value is a Cheerio object. Get the string value with .html()
convertedHtml.html();

I get

convertedHtml.html();
              ^
TypeError: convertedHtml.html is not a function

It seems that i.releaseTheKraken(html); returns a string with both the inky src and the converted html src.

Is there a way of just getting the converted html?

thanks,

niall

ID tags are stripped and not replaced

Why:
Hubspot/Marketo use ID tags to differentiate sections and it doesn't make much sense to use Foundation for Emails/Inky if I'm going to need to inject a bunch of ID tags after running the build process sadly.

Expected Functionality:
Thought my ID tags would be placed the same way classes are placed.

Actual Functionality:
ID tags appear to just be dropped from HTML when Inky is rendered in both watch/build tasks.

Solution:
My best guess based on what I saw in the code for Inky is that this could be added to componentFactory.js to handle it on container, row, columns and any other components.

Tables and align attribute

I've found adding the html attribute align="center" to tables essential for rendering center aligned elements in outlook 2013 and 2016 in certain circumstances. I am currently adding the attribute manually after rendering my completed code to the dist folder. Would others see a benefit in having an option for defining this attribute within the precompiled templates? or does this exist? Other useful attributes for tables include cellpadding="0" and cellspacing="0" although I haven't seen a need for these so far as outlook rendering.

Let buttons open in new tab

Looking through the source code, I see how buttons are converted to anchor tags in componentFactory.js. Yet, there is no way to set target="_blank". I think this could be an easy addition and for my purposes, useful. Basically, if I wanted to take my email and host it on my website as a sort of archive, it would be beneficial to have certain links open in a new tab.

Something simple, like this starting at line 29 under case this.components.button:

var target = '';

if (element.attr('target')) {
    target = ' target="' + element.attr('target') + '"';
}

// If we have the href attribute we can create an anchor for the inner of the button;
if (element.attr('href')) {
    inner = format('<a href="%s"%s>%s</a>', element.attr('href'), target, inner);
}

[feature] Add `<code>` tag to inky

This would be a hot feature:
Add a <code> component tag to Inky that changes < to < and adds syntax highlighting.

Does anyone know of a library that can handle the syntax highlighting? Or how would the character conversion happen?

Conditional rendering comments

Hi guys, first of all thank you for making HTML templating so much easier. Here's a problem I encountered in my development tho.

When I write conditional tags for mso, Inky is not rendering the elements inside the tags. Is there any way to counter this?

Here's a code example:


Here's a screenshot of the result:
https://cl.ly/243O2q1M3u0w

Thanks in advance.

column offset not working on colums that have collapse class set on row

I'd expect columns to still have an offset when setting row class='collapse'. Right now that's not happening though. Is this an intended behavior? I consider it a bug.

Inliner still converts "=" to = and "&" to & and other special characters.

I've read the work being done on this issue, but I am using Foundation v2.2.1 and it is not fixed. Here's an example:

In my layout file I have the following code:
<a href="{{email.url}}{{email.urlsuffix}}{{womens}}</a>
These refer to the following front matter in the page:

---
url: "https://myurl.com"
urlsuffix: "/sfc3/index.cfm?changeWebsite=US_en"
womens: "&route=c_store.browseProductsByCategory&CategoryId=c4"
---

Foundation parses it like this:
<a href="https://myurl.com/sfc3/index.cfm?changeWebsite=US_en&route=c_store.browseProductsByCategory&CategoryId=c4</a>

That doesn't work for most email clients, and I can't manually find/replace all the instances by hand.

Could someone please help me with this issue? It's a real show-stopper for the project I'm working on, and I'm not getting anywhere with the existing solutions out there.

expander class breaks full-width image

Hi,

Inky automatically generates an expander class. This causes some problems when I try to show an image in a table cell.

<row> <columns small="5" large="5"> <p>some text</p> </columns> <columns small="5" large="5"> <img src="http://link-to-image.png" width="218" height="40" > </columns> </row> <row> <columns small="10" large="10"> <img src="http://link-to-image.jpg" > </columns> </row>

Both images cover only half width of the table cell instead of the full width. This happens in multiple clients.

After running the inline css, I manually deleted every expander cell. When I checked in Litmus, all the clients showed the correct result.

I am not sure why this expander cell is added? Is there a way to prevent inky from creating the expander class? Or is there a workaround?

thx!

Feature: Inky component for placeholder images

How useful is an Inky component for placeholder images?

Like <image height="300" width="600" alt="placeholder"></image>

Output: <img src="http://placehold.it/600x300" alt="placeholder">

floating in basic menu

When i use code like in example:
http://foundation.zurb.com/emails/docs/menu.html#basics

<menu>
  <item href="http://zurb.com">Item</item>
  <item href="http://zurb.com">Item</item>
  <item href="http://zurb.com">Item</item>
</menu>

.float-center class is still added to tr, like here:

<tr class="menu-item float-center">
  <a href="http://zurb.com">Item</a>
</tr>

How prevent that?

Main table wrapper not being generated

In the examples and other documentation (e.g. the grid), the main wrapper seems to be missing:

<table class="body">
    <tbody>
        <tr>
            <td class="center" align="center" valign="top">
                <table class="container">
                    <tbody>
                        <tr>
                            <td>

Is this something we should be hard-coding around our Inky templating code, or is there a component that handles this?

Bad encoding for an apostrophe

How can we reproduce this bug?

If you write an apostrophe :
<p>Merci de m'appeler</p>

What did you expect to happen?

<p>Merci de m'appeler</p>

What happened instead?

<p>Merci de m'appeler</p>

Probably due to cheerio

What email clients does this happen in?
All
Visible in Outlook

Merci de m'appeler

babel-register module does not come out of the box

Not a big deal but I just wanted to bring this to your attention that when I downloaded and used inky "npm run" did not work because it said babel-register module required so then I just installed it via NPM and it worked fine. Would be a good idea to have that already included.

Cyrillic characters disallow encode

How disallow encode Cyrillic characters ?

Example

<a href="#" class="header-menu__item">Мужчинам</a>

Must be

<a href="#" class="header-menu__item">Мужчинам</a>

Browser support

Is possible use Inky in browser ?

Question: Can this be used in the browser?

expander not used/needed?

I'be been using Inky through gulp and it doesn't render like the readme states. For instance passing.

<row>
  <columns large="6"></columns>
  <columns large="6"></columns>
</row>

produces this HTML

<table class="row">
  <tbody>
    <tr>
      <th class="small-12 large-6 columns first">
        <table>
          <tbody>
            <tr>
              <th>
              </th>
            </tr>
           </tbody>
         </table>
       </th>
    <th class="small-12 large-6 columns last">
      <table>
        <tbody>
          <tr>
            <th>
            </th>
          </tr>
        </tbody>
      </table>
     </th>
  </tr>
  </tbody>
</table>

Which differ from the README which also renders "expanders". I'm trying to create the following grid;

<row>
  <columns small="12" large="8" class="large-offset-2"></columns>
</row>

But since expander doesn't render, it will in fact take up 10 columns. I've solved it by adding an emtpy <columns small="12" large="2"></columns> but I'm not sure if that is the intended way of doing a narrower part of the email?

I'm using inky v.1.3.7

Snippets for Atom

Not an issue, more of a tip for building emails in Atom.

https://gist.github.com/rickysullivan/e3d03986bcc52cfa1337c7804eb62486

Let me know your thoughts.

Expand class on <button> causes duplicate <a> tag

<button class="expand" href="http://zurb.com">Button</button>

This is causing

<table class="button expand">
  <tr>
    <td>
      <table>
        <tr>
          <td>
            <center>
              <a href="http://zurb.com">
                <a href="http://zurb.com">Button</a>
              </a>
            </center>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Support for cheerio options

Right now, releaseTheKraken() replaces " with " (and other entties as well).

Issue 1: componentFactory should use elem.html() instead of $.html(elem)

Issue 2: it should be possible to pass cherio options to the inky() function --> already done on master

Columns are missing tbody

The HTML output of columns doesn't contain tbody (table > *tbody* > tr > td).

Reproduce

Use the following inky code and export it to dist.

<wrapper class="header">
  <container>
    <row class="collapse">
      <columns small="6">
        <img src="http://placehold.it/200x50/663399">
      </columns>
      <columns small="6">
        <p class="text-right">BASIC</p>
      </columns>
    </row>
  </container>
</wrapper>

npm run build

Output

The following output is generated (beautified).

inky: 1.3.5
foundation-email: 2.1.0

...
<!-- TEMPLATE: BODY -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="body" style="Margin:0;background:#fcfae7;border-collapse:collapse;border-spacing:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;height:100%;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;width:100%">
        <tr style="padding:0;text-align:left;vertical-align:top">
            <td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
                <table class="wrapper header" align="center" style="background:#fcfae7;border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                    <tr style="padding:0;text-align:left;vertical-align:top">
                        <td class="wrapper-inner" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
                            <table class="container" style="Margin:0 auto;background:#fcfae7;border-collapse:collapse;border-spacing:0;margin:20px auto;padding:0;text-align:inherit;vertical-align:top;width:580px">
                                <tbody>
                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                        <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;hyphens:auto;line-height:19px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word">
                                            <table class="row collapse" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%">
                                                <tbody>
                                                    <tr style="padding:0;text-align:left;vertical-align:top">
                                                        <th class="small-6 large-6 columns first" style="Margin:0 auto;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:298px">
                                                            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                <tr style="padding:0;text-align:left;vertical-align:top">
                                                                    <th style="Margin:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left"><img src="http://placehold.it/200x50/663399" style="-ms-interpolation-mode:bicubic;clear:both;display:block;max-width:100%;outline:0;text-decoration:none;width:auto"></th>
                                                                </tr>
                                                            </table>
                                                        </th>
                                                        <th class="small-6 large-6 columns last" style="Margin:0 auto;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0 auto;padding:0;padding-bottom:0;padding-left:0;padding-right:0;text-align:left;width:298px">
                                                            <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%">
                                                                <tr style="padding:0;text-align:left;vertical-align:top">
                                                                    <th style="Margin:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;padding:0;text-align:left">
                                                                        <p class="text-right" style="Margin:0;Margin-bottom:10px;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:19px;margin:0;margin-bottom:10px;padding:0;text-align:right">BASIC</p>
                                                                    </th>
                                                                </tr>
                                                            </table>
                                                        </th>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <!-- prevent Gmail on iOS font size manipulation -->
    <div style="display:none;white-space:nowrap;font:15px courier;line-height:0">&#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0;</div>
    <!-- /TEMPLATE: BODY -->
...

Standalone / Browser build

Would it be possible to have a standalone build of inky, similar to https://github.com/Daniel15/babel-standalone ?

I'd like to create a rails plugin to use inky within the asset pipeline.

I might be able to implement this myself if someone could outline where to start and/or generally how to accomplish it.

Inky escapes/converts single quote causing errors if used with another template language

I am using Jinja2 template language for final html rendering.
Everything works fine until i need to use strings as function arguments.
Inky escapes/converts them causing Jinja2 error:

<img src="{{ user.get_image('xs') }}">

Result:

<img src="{{ user.image_url(&apos;xs&apos;) }}">

Which causes:
TemplateSyntaxError at ... ("unexpected char u'&' at 14467",)

Any workaround or way to stop escaping single quotes?
Thank you.

Spacer table is causing text to display funny

The spacer class needs float: none on it to prevent weird things from happening to items of text below spacer tables. See how the words Hi Wolfman appear to be joining?

Before:

After:

Add inlining toolset

The Gulpfile we use in the Foundation for Emails template is a bit complicated. Maybe we can take some of those pieces and write functions that get bundled alongside the parser?

Inline CSS into HTML
Extract media queries from CSS
Inject media query-specific CSS into HTML
Compress HTML

Allow attributes on columns

It would be nice to be able to specify an attribute such as "valign" on a element. Some e-mail clients do not respect "vertical-align: top" rule in CSS (Outlook 2007, 2010, 2013) and as a result content of a column can end up floating in the middle of the column if another column contains more content.

Would this be something you would like someone to take a stab at?

Yahoo! Mail App iOS - Column/grid issues

I seem to be having a repeat issue in the Yahoo Mail App (not desktop), I have a couple ideas for fixing but they're quite hacky and in a round-a-bout way.

The Issue

Padding on the .column and .columns breaks the layout in iOS Yahoo Mail app.

(I've made my own gulp modifications to code in PUG - this does not affect the outputted code, just personal preference)

Code

doctype transitional
html(xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en")
    head
        link(rel="stylesheet" type="text/css" href="css/app.css")
        <!-- <style> -->
        meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
        meta(name="viewport" content="width=device-width")
        title.
            Lorem ipsum dolor sit amet
    body
        span.preheader.
            Lorem ipsum dolor sit amet
        table.body
            tr
                td.center(align="center" valign="top")
                    center.
                        container
                            row.bg-black
                               //- Body Content
                                columns(small="12" large="12").collapse
                                     spacer(size="30")
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at justo nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta, velit eget egestas malesuada, est metus ultrices dolor, eget pellentesque magna purus at purus.
                                    spacer(size="20")

Image Example without fix

Current fix

What has seemed to have fixed this issue is removing all left and right padding and then re-adding it in an added nested non-inky table cell - which seems a bit redundant especially when it's only for this particular email client.

# Same as above but replace body content with:
//- Body Content
columns(small="12" large="12").collapse
    table
        tr
           td.yahoo-content-padding
               spacer(size="20")
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse at justo nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum porta, velit eget egestas malesuada, est metus ultrices dolor, eget pellentesque magna purus at purus.
                spacer(size="20")

//
// Hacky yahoo mail responsive hack
// NOTE: Use with testing
// ------------------------------ //
@media yahoo {
    td.large-12.last, th.large-12.last,
    td.large-12.first, th.large-12.first,
    table.body .column, table.body .columns {
        padding-left: 0 !important;
        padding-right: 0 !important;    
    }
   
    // Re-apply the padding to a nested non-inky element: table > tr > td
    .yahoo-content-padding {
       padding-left: $global-gutter !important;
       padding-right: $global-gutter !important;
    }
}

Image Example with fix

Resolution

I'll hand it back to the community think tank to see what the appropriate solution is.
Ideally it would be good if the Inky template handled this in a sophisticated way, whether that's injecting more code for yahoo or if my hacky scss can be somehow can be integrated in.

The above examples are just ways in which I've been able to get across the line but I would love to see a more permanent solution for all!

Is it possible to add custom tag / attribute ?

Is there an easy way to add custom tag or attribute without editing Inky's core file ?

Simplify API

The API requires multiple steps right now to use, but this could easily be one.

Right now:

var Inky = require('inky');
var Cheerio = require('cheerio');

var inky = new Inky();
var $ = Cheerio.load('<column>Here is a column</column>');
inky.releaseTheKraken($);

Proposal:

var inky = require('inky');

var output = inky('<column>Here is a column</column>');

Have the primary export be a function that makes a new Inky(), loads syntax into Cheerio, runs the parser, and returns the output as a string. The Inky class can be another export.

Document new attributes

Add docs for how attributes can be passes in - especially valign

Merge styles into callouts (inky)

At the moment you can only have a defined padding, etc as per the settings in inky. It would be nice if internally it would merge some of the styles so you can override them for a certain callout.

I'm sure this would apply to most other components as well.

<callout>
    $callout-padding defines this to be 20px
</callout>

Would be nice:

<callout style="padding: 30px;">
   $callout-padding is essentially replaced with custom 30px.
</callout>

handle mustache curly braces

I use foundation-emails / inky to generate email templates. These templates have {{tags}} inside and are filled with mustache data before sending it.

In inky template I have this line:
<button href="{{buttonUrl}}">{{buttonText}}</button>

but compiling with inky completely drop my {{tags}}:
<table class="button text-center"><tr><td><table><tr><td></td></tr></table></td></tr></table>

desidered result:
<table class="button text-center"><tr><td><table><tr><td><a href="{{buttonUrl}}">{{buttonText}}</a></td></tr></table></td></tr></table>

Best regards,
Luca

Why not Grunt?

Is there a reason why grunt isn't supported?

Implementation of nuget package

The roadmap for this project includes adding a NuGet package.

I am after some clarification of what this means.

There are 2 possible ways I can see to use inky in a Visual Studio/.NET project:

Visual studio has a task runner which will run Gulp tasks at stages like pre-build. By using something like razorengine.template, one can design emails in razor and then use gulp to expand the inky markup to HTML and inline CSS to a new template. I can put up something like a codeproject tutorial to create, for example, a forgot password email (which adds a security token to the link at runtime) in a .net project. The advantage of this is speed, the disadvantage is CSS classes cannot be chosen based on runtime data. To allow classes to be altered at runtime a library like premailer.net could be used to inline CSS at runtime (but still having converted inky markup to HTML before the visual basic build via task runner).
Run inky each time an email is generated at runtime from within a .net based javascript interpreter such as Jint.net. This will be unnecessarily slow & I cannot think of a useful use scenario.

I cannot see how a nuget package would help, but might have missed something. Let me know if you would like me to create a tutorial with some screenshots for point 1, and if so, where you would like such a tutorial.

Does inky have support for html5 video?

I was surprised to realise that embedding html5 video in an email with an image fallback is totally doable.
However there seem to be certain caveats to keep in mind: https://www.emailonacid.com/blog/article/email-development/a_how_to_guide_to_embedding_html5_video_in_email

It would be nice if I could just drop in a video tag and have inky deal with the fallback hacks.

Button for outlook

Hello. Thanks for inky.
What about possibility modify button tag like this gist:
https://gist.github.com/elidickinson/9424116#file-html_email_buttons_1-html
or like this guide:
https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

after compiling

After compiling ink to html , the css remain inside < style > tag.
Should not be as inline css?

Mention grunt-inky Grunt plugin in your README?

Hello there! :)

Firstly, I want to thank you for your awesome work with this template language! It saved me alot of time and brain!

After that I want to introduce you a Grunt plugin I published recently to be able to easily use Inky via Grunt.js and wanted to ask you, if you want to mention it in your README.md so Grunt users see it easily.

The Grunt plugin can be found here: https://www.npmjs.com/package/grunt-inky

I don't want to advertise my own plugin, I am just asking because I saw a "gulp way" of using Inky and saw the need for a "Grunt way" for those Grunt users out there. I can fully understand if you don't want to mention it on your README. I will be fine with that.

Greetings,
Miw0

Bulletproof Email Buttons?

I saw somewhere in the foundation-emails roadmap that there's the idea of using the Bulletproof Email pattern for rounded buttons. Has anyone tried this? I'd be happy to take a stab at it, but I'd like know if anyone has worked on it before. Also, it seems like the only way to pull this off is define the style elements as attributes in the tag so it makes it into the VML markup.

Missing LICENSE.md

This repository is missing a license - I assume it's MIT like zurb/foundation-emails, but without a LICENSE file I can't confirm that for use in my projects. Could one be added?

Spacer's   is being rendered on Apple Mail's preview

The character   present in <spacer>'s source is being rendered as a visible space on Apple Mail's preview but not on the actual message (tested on 9 and 10). Switching it to a regular   seems to sort the issue. Any reason not to use   instead?

The layout source code (full message dist code here):

 <body>
    <!-- <style> -->
    <table class="body">
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            <spacer size="10"></spacer> <!-- ===== THE CULPRIT, RIGHT BEFORE THE MESSAGE'S BODY ===== -->
            {{> body}}
          </center>
        </td>
      </tr>
      ...
    </table>
    ...
</body>

Panini templating skipping font declarations on in-page variables on iOS devices

Note: I'm using the most recent Zurb Stack for this project.

I've got a master template for an email which utilizes in-page variables that are initialized within the page's front matter in accordance with the Panini docs.

The issue is occurring in the "Class Topics" section of this email template.

All the variable data is being inserted from the front matter correctly; however, I've noticed that one of them consistently doesn't get its font correctly defined according to my scss. This seems to only occur on iOS devices. Other clients are not affected.

Litmus results (Note the device names at the top of each image.)

The results on the iOS devices display one of the items in the $body-font-family font instead of the family I have declared in app.scss.

Similar results occur when I was using Panini's <#each item> method to insert the variables.

Below are is my Inky markup and scss. I've individually declared the font's for classes to make sure this wasn't a scss compilation issue.

// index.html

---
classdate: September 13-15, 2016
classtitle: removed
classlocation: Seattle, WA
classtimes: 8am - 5pm
classurl: removed
instructors: removed
instructorcompany: removed
classjustification: If you crave an intense dose of insider LDAR knowledge from various industry perspectives, this session is for you. LDAR for Experts is for the seasoned LDAR coordinator seeking advanced LDAR training. Other professionals who might attend include environmental advisors, maintenance supervisors with continuing LDAR responsibilities, contractor site supervisors, and program managers.
benefit1: Firsthand insight on LDAR regulations, enforcement initiatives, and sticky issues from various industry perspectives
benefit2: Cutting edge best management practices for your LDAR program and audits
benefit3: Techniques for implementing robust leak detection programs
benefit4: An understanding of the newest LDAR developments, including AWP, GHG impacts on LDAR, and the high-flow sampler
benefit5: The know-how to optimize and manage a sustainable LDAR compliance program
instructorinfo: has more than 23 years experience in the environmental field focused on air quality compliance in the refining, petrochemical, and natural gas processing industries. His core experience in the implementation and operation of fugitive emission source Leak Detection and Repair (LDAR) programs. In  22 years as an LDAR contractor he has held the following positions relating to LDAR; Monitoring Technician, Lead Technician, Inventory Technician, Environmental Monitoring Site Supervisor, Local Project Manager, Regional Project Manager, Regulatory Compliance and Quality Control Manager and the executive title Director of Quality Control and Training. 

---
<wrapper class="headlineRow">
  <center>
    <container>
      <row class="headlineRow">
        <columns small="12" large="12">
          <spacer size="30"></spacer>
          <h6 class="dateLocationText text-center">
            {{ classdate }}
          </h6>
          <h1 class="classTitle text-center"> 
            <a href="{{ classurl }}">
              {{ classtitle }}
            </a>
          </h1>
          <h6 class="dateLocationText text-center">
            {{ classlocation }} / <font color="#000000">{{ classtimes }}</font>
          </h6>
        </columns>
      </row>
      <row class="headlineRow">
        <columns small="12" large="12">
          <h6 class="headlineInstructorText text-center">
            Instructors: {{ instructors }}
            <br>
            {{ instructorcompany }}
          </h6>
        </columns>
      </row>
      <row class="headlineRow">
        <columns small="12" large="12">
          {{>cta}}
        </columns>
      </row>
    </container>
  </center>
</wrapper>

<container>
  <row class="bodyRow">
    <columns small="12" large="12">
      <spacer size="30"></spacer>
      <h5 class="bodyJustification text-center">
        {{ classjustification }}
      </h5>
      <spacer size="10"></spacer>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
      <h6 class="benefitsHeadingText">
        Class Topics:
      </h6>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
      <center>
          <h6 class="benefits text-center">
            {{ benefit1 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit2 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit3 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit4 }}
          </h6>
          <h6 class="benefits text-center">
            {{ benefit5 }}
          </h6>
      </center>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
        <spacer size="10"></spacer>
        <h4 class="instructorHeading text-center">
          Learn from the BEST
        </h4>
        <h6 class="instructorBio text-center">
          {{ instructorinfo }}
        </h6>
    </columns>
  </row>
  <row class="bodyRow">
    <columns small="12" large="12">
      {{>cta}}
    </columns>
  </row>
</container>

// app.scss

@import 'settings';
@import 'foundation-emails';

$hse-yellow: #FFE72D;
$hse-orange: #F26350;
$hse-footer-text: #bfad22;

// Header
.headerRow {
    background-color: $black;

    .headerInner {
        background-color: $black;
    }

    .brandTextLink {
        color: $hse-yellow;
        font-weight: 100;
        text-decoration: underline;
    }
}

// Headline Section
.headlineRow {
    background-color: $hse-yellow;  

    .dateLocationText {
        font-family: Georgia, Times, "Times New Roman", serif;
        color: $black;
        font-weight: bold;
        font-style: italic;
    }
    .classTitle {
        color: $hse-orange;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-transform: uppercase;

        a {
            color: $hse-orange;
            text-decoration: underline;
        }
    }
    .headlineInstructorText {
        color: $hse-orange;
        font-family: Georgia, Times, "Times New Roman", serif;
        font-style: italic;
    }

}

// Body
.bodyRow {
    background-color: $white;

    .bodyJustification {
        color: $hse-orange;
        font-family: Georgia, Times, "Times New Roman", serif;
    }

    .benefitsHeadingText {
        color: $black;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        text-transform: uppercase;
        text-align: center;
    }

    .benefits {
        color: $dark-gray;
        font-family: Georgia, Times, "Times New Roman", serif;
        text-align: center;
    }
    .instructorHeading {
        color: $hse-orange;
        font-family: Georgia, Times, "Times New Roman", serif;
        font-style: italic;
        margin-bottom: 0;
    }
    .instructorBio {
        color: $dark-gray;
        font-weight: 100;
        font-family: Georgia, Times, "Times New Roman", serif;
    }
}


// Footer
.footerRow {
    background-color: $hse-yellow;

    .footerText {
        color: $hse-footer-text;
        font-size: .7em;

        a {
            color: $hse-footer-text;
            text-decoration: underline;
        }
    }
}

Apologies for the non-abbreviated code, but I want to make sure this issue isn't being caused by something else in the markup.

Is it possible to configure the speation between links in a menu?

We want something like this

But using the menu in inky we get

So, is it possible to adjust that spacing? :)

Thanks