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 over 3 years ago



My Comments

Bryan commented on YH's post 14 days

Sorry, Rafi — I know this thread is way stale, but I'm getting a Sass error related to breakpoints — just like YH was getting, when using the "only" modifier:
 
.donate__header {
border-top: 36px solid $color-beige;

.heading-wrapper {
padding: 0 55px;
}

h1,
h2 {
font-family: "Montserrat", sans-serif;
}

h1 {
margin-bottom: 0;
font-size: 3.375rem;
font-weight: 700;
line-height: 4rem;
color: $color-dark-green;
}

h2 {
margin-top: 0;
font-size: 1.5rem;
line-height: 1.5rem;
color: $color-green;
}

#logo {
margin: 24px 0 36px;

img {
  width: 120px;
}

}

& ~ .content-wrapper .main-content {
@include breakpoint(small only) {
padding: 30px;
background-color: gray;
}
}
}
 
The problem's at the very bottom. If I set the breakpoint to "small," it works just fine. But if I use "small only," I get this error:
 
WARNING: Breakpoint mixin supports: medium, large, xlarge, xxlarge
         on line 114 of sass/base/_mixins.scss, in mixin 'breakpoint'
         from line 37 of sass/pages/_donate.scss
         from line 72 of sass/style.scss
 
Can't see that I'm doing anything wrong here, but something's certainly not right. Any ideas?
 
Thanks very much!
 
 

Bryan commented on YH's post 14 days

Sorry, Rafi — I know this thread is way stale, but I'm getting a Sass error related to breakpoints — just like YH was getting, when using the "only" modifier:
 
.donate__header {
border-top: 36px solid $color-beige;

.heading-wrapper {
padding: 0 55px;
}

h1,
h2 {
font-family: "Montserrat", sans-serif;
}

h1 {
margin-bottom: 0;
font-size: 3.375rem;
font-weight: 700;
line-height: 4rem;
color: $color-dark-green;
}

h2 {
margin-top: 0;
font-size: 1.5rem;
line-height: 1.5rem;
color: $color-green;
}

#logo {
margin: 24px 0 36px;

img {
  width: 120px;
}

}

& ~ .content-wrapper .main-content {
@include breakpoint(small only) {
padding: 30px;
background-color: gray;
}
}
}
 
The problem's at the very bottom. If I set the breakpoint to "small," it works just fine. But if I use "small only," I get this error:
 
WARNING: Breakpoint mixin supports: medium, large, xlarge, xxlarge
         on line 114 of sass/base/_mixins.scss, in mixin 'breakpoint'
         from line 37 of sass/pages/_donate.scss
         from line 72 of sass/style.scss
 
Can't see that I'm doing anything wrong here, but something's certainly not right. Any ideas?
 
Thanks very much!
 
 

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 almost 3 years

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

Bryan commented on Bryan's post almost 3 years

Cool! Thanks very much, Corey.
_bryan

Bryan commented on Bryan's post almost 3 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 almost 3 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 almost 3 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.
 

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 YH's post 14 days

Sorry, Rafi — I know this thread is way stale, but I'm getting a Sass error related to breakpoints — just like YH was getting, when using the "only" modifier:
 
.donate__header {
border-top: 36px solid $color-beige;

.heading-wrapper {
padding: 0 55px;
}

h1,
h2 {
font-family: "Montserrat", sans-serif;
}

h1 {
margin-bottom: 0;
font-size: 3.375rem;
font-weight: 700;
line-height: 4rem;
color: $color-dark-green;
}

h2 {
margin-top: 0;
font-size: 1.5rem;
line-height: 1.5rem;
color: $color-green;
}

#logo {
margin: 24px 0 36px;

img {
  width: 120px;
}

}

& ~ .content-wrapper .main-content {
@include breakpoint(small only) {
padding: 30px;
background-color: gray;
}
}
}
 
The problem's at the very bottom. If I set the breakpoint to "small," it works just fine. But if I use "small only," I get this error:
 
WARNING: Breakpoint mixin supports: medium, large, xlarge, xxlarge
         on line 114 of sass/base/_mixins.scss, in mixin 'breakpoint'
         from line 37 of sass/pages/_donate.scss
         from line 72 of sass/style.scss
 
Can't see that I'm doing anything wrong here, but something's certainly not right. Any ideas?
 
Thanks very much!
 
 

You commented on YH's post 14 days

Sorry, Rafi — I know this thread is way stale, but I'm getting a Sass error related to breakpoints — just like YH was getting, when using the "only" modifier:
 
.donate__header {
border-top: 36px solid $color-beige;

.heading-wrapper {
padding: 0 55px;
}

h1,
h2 {
font-family: "Montserrat", sans-serif;
}

h1 {
margin-bottom: 0;
font-size: 3.375rem;
font-weight: 700;
line-height: 4rem;
color: $color-dark-green;
}

h2 {
margin-top: 0;
font-size: 1.5rem;
line-height: 1.5rem;
color: $color-green;
}

#logo {
margin: 24px 0 36px;

img {
  width: 120px;
}

}

& ~ .content-wrapper .main-content {
@include breakpoint(small only) {
padding: 30px;
background-color: gray;
}
}
}
 
The problem's at the very bottom. If I set the breakpoint to "small," it works just fine. But if I use "small only," I get this error:
 
WARNING: Breakpoint mixin supports: medium, large, xlarge, xxlarge
         on line 114 of sass/base/_mixins.scss, in mixin 'breakpoint'
         from line 37 of sass/pages/_donate.scss
         from line 72 of sass/style.scss
 
Can't see that I'm doing anything wrong here, but something's certainly not right. Any ideas?
 
Thanks very much!
 
 

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 almost 3 years

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

You commented on Bryan's post almost 3 years

Cool! Thanks very much, Corey.
_bryan

You commented on Bryan's post almost 3 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 almost 3 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 almost 3 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.
 

Posts Followed

Following

  • No Content

Followers