目前找到的样式都比较差,在自己的项目中目前没有使用mail样式,参考drifting中的一篇文章,笔记如下
#gem
gem 'inky-rb', require: 'inky'
gem 'premailer-rails'
#安装
rails g inky:install #将上面生成的foundation_emails.scss移动到vendor/assets/stylesheets/中
#以上移动样式的目的是为了样式只是作用域mail,而不作用于整个项目,如果样式在app/assets/stylesheets中,则作用整个项目样式
#预编译config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( foundation_emails.css )
#修改模板样式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>
#修改单个页面,必须inky结尾,比如password_reset.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</small></p>
</columns>
</row>
<spacer size="16"></spacer>
</container>