Has anyone gotten HTML emails working with Twitter

2019-01-16 01:21发布

站内问答 / 后端开发
1406 8 4

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!

8条回答
Fickle 薄情
2楼-- · 2019-01-16 01:42

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.

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
3楼-- · 2019-01-16 01:50

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';
查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
4楼-- · 2019-01-16 01:51

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

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
5楼-- · 2019-01-16 01:51

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" %>

查看更多
0人赞 添加讨论(0) 举报
看我几分像从前
6楼-- · 2019-01-16 01:55

You can use this https://github.com/advancedrei/BootstrapForEmail for b-strapping your email.

查看更多
0人赞 添加讨论(0) 举报
祖国的老花朵
7楼-- · 2019-01-16 01:57

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

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)