Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/foundation/inky
Convert a simple HTML syntax into tables compatible with Foundation for Emails.
https://github.com/foundation/inky
Last synced: about 2 months ago
JSON representation
Convert a simple HTML syntax into tables compatible with Foundation for Emails.
- Host: GitHub
- URL: https://github.com/foundation/inky
- Owner: foundation
- Created: 2015-02-18T22:34:14.000Z (over 9 years ago)
- Default Branch: develop
- Last Pushed: 2023-03-05T06:56:54.000Z (over 1 year ago)
- Last Synced: 2024-07-23T06:47:47.458Z (about 2 months ago)
- Language: JavaScript
- Homepage: http://foundation.zurb.com/emails
- Size: 1.46 MB
- Stars: 673
- Watchers: 47
- Forks: 106
- Open Issues: 52
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
Awesome Lists containing this project
- awesome-opensource-email - Inky - Convert a simple HTML syntax into tables compatible with Foundation for Emails. (Code / Templating)
- awesome-email-marketing - Inky
README
# Inky
[](https://travis-ci.com/foundation/inky) [](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](https://get.foundation/emails).
Give Inky simple HTML like this:
```html
```
And get complicated, but battle-tested, email-ready HTML like this:
```html
```
## Installation
```bash
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
```js
var inky = require('inky');
inky({
src: 'src/pages/**/*.html',
dest: 'dist'
}, function() {
console.log('Done parsing.');
});
```
### With Gulp
```js
var inky = require('inky')
function parse() {
gulp.src('src/pages/**/*.html')
.pipe(inky())
.pipe(gulp.dest('dist'));
}
```
### Command Line
Install [foundation-cli](https://github.com/foundation/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](#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](https://github.com/cheeriojs/cheerio)).
## Custom Components
Inky simplifies the process of creating HTML emails by expanding out simple tags like `` and `` into full table syntax. The names of the tags can be changed with the `components` setting.
Here are the names of the defaults:
```js
{
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](https://github.com/cheeriojs/cheerio) object of HTML, and gives you back a converted Cheerio object.
```js
var Inky = require('inky').Inky;
var cheerio = require('cheerio');
var options = {};
var input = '';
// 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();
```