2

I'm using Foundation for E-Mail to create templates. When I preview the templates by running yarn start everything works fine but when I yarn build the template my custom CSS classes will not be inlined.

For example

<p class="pd-footer-contact">
   Lorem ipsum
</p>

will become

<p class="pd-footer-contact" style="Margin:0;Margin-bottom:10px;color:#4A4A4A;font-family:'Brandon Text',Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.3;margin:0;margin-bottom:10px;padding:0;text-align:left"><strong>Lorem ipsum</p>

Although the inlined style is not the one from the CSS class. Am I doing something wrong or misunderstanding how the inlining process works?

mxmtsk
  • 4,285
  • 6
  • 22
  • 47
  • How do you currently import your custom styles? See https://foundation.zurb.com/emails/docs/sass-guide.html and https://github.com/zurb/foundation-emails-template/tree/master/src/assets/scss –  Jun 11 '19 at 17:26
  • @DanielRuf I have put them in the `template/_template.scss` file – mxmtsk Jun 12 '19 at 07:37
  • I can only guess without knowing the content of this file. I think it is generally better to open an issue at https://github.com/zurb/foundation-emails-template/issues as this is not a clear question and there are some information missing. –  Jun 12 '19 at 11:00
  • In general your styles should be applied, in addition to the default styles. Even as inlined styles. –  Jun 12 '19 at 20:01

1 Answers1

0

The styles you are seeing on the

tag are those assigned in the foundation.css file that is included on every email build.

Paul
  • 3
  • 3
  • There is no foundation.css file for Foundation Emails. –  Jun 11 '19 at 17:33
  • @Daniel the /css/foundation.css file has the style values for the paragraph tag shown in the question. – Paul Jun 12 '19 at 00:22
  • This is about the SASS version of Foundation Emails, not the CSS version of Foundation Sites. These are two different frameworks. –  Jun 12 '19 at 10:58
  • https://foundation.zurb.com/emails/docs/css-guide.html `css/foundation-emails.css` –  Jun 12 '19 at 11:04
  • @Daniel - I have and use the SASS version of Foundation Emails, it includes the foundation.css file, and when I code a paragraph tag in my index.html page it inserts the same styles as found in foundation.css with any overrides I have added either by class or in _settings.css. The original question asked where those styles were being generated for his paragraph without being coded by him, I believe that they are found in foundation.css. Foundation seems to generate a lot of inline defaults for every tag. If these defaults are not coming from foundation.css, where are they? – Paul Jun 12 '19 at 16:25
  • Yes the default styles are coming from the base styles. No, it is not about these. "my custom CSS classes will not be inlined" –  Jun 12 '19 at 20:00
  • OK, I thought the question was where those styles were coming from. When I use custom classes when building my email, I put them in src/assets/scss/app.scss and they are inlined by the build process. – Paul Jun 13 '19 at 20:39