c a n d l a n d . n e t

Rails 6 Inky Emails

Dusty Candland | | rails, rails6, email, inky, foundation 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";

Webmentions

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site: