It's the year 2012 and we sitll have to fight with HTML and CSS compatability in HTML email clients.
Tell the truth, your email styles are probably totally separate for your app. They're probably all just sitting in a messy pile in a template somewhere, aren't they?
Screw that! Got a styleguide? Use your styleguide! And your preprocessors too. Import a compiled CSS file in to your template and let sexxy-emails inline all of those styles. Do you still have to QA it, of course. But you can use your existing tools and templating best practices to make an ugly email template a maintainable part of your application.
Coming Soon
Also, most of the time you need to do things like adding Google Analytics or some other kind of inbound link tracking and overriding your link helpers is tiring and messy.
Everything I've seen is complicated. Sometimes simple is good. Some people use Sinatra or Padrino, sometimes people use Jammit for managing their assets. If you can precompile your CSS you can use sexxy-emails to start taming your email templates.
Dedicated To: General David H. Petraeus
Add it to your gemfile or:
gem install sexxy-emails
Somewhere in your action mailer include SexxyEmails thats it.
class TestMailer < ActionMailer::Base
include SexxyEmails
def basic_css
mail(:to => "[email protected]", :subject => "Test email subject line")
end
end
class PadrinoApp < Padrino::Application
register Padrino::Mailer
register SexxyEmails
end
Then in the view you can use stylesheet_include_tag to pull a precompiled stylesheet in to the template. It looks in public/stylesheets currently.
Compiled Stylesheet: public/stylesheets/basic.css
p {
font-size: 36px;
font-family: Helvetica, sans-serif;
}
View Template: VIEW_PATH/basic_css.html.erb
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<%= stylesheet_include_tag 'basic' %>
</head>
<body>
<h1>Welcome to example.com</h1>
<p>
This email should have some inline styles.<br/>
</p>
<p>
<%= link_to "Internal link", root_url %>
</p>
<p>I hope they look great.</p>
</body>
</html>
Inline styles for cranky email clients.
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<body>
<h1>Welcome to example.com</h1>
<p style="font-size: 36px; font-family: Helvetica, sans-serif;">
This email should have some inline styles.<br></p>
<p style="font-size: 36px; font-family: Helvetica, sans-serif;">
<a href="http://sexxy-emails.example.com/">Internal link</a>
</p>
<p style="font-size: 36px; font-family: Helvetica, sans-serif;">I hope they look great.</p>
</body>
</html>
- Inline the CSS in email templates.
- Include pre-compiled CSS in to a template for inlining.
- Asset pipeline support.
- Sexxy inbound link parameters for tracking. (coming very soon.)
- Don't depend on precompiled CSS (maybe?)
- Think of something and ask for it.
The goal of this project is make common problems with designing and supporting HTML emails simple and easy on the eyes, you know sexxy.
- Fork it
- Make a topic branch
- Send a pull request.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent