Inky

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

To include only the Foundation for Emails styles in your Asset Pipeline, without Inky, use the foundation_emails gem.

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>

Getting Started

Add the following gems to your Gemfile:

gem 'inky-rb', require: 'inky'
# Stylesheet inlining for email **
gem 'premailer-rails'

Then execute:

bundle install

Run the following command to set up the required styles and mailer layout:

rails g inky:install

You can specify the layout name and templating language with the following options:

Usage:
  rails generate inky:install [layout_name] [options]

Options:
  [--haml], [--no-haml]  # Generate layout in Haml
  [--slim], [--no-slim]  # Generate layout in Slim

Rename your email templates to use the .inky file extension. Note that you'll still be able to use your default template engine within the .inky templates:

welcome.html      => welcome.html.inky
pw_reset.html.erb => pw_reset.html.inky

You're all set!

** The majority of email clients ignore linked stylesheets. By using a CSS inliner like premailer-rails or roadie, you're able to leave your stylesheets in a separate file, keeping your markup lean.

Alternative template engine

If you do not use ERB for your views and layouts but some other markup like Haml or Slim, you can configure Inky to use these languages. To do so, just set an initializer:

# config/initializers/inky.rb
Inky.configure do |config|
  config.template_engine = :slim
end

Check lib/generators/inky/templates/mailer_layout.html.slim for a Slim example.

You may prefer to specify which template engine to use before inky:

welcome.html.haml => welcome.html.inky-haml
pw_reset.html.erb => pw_reset.html.inky-erb

Other options

Column Count

You can change the column count in the initializer too:

# config/initializers/inky.rb
Inky.configure do |config|
  config.column_count = 24
end

Make sure to change the SASS variable as well:

# assets/stylesheets/foundation_emails.scss
# ...
$grid-column-count: 24;

@import "foundation-emails";

Custom Elements

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',
  block_grid: 'block-grid',
  menu: 'menu',
  center: 'center',
  callout: 'callout',
  spacer: 'spacer',
  wrapper: 'wrapper',
  menu_item: 'item'
}

Programmatic Use

The Inky parser can be accessed directly for programmatic use.

Requirements

Inky-rb currently requires:

Ruby 2.0+
Rails 3, 4, 5 or 6

casperisfine/inky-rb