Rails 6 Inky Emails

Making emails look nice is a huge pain! Foundation Emails help by giving you short HTML tags that are expanded into HTML for emails and nice classes for styling.

Get consistent and good looking emails. First we'll setup previews for Devise and set Devise to use the same layout we'd use for other emails.

Skip this if you're not using Devise.

Devise Emails

Add preview for Devise emails. Remove any that don't apply to your setup.

# test/mailers/preview/devise_mailer_preview.rb

class DeviseMailerPreview < ActionMailer::Preview
  def confirmation_instructions
    Devise::Mailer.confirmation_instructions(User.first, "faketoken")
  end

  def reset_password_instructions
    Devise::Mailer.reset_password_instructions(User.first, "faketoken")
  end

  def unlock_instructions
    Devise::Mailer.unlock_instructions(User.first, "faketoken")
  end

  def email_changed
    Devise::Mailer.email_changed(User.first)
  end

  def password_change
    Devise::Mailer.password_change(User.first)
  end
end

Setup Devise to use the mailer layout. Or any other layout in config/application.rb.

...
    config.to_prepare do
      Devise::Mailer.layout "mailer" # email.haml or email.erb
    end
...

Might have to restart the server

Inky / Foundation Emails

Next add inky-rb to your project to get easily styled emails!

# Gemfile

# Emails
gem "inky-rb", require: "inky"
gem "premailer-rails"

inky-rb includes Foundation Emails and premailer-rails adds styles from a stylesheet inline in the HTML for email clients.

bundle install
rails g inky:install --slim

This will create the following files:

• app/views/layouts/mailer.html.slim
• app/assets/stylesheets/foundation_emails.scss

Add an initialer file to tell inky to use slim.

# config/initialers/inky.rb

Inky.configure do |config|
  config.template_engine = :slim
end

Add the styles sheet to the assets precompile in config/initialers/assets.rb.

Rails.application.config.assets.precompile += %w[foundation_emails.css]

Rename app/views/layouts/mailer.html.slim to app/views/layouts/mailer.html.inky-slim.

Change that file to use the Foundation Emails.

doctype strict
html xmlns="http://www.w3.org/1999/xhtml"
  head
    meta content="text/html; charset=utf-8" http-equiv="Content-Type"
    meta content="width=device-width" name="viewport"
    = stylesheet_link_tag "foundation_emails"
  body
    container
      row
        columns
          = yield

      row
        columns
          hr
          = link_to "COMPANY", "https://www.company.com"
          p
            small
              You are receiving this because you're a user of COMPANY!

When emails are rendered the following happens.

1. The container, row, etc tags are converted into standard HTML.
2. The CSS classes set on the standard HTML is then inlined.

Check the Foundation Docs for more info on the Inky syntax and Foundation classes.

Sass Vars

You can find the Foundation SASS vars with bundle open foundation_emails and then opening the file vendor/assets/stylesheets/foundation-emails/settings/_settings.scss.

You can set any of those before including the foundation_emails SASS file in the app/assets/stylesheets/foundation_emails.scss file.

$primary-color: #2199e8;
$secondary-color: #777777;
...
@import "foundation-emails";