Menu icon Foundation
Gulp email inlining gives poor results

Hi peeps,

Love the framework and the workflow you've got going here. I'm building some emails for an app our team is developing and I'm having an issue with the inlining function in the Sass version. 

The emails look like this while I'm composing them using "npm start":

sample email

If I take the html and css present in the dist folder at that point and run it through the ZURB Inliner on the website, it outputs an inlined html file that looks identical.

However, if I use "npm run build", the output looks quite different:

In particular, the vertical spacing and some padding is messed up. 

Has anyone come across this issue? Are there settings I can change for the inliner?

Cheers!

emailgulpSass

Hi peeps,

Love the framework and the workflow you've got going here. I'm building some emails for an app our team is developing and I'm having an issue with the inlining function in the Sass version. 

The emails look like this while I'm composing them using "npm start":

sample email

If I take the html and css present in the dist folder at that point and run it through the ZURB Inliner on the website, it outputs an inlined html file that looks identical.

However, if I use "npm run build", the output looks quite different:

In particular, the vertical spacing and some padding is messed up. 

Has anyone come across this issue? Are there settings I can change for the inliner?

Cheers!

Rafi Benkual about 3 years ago

How are adding your CSS? Is it in a style tag in the body or in the custom stylesheet in the SCSS folder?

Corey Schaaf about 3 years ago

Hey Jarret, assuming you are using Foundation For Emails 2 with the Zurb Stack, there are two commands I use for working on my project. 

 

foundation watch //(which I believe is the equivalent to using npm start)

foundation watch doesn't inline the css in the dist folders.  Instead, it keeps all the local references which doesn't require it to be inlined. This is okay if you're still working locally trying to tweak the look and feel of everything. When you're ready to copy your code to an external ESP (mail chimp, campaign monitor) you need to have everything inlined. You do this by using the command:

 

foundation build // (which I believe is the equivalent to using npm run build)

Unless I'm mistakein, you're saying you perform the last step (npm run build) and then copy the items from the dist folder to the website to inline again? There's no need to copy it to an external inliner and re-inline which may be why you're seeing the difference in rendering. 

 

 

Jarrett Prosser about 3 years ago

@Rafi: my css is in a style tag in the html. should i try putting it into a css file?

@Corey: sorry, I was a bit unclear.

In writing the template I used "npm start". The preview looks like this.

sample email

In trying to output my production files, I have been using "npm run build", which as you say is the same as "foundation build".

The files output by "npm run build" look like this:

So that's the main issue.

As a test, I wanted to see if another inlining method worked. To that end, I used "npm start" to see the properly formatted document. I know that the files in dist aren't final production files, so I saved the rendered preview file from my browser into another folder. I put that html and css into the inlining application on the Foundation website, and the output was correctly spaced and formatted.

Evan Wiegand about 3 years ago

Not certain but I believe the default behavior of the inlining task tells it strip out any <style> tags in the body of the HTML email. There's a true/false setting for that somewhere in the gulpfile. But regardless, the proper method is to put your custom styles inside the app.scss file in the src folder. That way they will get processed as intended without you having to monkey around with gulpfile settings. It also ensures they are loaded AFTER the foundation stuff, so that your customizations will override the defaults rather than be overridden by them...which could be part of your problem.  

Jarrett Prosser about 3 years ago

Thanks Evan. I'll give that a go and see if it helps!