Mailers

Theme

Hound

Framework

Tailwind CSS

Email templates are ready for use with Rails UI. They are a starting point for you to tweak as the content you send your users evolves.

Many email clients are out in the wild, and each has different areas of support regarding CSS and HTML. Rails UI includes essential support with some clever hacks you can use to do more with your templates.

Mailers

Styling considerations

It's recommended that CSS be inlined to work best inside any email, Tailwind CSS will not work well inside the templates. All included CSS resides inside the mailer layout template for this reason.

If you prefer to write your CSS in another stylesheet and include it in your layout, we recommend using something like premailer to ensure any additional styles you include render correctly inline.

Mailers

Helpers

Bundled with Rails UI is a small MailHelper module. The helper is useful for displaying buttons and adding dependable spacing between HTML elements in a given template, as you can't rely on CSS much of the time.

HTML emails require tables to layout a given design. Writing these is a chore, but they are more dependable across clients if appropriately authored. I hope these helpers should save you time and headache!

Spacers

The spacer helper is an extraction for rendering a new table between elements inside an email template. Emails and margin/padding don't always behave across mail clients, so this is a sure way to get that extra space between elements.

The helper renders an empty table with some inline styles and height attributes intact. Rather than write this HTML by hand, the spacer helper makes it easy.

Pass an amount to the helper for more or less space to suit your needs. The amount passed will render in pixel units.

.html
.html.erb

<!-- compiled output -->
<p>Some text...</p>
<table class="spacer">
  <tbody>
    <tr>
      <td height="16" style="font-size:16px;line-height:16px;">&nbsp;</td>
    </tr>
  </tbody>
</table>
<p>Another paragraph</p>

<p>Some text....</p>
<%= spacer(16) %>
<p>Another paragraph</p>

Buttons

To make authoring buttons way easier in emails, we extracted the logic to do so out into another helper called email_action. The helper accepts two parameters and an options hash for further customization.

Rails UI supports two themes (primary, secondary) which can be customized in the mailer layout css.

email_action(action, path, options)

Required parameters

action - required

The button label
path - required

The url for the button. Be sure to use url helpers and not path helpers in an email

Additional options

theme

primary or secondary. Default: primary.
align

Align button to center, left, or right. Default: left
fullwidth

(boolean) true / false

.html
.html.erb

<!-- what outputs from mail_action -->
<table class="action" align="center">
  <tr>
    <td align="center">
      <a href="https://edenpark.matean.online/railsui/" class="action__link  action__link--primary" target="_blank">View notification</a>
      <div itemscope itemtype="http://schema.org/EmailMessage">
        <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ViewAction">
          <link itemprop="target" href="#"/>
          <meta itemprop="name" content="View notification"/>
        </div>
      </div>
    </td>
  </tr>
</table>

<!-- all available options shown in use -->
<%= email_action("View notification", root_url, theme: "primary", align: "center") %>

Callouts

Highlight important content in an email with a callout. Rails UI offers a simple view helper that accepts a block. Add your content and any basic HTML for formatted results. Customize color and more inside the mailer layout CSS.

Email preview

He made many woofs

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Facere provident quia eaque dolor. Saepe consequatur illum laborum suscipit ex accusantium exercitationem dolores, aliquid mollitia recusandae ipsa iusto quas, deleniti aut.

This is my neato email callout.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur veritatis quibusdam molestias nam culpa quasi facere nulla. Nisi, eius magni, tempora cupiditate atque sed optio iure necessitatibus ad minus ratione?