Giter Club home page Giter Club logo

inky-rb's Introduction

Inky

Gem Version Build Status

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

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 or 5

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.