I'm using the premailer-rails3
gem which pulls styles inline for html emails, and I'm trying to get it working with Twitter bootstrap.
https://github.com/fphilipe/premailer-rails3
It looks like some styles come in correctly, but not all of them. I'm wondering if anyone has a nice working example of getting their Twitter Bootstrap css (modified or not) into an html email.
Thanks!
This question is related to
html
twitter-bootstrap
html-email
The best approach I've come up with is to use Sass imports on a selected basis to pull in your bootstrap (or any other) styles into emails as might be needed.
First, create a new scss parent file something like email.scss
for your email style. This could look like this:
// Core variables and mixins
@import "css/main/ezdia-variables";
@import "css/bootstrap/mixins";
@import "css/main/ezdia-mixins";
// Import base classes
@import "css/bootstrap/scaffolding";
@import "css/bootstrap/type";
@import "css/bootstrap/buttons";
@import "css/bootstrap/alerts";
// nest conflicting bootstrap styles
.bootstrap-style {
//use single quotes for nested imports
@import 'css/bootstrap/normalize';
@import 'css/bootstrap/tables';
}
@import "css/main/main";
// Main email classes
@import "css/email/zurb";
@import "css/email/main";
Then in your email templates, only reference your compiled email.css file, which only contains the selected bootstrap styles referenced and nested properly in your email.scss.
For example, certain bootstrap styles will conflict with Zurb's responsive table style. To fix that, you can nest bootstrap's styles within a parent class or other selector in order to call bootstrap's table styles only when needed.
This way, you have the flexibility to pull in classes only when needed. You'll see that I use http://zurb.com/
which is a great responsive email library to use. See also http://zurb.com/ink/
Lastly, use a premailer like https://github.com/fphilipe/premailer-rails3
mentioned above to process the style into inline css, compiling inline styles to only what is used in that particular email template. For instance, for premailer, your ruby file could look something like this to compile an email into inline style.
require 'rubygems' # optional for Ruby 1.9 or above.
require 'premailer'
premailer = Premailer.new('http://www.yourdomain.com/TestSnap/view/emailTemplates/DeliveryReport.jsp', :warn_level => Premailer::Warnings::SAFE)
# Write the HTML output
File.open("delivery_report.html", "w") do |fout|
fout.puts premailer.to_inline_css
end
# Write the plain-text output
File.open("output.txt", "w") do |fout|
fout.puts premailer.to_plain_text
end
# Output any CSS warnings
premailer.warnings.each do |w|
puts "#{w[:message]} (#{w[:level]}) may not render properly in #{w[:clients]}"
end
Hope this helps! Been struggling to find a flexible email templating framework across Pardot, Salesforce, and our product's built-in auto-response and daily emails.
I apologize for resurecting this old thread, but I just wanted to let everyone know there is a very close Bootstrap like CSS framework specifically created for email styling, here is the link: http://zurb.com/ink/
Hope it helps someone.
Ninja edit: It has since been renamed to Foundation for Emails
and the new link is: https://foundation.zurb.com/emails.html
Silent but deadly edit: New link https://get.foundation/emails.html
The trick here is that you don't want to include the whole bootstrap. The issue is that email clients will ignore the media queries and process all the print styles which have a lot of !important statements.
Instead, you need to only include the specific parts of bootstrap that you need. My email.css.scss file looks like this:
@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
Hi Brian Armstrong, visit this link.
This blog tells you how to integrate Rails with Bootstrap less (using premailer-rails).
If you're using bootstrap sass, you could do the same:
start by importing some Bootstrap sass files into email.css.scss
@import "bootstrap-sprockets";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/buttons";
@import "bootstrap/alerts";
@import 'bootstrap/normalize';
@import 'bootstrap/tables';
@import 'bootstrap/progress-bars';
and then in your view <head>
section add
<%= stylesheet_link_tag "email" %>
You can use this https://github.com/advancedrei/BootstrapForEmail for b-strapping your email.
What about Bootstrap Email? This seems to really nice and compatible with bootstrap 4.
I spent some time recently looking into building html email templates, the best solution I found was to use this http://htmlemailboilerplate.com/. I have since built 3 quite complex templates and they have worked well in the various email clients.
Emails require tables in order to work properly.
Inky (by foundation for emails) is a templating language that converts simple HTML tags into the complex table HTML required for emails.
<html>
<head></head>
<body>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tbody>
<tr>
<th>Put content in me!</th>
<th class="expander"></th>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>‍
</td>
</tr>
</tbody>
</table>
</body>
</html>
Will produce this:
Here are a few things you cant do with email:
- Include a section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it's a no-no. Hotmail will support a style section in the body but Gmail still doesn't.
- Link to an external stylesheet. Not many email clients support this, best to just forget it.
- Background-image / Background-position. Gmail is also the culprit on this one.
- Clear your floats. Gmail again.
- Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn't work.
- Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.
Source: http://css-tricks.com/using-css-in-html-emails-the-real-story/
Mailchimp has email templates you can use - here
A few more resources that should help you
Source: Stackoverflow.com