Giter Site home page Giter Site logo

Comments (9)

fphilipe avatar fphilipe commented on May 27, 2024

Since the CSS is all inlined (written into style attributes on each element), there is no way to specify rules à la media queries.

from premailer-rails.

semarco avatar semarco commented on May 27, 2024

did this solve the issue?
There should be way to support media queries, eg. exclude a style definition from inlining ..
Sorry if I did get something wrong.
Best,
Marco

from premailer-rails.

fphilipe avatar fphilipe commented on May 27, 2024

So you want to keep a <style> block in the head with CSS rules in order for the email client to apply that CSS on top of the inlined CSS?

from premailer-rails.

semarco avatar semarco commented on May 27, 2024

yes, as described here:
http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/

thank you

from premailer-rails.

fphilipe avatar fphilipe commented on May 27, 2024

OK, I see. The gem online inlines CSS files that are specified as <link />. Thus, you could have a <style> tag that has the CSS inline or an @import. Any other solutions you could think of?

from premailer-rails.

semarco avatar semarco commented on May 27, 2024

do you mean, <style>..</style> outside the header are not inlined?
I cannot get it work, I set :include_style_tags to false, but it does not work for me.

from premailer-rails.

fphilipe avatar fphilipe commented on May 27, 2024

:include_style_tag is an option of premailer that premailer-rails3 does not respect because it reads all CSS files and passes them to premailer as a string. Why would you even want to use this gem if you're not inlining the CSS? Do you use it in other mails?

Anyways, what I meant was instead of having:

<head>
  <link href="emails.css" rel="stylesheet" type="text/css" />
</head>

to have something like:

<head>
  <style type="test/css">
    @media only screen and (max-device-width: 480px) { html { … } }
  </style>
</head>

or an import:

<head>
  <style type="test/css">
    @import "email.css";
  </style>
</head>

from premailer-rails.

pekkaj avatar pekkaj commented on May 27, 2024

Thank you for your answers.

I just wanted to give some background information so that you can understand me better. We are using an awesome HTML Email Boilerplate: http://htmlemailboilerplate.com/. It has some styles that shouldn't be inlined and some styles that should be inlined. Then it also has media queries. This is a good starting point for using media queries with emails: http://www.campaignmonitor.com/guides/mobile/.

For now, we decided to use https://github.com/Mange/roadie which solves all our problems (we have inlined styles, media queries etc.). I'd implement this feature in this but unfortunately I am too busy right now. I recommend you to take a look of Roadie and then take inspiration from it.

I really like what you are doing here and how you respond to questions. Keep up the good work! 👍

from premailer-rails.

fphilipe avatar fphilipe commented on May 27, 2024

Yeah, roadie looks awesome! Also, it does not depend on premailer, which isn’t being actively developed.

On Feb 15, 2013, at 11:00 , Pekka Mattila [email protected] wrote:

Thank you for your answers.

I just wanted to give some background information so that you can understand me better. We are using an awesome HTML Email Boilerplate: http://htmlemailboilerplate.com/. It has some styles that shouldn't be inlined and some styles that should be inlined. Then it also has media queries. This is a good starting point for using media queries with emails: http://www.campaignmonitor.com/guides/mobile/.

For now, we decided to use https://github.com/Mange/roadie which solves all our problems (we have inlined styles, media queries etc.). I'd implement this feature in this but unfortunately I am too busy right now. I recommend you to take a look of Roadie and then take inspiration from it.

I really like what you are doing here and how you respond to questions. Keep up the good work!

—
Reply to this email directly or view it on GitHub.

from premailer-rails.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.