Mail Previews and Templates

#58 Mail Previews and Templates
12/11/2016

Summary

Using ActionMailer::Preview preview email samples without sending them. Using Zurb's Foundation for Emails, learn how to use email templates with the Ink framework.
10
rails email tests framework 8:31 min

Summary

Terminalrails g mailer contact
Gemfilegem 'inky-rb', require: 'inky'
gem 'premailer-rails'
Terminalrails g inky:install
config/initializers/assets.rbRails.application.config.assets.precompile += %w( foundation_emails.css )
tests/mailers/previews/contact_mailer_preview.rb# Preview all emails at http://localhost:3000/rails/mailers/contact_mailer
class ContactMailerPreview < ActionMailer::Preview
  # Preview this email at http://localhost:3000/rails/mailers/contact_mailer/feedback
  def feedback
    user = User.all.sample
    message = "Test message."
    ContactMailer.feedback(user, message)
  end
end
mailer.html.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <meta name="viewport" content="width=device-width" />     <%= stylesheet_link_tag "foundation_emails" %>   </head>   <body>     <table class="body" data-made-with-foundation>       <tr>         <td class="center" align="center" valign="top">           <center>             <%= yield %>           </center>         </td>       </tr>     </table>   </body> </html>

contact_mailer/feedback.html.inky

<container>   <row class="header">     <columns>       <spacer size="16"></spacer>             <h4 class="text-center">         <%= @greeting %>         <%= @user.first_name %>         <%= @user.last_name %>,       </h4>     </columns>   </row>   <row>     <columns>       <spacer size="32"></spacer>       <center>         <img src="http://placehold.it/250x250">       </center>       <spacer size="16"></spacer>       <h1 class="text-center">Forgot Your Password?</h1>       <spacer size="16"></spacer>       <p class="text-center"><%= @message %></p>       <button class="large expand" href="#">Reset Password</button>       <hr/>       <p><small>You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, <a href="#">unsubscribe here</a>.</small></p>     </columns>   </row>   <spacer size="16"></spacer> </container>

00000000000000000000000000000000?d=mm&f=y&s=64
frank004 said 10 months ago:

Is there a alternative for bootstrap?

635114?v=3&s=64
kobaltz said 10 months ago:

Semantic UI - http://semantic-ui.com/
Foundation -http://foundation.zurb.com/

Here are the two main alternatives that I would consider.

However, if you have a good designer on your team, you may want to consider a more lightweight responsive framework instead of these kitchen-sink-included. 

00000000000000000000000000000000?d=mm&f=y&s=64
frank004 said 10 months ago:

Sorry, I was asking for the ink gem as the ink gem is foundation zurb  and im using bootstraps

635114?v=3&s=64
kobaltz said 10 months ago:

My apologies. I haven't found any solid ones yet. However, you can use ink for emails without interfering with the bootstrap web app. It could be something as simple as creating a bootstrap CSS file in place of the foundation one.

00000000000000000000000000000000?d=mm&f=y&s=64
frank004 said 10 months ago:

thank you.  Will try it.

Login to Comment