Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: foundation/inky
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.3.6
Choose a base ref
...
head repository: foundation/inky
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: develop
Choose a head ref
Loading
Showing with 5,524 additions and 213 deletions.
  1. +1 −0 .gitignore
  2. +3 −3 .travis.yml
  3. +4 −11 README.md
  4. +43 −0 bin/inky-browser.js
  5. +9 −0 dist/inky-browser.js
  6. +19 −0 gulpfile.js
  7. +1 −0 index.js
  8. +17 −10 lib/componentFactory.js
  9. +5 −1 lib/inky.js
  10. +1 −10 lib/makeColumn.js
  11. +2 −2 lib/util/getAttrs.js
  12. +14 −9 package.json
  13. +161 −107 test/components.js
  14. +96 −60 test/grid.js
  15. +5,148 −0 yarn.lock
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/node_modules
*.DS_Store
test/fixtures/_build
*.swp
6 changes: 3 additions & 3 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
language: node_js
node_js:
- "0.12"
- "4.4"
- "5.9"
- "10"
- "12"
- "node"
15 changes: 4 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Inky

[![Build Status](https://travis-ci.org/zurb/inky.svg?branch=master)](https://travis-ci.org/zurb/inky) [![npm version](https://badge.fury.io/js/inky.svg)](https://badge.fury.io/js/inky)
[![Build Status](https://travis-ci.com/foundation/inky.svg?branch=master)](https://travis-ci.com/foundation/inky) [![npm version](https://badge.fury.io/js/inky.svg)](https://badge.fury.io/js/inky)

Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for [Foundation for Emails](http://foundation.zurb.com/emails), a responsive email framework from [ZURB](http://zurb.com).
Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for [Foundation for Emails](https://get.foundation/emails).

Give Inky simple HTML like this:

@@ -75,14 +75,7 @@ function parse() {

### Command Line

Install [inky-cli](https://github.com/zurb/inky-cli) to get the `inky` command. The first option is a glob of input files, and the second option is a folder to output them to. Add the `--watch` flag to re-compile when files are added or changed.

```bash
npm install inky-cli --global
inky src/pages/**/*.html dist --watch
```

Doesn't support advanced settings at the moment.
Install [foundation-cli](https://github.com/foundation/foundation-cli) to get the `foundation` command.

## Plugin Settings

@@ -92,7 +85,7 @@ Doesn't support advanced settings at the moment.
- `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](https://github.com/cheeriojs/cheerio)).

## Custom Elements
## 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.

43 changes: 43 additions & 0 deletions bin/inky-browser.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
var cheerio = require('cheerio');
var Inky = require('../lib/inky');

var inky;

window.setupInky = function(opts, cb) {
opts = opts || {};
opts.cheerio = Inky.mergeCheerioOpts(opts.cheerio);
if (typeof inky === 'undefined') {
inky = new Inky(opts);
}

// This transform function takes in an element and calls a callback.
function transform(html, callback) {
var convertedHtml = inky.releaseTheKraken(html, opts.cheerio);
callback(null, convertedHtml);
}

cb(transform);
}

if(typeof(window) !== 'undefined') {
window.runInky = function(opts, elem) {
if(typeof(elem) === 'undefined') {
elem = opts;
opts = {};
}
window.setupInky(opts, function(transform) {
transform(elem.outerHTML, function(err, html) {
if(err === null) {
elem.outerHTML = html;
} else {
console.log(err);
}
});
});
}
var elems = document.body.getElementsByTagName('container')
for(var i = 0; i < elems.length; i++) {
window.runInky(elems[i]);
}
}

Loading