1

I'm calling bootstrap 3's stylesheet like this in the header of my email:

<link href="/assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />

I noticed that links in my emails appear black and with no decoration and determined that they are using css that is only in bootstrap 3's @media print section, specifically color: #000 !important;.

Why is that?

How do I specify that my emails should be the screen media type and not print? (Unless of course someone decides to print it)

(Edit: I should specify that I'm using the Roadie gem to convert the styles to inline for emails: https://github.com/Mange/roadie)

DKhanal
  • 213
  • 2
  • 7

2 Answers2

1

You can't link to external style sheets in html email. You need to include it in the body. Even then for 100% compatibility, it must be inlined, as Gmail strips the <style> tag all together.

Also, bootstrap isn't designed for email so it will not render consistently across most email clients. You need to use tables instead.

If you want a framework for email, try Zurb's Ink.

Although considered "Patterns", I'd also recommend Cerberus by Ted Goas or Responsive Email Patterns by Brian Graves.

John
  • 11,985
  • 3
  • 45
  • 60
  • Thanks, I should specify that we are using a rails gem that is converting the style sheets to inline. I still don't know why it's grabbing the @media print[] styles though. – DKhanal Mar 24 '14 at 19:16
  • Bootstrap still uses div's that are designed for web. Save yourself a world of trouble and go with something that is designed for email. It also shouldn't be grabbing anything because when you send it, it will not show in the recipients email client. – John Mar 24 '14 at 19:20
  • Have a quick read of [some of the differences](http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734) between web and email design. Better that you know now than after spending hours wondering why your web layout won't work consistently in email clients. – John Mar 24 '14 at 19:26
0

I figured this out in case anyone else has this specific problem.

Indeed the ruby gem Roadie does not work with media queries so it looks like when it was supposed to be turning css sheets into inline for email it was just grabbing all styles, not paying attention to media queries: https://github.com/Mange/roadie#my-media-queries-dont-work-how-can-i-fix-them

DKhanal
  • 213
  • 2
  • 7