Skip to content

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

Notifications You must be signed in to change notification settings

foundation/inky

Folders and files

NameName
Last commit message
Last commit date
Sep 1, 2016
Jul 21, 2020
Jul 24, 2020
Jul 29, 2020
Mar 28, 2016
Sep 1, 2016
Aug 2, 2020
Sep 10, 2020
May 18, 2016
Sep 1, 2016
Jul 2, 2016
Jul 29, 2020
Oct 26, 2021

Repository files navigation

Inky

Build Status npm version

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();