Menu icon Foundation

My Posts




  • 3
    Replies
  • DEBUG_FD ... deprecated?

    By Bryan

    debug_fddeprecated

    I just generated a new email project and ran START. Received the following error: (node:71175) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr) Any idea what's causing ... (continued)

    Last Reply by Bryan over 2 years ago





  • 7
    Replies
  • iOS blue links styles

    By Bryan

    emailiosblue linkcss

    In my app.css file, I place the following:   a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; ... (continued)

    Last Reply by Bryan over 2 years ago


  • 1
    Reply
  • Font colors overridden in Outlook

    By Bryan

    Outlookfont color

    In my email, I set $global-font-color to #464646 (dark gray). I also created a class in app.css to set the footer background color to the same dark gray. Lastly, I created a class in app.css to assign a light gray color (#ccc) to the footer text. The pro... (continued)

    Last Reply by Bryan about 3 years ago



My Comments

Bryan commented on Bryan's post over 2 years

Anyone?

Bryan commented on Bryan's post over 2 years

Very strange. I thought this was working, but I now find that this code is being stripped out. It's not the media query itself: I can substitute some other rule and it appears in the rendered email. But the x-apple-data-detectors code gets purged.
How come?

Bryan commented on Bryan's post over 2 years

I'm still getting this error, for emails and sites …

Bryan commented on Bryan's post over 2 years

Cool! Thanks very much, Corey.
_bryan

Bryan commented on Bryan's post over 2 years

That makes good sense, Corey. The likelihood of my noodling being overwritten in an update is definitely an issue, and I assumed there'd be a better way to deal with this.
The problem stems, however, from setting a large global gutter for ample padding around the outside of the email. But even cutting that in half for column padding applies a whopping 25px to the left and right of every column in my row. That's just fine … unless I have a 4-column row. In that case, I get 50px between blocks of content and those columns get squeezed down to the width of a toothpick.
I'll tinker a bit and see if I can make that change in a separate SCSS file and include it in app.css. Maybe that's a way to override the global gutter in this situation and protect that mod from future updates.

Bryan commented on Bryan's post over 2 years

Hey, Corey.
Sorry it's taken me so long to respond. I was able to sort this one out, but I still have to do a little bit of tinkering to figure out exactly how F4E handles/scales images. That's part of my column width issues.
I was able to reduce the padding around those columns by digging into _grid.scss, in node_modules > foundation-emails > scss > grid:
@for $i from 1 through $grid-column-count {
td.large-#{$i},
th.large-#{$i} {
width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
padding-left: $global-gutter / 2;
padding-right: $global-gutter / 2;
}
This section begins at line 100, and I increased the padding-left and padding-right formulas' divisor from 2 to 3.
padding-left: $global-gutter / 3;
padding-right: $global-gutter / 3;
A bit scary, tinkering in the guts of the framework like that, but it was minor, effective, and did no harm. Is there a better way to do this?
Thanks for following up, Corey! Take care …
_bryan

Bryan commented on Bryan's post over 2 years

Actually, just solved this myself. Added the following to app.scss:
@media screen and (max-width: 480px) {
th.columns.first.small-12 {
padding-left: 40px !important;
}
th.columns.last.small-12 {
padding-right: 40px !important;
}
}
If there's a more elegant way of accomplishing this, though, please let me know!

Bryan commented on Bryan's post almost 3 years

Luminate is a turnkey system designed with non-profit fundraising in mind, but the email component of it is nice in that it pretty much stays out of your way. It's a vanilla editor — when you disable the WYSIWYG tools — so you can just paste in your code. It doesn't add any junk to the code, either. That makes it super-handy for working with Foundation for Emails.
This time around, it's just fairly straightforward informational emails promoting the big annual fundraising run/walk event. But my next project is a newsletter. I'm very excited to see how F4E works.
 

Bryan commented on Bryan's post almost 3 years

Hey again, Rafi —
Just wanted to post a quick follow-up. As you suggested, I added an ID (#fix-margin) to the body tag of the default layout; then added styles in app.css to set left and right margins of all .row elements (#fix-margin .row) to zero. Built a fresh email, brought it into Luminate and tested: the view-as-web-page version of my email now looks like it should!
Brilliant tip — thanks very much. I'm sure this'll come in handy again sometime soon.
_bryan

Bryan commented on Bryan's post almost 3 years

Thanks, Rafi.
Luminate is a fairly big player in the non-profit fundraising space. It provides an environment for email development/deployment, as well as a robust CRM, a CMS, and a donation management system. So their "view as a web page" link causes the email to be opened in a page generated by the CMS, essentially. At least, that's the way it seems to work.
I'll explore the wrapper class/ID you recommended as a timesaving alternative to manually changing every .row.
Thanks again!

Posts Followed

  • 3
    Replies
  • DEBUG_FD ... deprecated?

    By Bryan

    debug_fddeprecated

    I just generated a new email project and ran START. Received the following error: (node:71175) DeprecationWarning: `DEBUG_FD` is deprecated. Override `debug.log` if you want to use a different log function (https://git.io/vMUyr) Any idea what's causing ... (continued)

    Last Reply by Bryan over 2 years ago


  • 7
    Replies
  • iOS blue links styles

    By Bryan

    emailiosblue linkcss

    In my app.css file, I place the following:   a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; ... (continued)

    Last Reply by Bryan over 2 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Bryan's post over 2 years

Anyone?

You commented on Bryan's post over 2 years

Very strange. I thought this was working, but I now find that this code is being stripped out. It's not the media query itself: I can substitute some other rule and it appears in the rendered email. But the x-apple-data-detectors code gets purged.
How come?

You commented on Bryan's post over 2 years

I'm still getting this error, for emails and sites …

You commented on Bryan's post over 2 years

Cool! Thanks very much, Corey.
_bryan

You commented on Bryan's post over 2 years

That makes good sense, Corey. The likelihood of my noodling being overwritten in an update is definitely an issue, and I assumed there'd be a better way to deal with this.
The problem stems, however, from setting a large global gutter for ample padding around the outside of the email. But even cutting that in half for column padding applies a whopping 25px to the left and right of every column in my row. That's just fine … unless I have a 4-column row. In that case, I get 50px between blocks of content and those columns get squeezed down to the width of a toothpick.
I'll tinker a bit and see if I can make that change in a separate SCSS file and include it in app.css. Maybe that's a way to override the global gutter in this situation and protect that mod from future updates.

You commented on Bryan's post over 2 years

Hey, Corey.
Sorry it's taken me so long to respond. I was able to sort this one out, but I still have to do a little bit of tinkering to figure out exactly how F4E handles/scales images. That's part of my column width issues.
I was able to reduce the padding around those columns by digging into _grid.scss, in node_modules > foundation-emails > scss > grid:
@for $i from 1 through $grid-column-count {
td.large-#{$i},
th.large-#{$i} {
width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
padding-left: $global-gutter / 2;
padding-right: $global-gutter / 2;
}
This section begins at line 100, and I increased the padding-left and padding-right formulas' divisor from 2 to 3.
padding-left: $global-gutter / 3;
padding-right: $global-gutter / 3;
A bit scary, tinkering in the guts of the framework like that, but it was minor, effective, and did no harm. Is there a better way to do this?
Thanks for following up, Corey! Take care …
_bryan

You commented on Bryan's post over 2 years

Actually, just solved this myself. Added the following to app.scss:
@media screen and (max-width: 480px) {
th.columns.first.small-12 {
padding-left: 40px !important;
}
th.columns.last.small-12 {
padding-right: 40px !important;
}
}
If there's a more elegant way of accomplishing this, though, please let me know!

You commented on Bryan's post almost 3 years

Luminate is a turnkey system designed with non-profit fundraising in mind, but the email component of it is nice in that it pretty much stays out of your way. It's a vanilla editor — when you disable the WYSIWYG tools — so you can just paste in your code. It doesn't add any junk to the code, either. That makes it super-handy for working with Foundation for Emails.
This time around, it's just fairly straightforward informational emails promoting the big annual fundraising run/walk event. But my next project is a newsletter. I'm very excited to see how F4E works.
 

You commented on Bryan's post almost 3 years

Hey again, Rafi —
Just wanted to post a quick follow-up. As you suggested, I added an ID (#fix-margin) to the body tag of the default layout; then added styles in app.css to set left and right margins of all .row elements (#fix-margin .row) to zero. Built a fresh email, brought it into Luminate and tested: the view-as-web-page version of my email now looks like it should!
Brilliant tip — thanks very much. I'm sure this'll come in handy again sometime soon.
_bryan

You commented on Bryan's post almost 3 years

Thanks, Rafi.
Luminate is a fairly big player in the non-profit fundraising space. It provides an environment for email development/deployment, as well as a robust CRM, a CMS, and a donation management system. So their "view as a web page" link causes the email to be opened in a page generated by the CMS, essentially. At least, that's the way it seems to work.
I'll explore the wrapper class/ID you recommended as a timesaving alternative to manually changing every .row.
Thanks again!

Posts Followed

Following

  • No Content

Followers