Inline CSS

Inline CSS provides a view helper method to Rails 3 applications that lets you inline any CSS code present in the view into the applicable elements.

This is mostly useful in ActionMailer views since mail programms are known for their mediocre support of CSS styling in stylesheets.

Inline CSS is a uses the "premailer" gem to perform the magic. It is nothing more than a simple wrapper around @to_inline_css@ provided by Premailer.

Inline CSS has been inspired by the "incurve" gem which provides a very similar function but uses some intermediate classes instead of Premailers internal functions to use a string as source.

Example

If you have this mail view:

<%= inline_css do %>
  <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <style type="text/css">
        body {
          background-color: #e6e6e6;
          background-position: top center;
          background-repeat: no-repeat repeat-y;
          margin: 0;
          padding: 0;
        }
      </style>
    </head>
    <body>
    </body>
  </html>
<% end -%>

The mail you'll send will be like this:

<html>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  </head>
  <body style="background-color: #e6e6e6; background-position: top center; background-repeat: no-repeat repeat-y; margin: 0; padding: 0;">
  </body>
</html>

Note on Patches/Pull Requests

  • Fork the project.
  • Make your feature addition or bug fix.
  • Add tests for it. This is important so I don't break it in a future version unintentionally.
  • Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
  • Send me a pull request. Bonus points for topic branches.

Copyright (c) 2011 Morton Jonuschat. See LICENSE for details.