search

leemunroe / grunt-email-workflow

A Grunt workflow for designing and testing responsive HTML email templates with SCSS.
MIT License
3.05k stars 339 forks source link

CSS inlining #76

Closed romanlelek closed 8 years ago

romanlelek commented 8 years ago

Hi Lee,

let me first thank you for this awesome email workflow, you have already saved me a huge amount of time. I am just wondering about inlining the CSS style: In saas:dist the whole css file (main.css) which contains all global resets, external classes etc. is build. Then "assemble" creates html but when you run grunt task "juice", only media queries are actually inserted (to the head) and the rest is of course inlined. But there is no global resets, external classes. Or I have something overlooked?

leemunroe commented 8 years ago

You're right. What I've done for other projects (and should probably update this repo) is added another SCSS file for styles that I wanted preserved, and put them in an "all" media query e.g.

@media all {

  // External class fix for Outlook.com
  .ExternalClass {
    width: 100%;
  }

  .ExternalClass,
  .ExternalClass p,
  .ExternalClass span,
  .ExternalClass font,
  .ExternalClass td,
  .ExternalClass div {
    line-height: 100%;
  }

  // Blue link fix for iOS
  .apple-link a {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
  }
}
romanlelek commented 8 years ago

Ok, thank you for this quick fix. I originally thought that I need to have all styles in head even if they are inlined.