Foundation for Email 2.4.0 Release

[joeworkman]

Check out the details of this release below:

Featured Enhancements

• 🚀 Dart SASS is now used as the primary style parser!
• 🚀 New text size classes
  • text-xs
  • text-sm
  • text-lg
  • text-xl
  • text-xxl
• 🚀 New $callout-padding-small configuration

Bug Fixes

• 🐛 Many dependencies updated to keep up with that dep train
• 🐛 Fixed Outlook bug with p margins
• 🐛 Don't collapse columns with large-offset
• 🐛 Fix button width in Outlook's "View in Browser"
• 🐛 Fix valign attribute not respected
• 🐛 Fix center alignment on menus

Full Release Compare

Contributors

Thanks to those who contributed code or documentation to this release. Foundation wouldn't happen without you!

• @joeworkman
• @bobmaerten
• @DanielRuf
• @MostafaNawara
• @Stadly
• @jimmaclean
• @VladimirValov
• @markokajzer
• @nikitasol
• @jjonescz
• @damongolding
• @putzwasser
• @jsit

[renzplaton]

Hi I got an error when I start the project

Message:
node_modules\foundation-emails\scss\util_util.scss
Error: Invalid CSS after " @return math": expected expression (e.g. 1px, bold), was ".div(floor(percenta"
on line 12 of node_modules/foundation-emails/scss/util/_util.scss
from line 5 of node_modules/foundation-emails/scss/foundation-emails.scss
from line 2 of src/assets/scss/app.scss

@return math.div(floor(percentage(math.div($colNumber, $totalColumns)) * 1
--------------^

[joeworkman]

I can replicate this. I will work on getting it fixed. Thanks!

[joeworkman]

I fixed the problem in the template repo. Give it another shot.

[renzplaton]

@joeworkman works perfectly! Thank you so much. Big help!

[glynszasz]

Thanks @joeworkman and team for the update. Currently exploring and using now. Will there be any updates to the Docs for this version or is everything pretty much the same and all 2.4 changes are under the hood apart from the new text size classes

[Andrew-Dyachenko]

When will we see the option to install the new 2.4.0 version via foundation new --framework emails command ?

[WebPhenom]

I have found that this CSS min code doesn't work great with the iOS Gmail app still. The CSS block code gets put in by default after the BODY tag when you use the inliner, and that used to be fine, but I now have to copy and duplicate the CSS block to be in the HEAD too in order for it to display correctly in the iOS Gmail app. Otherwise, things break in the GMAIL app that don't break in the Apple Mail app for example. (note: everything looks fine in the iPhone Apple Mail app using defaults and not duplicating the CSS block)

Does anyone know why the Gmail app needs this duplicate CSS hack to work? Maybe there are other hacks?

I will say that this issue, while newer, was also present in the last version of the Foundation CSS code, and this latest version makes it somewhat better but some things are still broken ( things don't all display correctly) and the only fix I have found is to duplicate the CSS block into the HEAD. Once we duplicate the CSS in the code, the emails in the GMAIL app display the same as Apple Mail.

[wegnertm]

I'm seeing the same issue when I run npm run build. Any suggestions on how to fix this? I'm new to the email world, this repo was built by a previous co-worker.

[15:39:07] Starting 'sass'...
Error in plugin 'sass'
Message:
node_modules\foundation-emails\scss\util_util.scss
Error: Invalid CSS after " @return math": expected expression (e.g. 1px, bold), was ".div(floor(percenta"
on line 12 of node_modules/foundation-emails/scss/util/_util.scss
from line 5 of node_modules/foundation-emails/scss/foundation-emails.scss
from line 2 of src/assets/scss/app.scss

@return math.div(floor(percentage(math.div($colNumber, $totalColumns)) * 1
--------------^

[15:39:08] Finished 'sass' after 595 ms
[15:39:08] Starting 'images'...
[15:39:08] gulp-imagemin: Minified 0 images
[15:39:08] Finished 'images' after 344 ms
[15:39:08] Starting 'inline'...
[15:39:08] 'inline' errored after 4.78 ms
[15:39:08] Error: ENOENT: no such file or directory, open 'dist/css/app.css'
at Object.openSync (fs.js:498:3)
at Object.readFileSync (fs.js:394:35)
at inliner (C:/emailProjects/Nelnet-GL/NN-GL-Emails/gulpfile.babel.js:118:16)
at inline (C:/emailProjects/Nelnet-GL/NN-GL-Emails/gulpfile.babel.js:96:28)
at bound (domain.js:416:15)
at runBound (domain.js:427:12)
at asyncRunner (C:\emailProjects\Nelnet-GL\NN-GL-Emails\node_modules\async-done\index.js:55:18)
at processTicksAndRejections (internal/process/task_queues.js:77:11)
[15:39:08] 'build' errored after 9.72 s
[15:39:08] 'default' errored after 9.73 s

[wegnertm]

@jimmaclean what versions should I be using? I have other foundation emails that will build.

node --version
v14.17.2

gulp --version
CLI version: 2.2.0
Local version: 4.0.2

[pikmin86]

Hello, do you have more infos about gulp/node version?
I got the same issue with the same version

[wegnertm]

@pikmin86 I had another foundation email project that was working so what I did was in my node_modules directory I located the foundation-emails folder and deleted it. Then in my working foundation project I copied that same folder and pasted it into my broken project. And now everything is compiling. I wish I understood how this all worked a bit better as this seems incorrect but hey it works for the time being. Hope this helps you

[pikmin86]

still not working for me, i guess i'll stay in an older version

[BigFoppa]

@wegnertm Big thanks for your comment. Have the same problem.
Copy foundation-emails from a working project saved my day.