Menu icon Foundation

Developer | Emeryville, CA

Email developer looking to make the experience memorable.

My Posts

  • NEW
  • Customize Inliner?

    By Wally Glenn

    html emailcustom Inky

    Is it possible to customize the Zurb Inliner so it creates a <style> sheet in the head and doesn't inline css values? I have a desire to to include a style sheet with an email, the information from the template, but I'm finding inlining creates it'... (continued)




  • NEW
  • Change Build Order

    By Wally Glenn

    emailSass

    I'm noticing when I run Foundation watch, the inline style for Margin loads before margin. I'd like to reverse that.I have tried to move things around in my sass file, but I have not discovered a way to easily manipulate the load order.Is there some ... (continued)




My Comments

Wally Glenn commented on Josh Bambrick's post about 12 hours

Is there some other step you're doing? I'm trying this and it's not working for me.

Wally Glenn commented on adiba arif's post 11 days

/src/assets/app.scss has links to the other sass files. To avoid any confusion, I created my own file called custom.scss, then added this link to app.scss:
@import 'custom';
Then I customized all of my global settings:
$global-width: 580px;$global-width-small: 95%;$global-gutter: 16px;$body-background: $white;
That way I leave most of the zurb settings alone so I can always go back and compare my settings with Foundation to help track down issues.
 

Wally Glenn commented on John Deegs's post 16 days

Gmail Desktop, Microsoft Outlook are not responsive email clients. Outlook ignores @media queries. Gmail now understands them, but 
Gmail for Android and other clients such as Apple Mail, IOS mail clients are responsive.
Welcome to email development.
Good luck.

Wally Glenn commented on Matthew Andrianakos's post 23 days

Gmail does not support webfonts.
 
I know this sounds absolutely ridiculous, seeing how Google popularized web fonts in the first place by making them freely available, but as of today, Gmail does not support webfonts.
In addition, Outlook has limited support for webfonts. It's hit and miss. The default font for Outlook is Times New Roman. Most other clients use Arial.
@font-face is not supported by Gmail, Outlook or Yahoo! email clients.
 
Good luck.

Wally Glenn commented on Isaac Fennell's post 2 months

This is how I create custom emails using one code base.
Create Custom Class:
I create a mixin using a custom SASS file to handle different projects. This allows me one code base using the existing Zurb SASS files with custom classes that have the customization for that project.
In /src/assets/, I create a new SASS file. In the file I create a custom unique class name. In my case, I use .alpha, .beta, .charlie, .delta. This will give me five different looks because if I go with no class, it defaults to the existing SASS code.
.alpha {}
.beta {}
.charlie {}
.delta {}
 
I enter the SASS customization like this:
.alpha { 
  // 4. Typography
  // -------------
  $global-font-color: $black;
  $body-font-family: Arial, sans-serif;
  $global-font-weight: 400;
  $header-color: inherit;
  $global-line-height: 1.43;
  $global-font-size: 14px;
  $body-line-height: $global-line-height;
  $header-font-family: $body-font-family;
  $header-font-weight: $global-font-weight;
  $h1-font-size: 30px;
 
   & body, table.body, p, td, th, a {
     color: $black;
     font-family: $body-font-family;
     font-weight: $global-font-weight;
     padding: 0;
     margin: 0;
     Margin-bottom: 10px;
     line-height: 1.3;
    }
}
 
Create Layouts:
In /src/layouts/ create a new layout for each parent class. As an example, alpha.html. Add this line to the body tag:
  <body class="alpha">
All of your custom headers, footers will be in the custom alpha layout.
 
Create a Page:
In /src/pages/ create your custom emails for each parent class. Create a new file called alpha-welcome.html
 Add this line to the top:
  ---
  layout: alpha
  ---
This allows you to leverage all of the customization you've already created for your email brand for the larger emails and use them with the alpha email. 
By creating specific classes in settings.scss, you can create a wide range of custom emails and still maintain your base email look and feel already laid out by Zurb and your specific custom changes in each parent class.
 
Good luck

Wally Glenn commented on Itamar Rogel's post 2 months

I'd also like to point out there is a lot that Gmail is supporting. To illustrate that, I copied all of the CSS supported by Gmail and to create a ridiculous long post.
Gmail Supported CSS Properties & Media Queries
The following CSS properties are supported in Gmail & Inbox:

azimuth
background
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-sizing
break-after
break-before
break-inside
caption-side
clear
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
direction
display
elevation
empty-cells
float
font
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-weight
height
image-orientation
image-resolution
isolation
letter-spacing
line-height
list-style
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
pause
pause-after
pause-before
pitch
pitch-range
quotes
richness
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-align
text-combine-upwrite
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-style
text-indent
text-orientation
text-overflow
text-transform
text-underline-position
unicode-bidi
vertical-align
voice-family
width
word-spacing
writing-mode

Supported media queries
Supported types:

all
screen

Supported queries:

min-width
max-width
min-device-width
max-device-width
orientation
min-resolution
max-resolution

Supported keywords:

and
only

 
Bookmark this:
https://developers.google.com/gmail/design/reference/supported_css

Wally Glenn commented on Itamar Rogel's post 2 months

Email developer Rémi Parmentier did some extensive research into the different types of Gmail accounts and how email rendering differs per account.
https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-after-the-2016-update-53c15151063a
This is a good guide on email on Andoid:
https://litmus.com/blog/the-ultimate-guide-to-email-on-android
Despite the limitations, there's still much more to work with than there was. As an example, Gmail doesn't work with Web fonts, so you'll need a graceful fallback and that's the key to good looking responsive email design. Create something that gracefully degrades. Buttons in some versions of Outlook do not center, but you can make them default to flush left and they still work.

Wally Glenn commented on Itamar Rogel's post 2 months

Gmail supports media queries, but there are some caveats.
 
There is no support for the following gmail types:

Gmail Android App
Gmail desktop using pop/IMAP to connect to another domain.
Android 5.1, 6.0, 7.0
mobile webmail
Google Apps Free Edition

 
Gmail supports some media queries:

Types: all, screen
Keywords: and, only
Queries: min-width, max-width, min-device-width, max-device-width, orientation, min-resolution, max-resolution

 
There is no support for:

External stylesheets
Absolute/fixed positioning
Negative margins
CSS animations
Web fonts
HTML video

 
Gmail will discard your entire block of code when it encounters a css value it doesn't support. The way around that is if you are using css it finds invalid, move it to it's own style block. For instance, I have a <style> block meant for Outlook issues. Gmail might clip that entire block, which is fine because there's no html that applies to anything but Outlook.
 
Finally, Gmail will discard an entire code block for anything with a nested media query. If you're concerned, move the query to it's own <style> block.Good luck.

Wally Glenn commented on kevin neal's post 2 months

Kevin,
Did the emails grow substantially in size when you did changed, "removeStyleTags: false"?
 

Wally Glenn commented on Kevin Price-Ward's post 3 months

The default I have for background is $button-background. You have $backgroundCould that be it?
table.button {
&.outline{ @include button-style($background:transparent); }
}
The other defaults and my modified button code:
$button-background: $white;
$button-color: $global-radius;
$button-font-weight: normal;
$button-margin: 0 0 $global-margin 0;
$button-Margin: 0 190px 0 190px;
$button-border: none;
$button-rounded: $global-rounded;
$border-radius: $global-radius;
$button-padding: (
tiny: 4px 8px 4px 8px,
small: 5px 10px 5px 10px,
default: 8px 16px 8px 16px,
large: 10px 20px 10px 20px,
);
$button-font-size: (
tiny: 10px,
small: 12px,
default: 14px,
large: 20px,
);

Posts Followed











Following

    No Content

Followers

My Posts





My Comments

You commented on Josh Bambrick's post about 12 hours

Is there some other step you're doing? I'm trying this and it's not working for me.

You commented on adiba arif's post 11 days

/src/assets/app.scss has links to the other sass files. To avoid any confusion, I created my own file called custom.scss, then added this link to app.scss:
@import 'custom';
Then I customized all of my global settings:
$global-width: 580px;$global-width-small: 95%;$global-gutter: 16px;$body-background: $white;
That way I leave most of the zurb settings alone so I can always go back and compare my settings with Foundation to help track down issues.
 

You commented on John Deegs's post 16 days

Gmail Desktop, Microsoft Outlook are not responsive email clients. Outlook ignores @media queries. Gmail now understands them, but 
Gmail for Android and other clients such as Apple Mail, IOS mail clients are responsive.
Welcome to email development.
Good luck.

You commented on Matthew Andrianakos's post 23 days

Gmail does not support webfonts.
 
I know this sounds absolutely ridiculous, seeing how Google popularized web fonts in the first place by making them freely available, but as of today, Gmail does not support webfonts.
In addition, Outlook has limited support for webfonts. It's hit and miss. The default font for Outlook is Times New Roman. Most other clients use Arial.
@font-face is not supported by Gmail, Outlook or Yahoo! email clients.
 
Good luck.

You commented on Isaac Fennell's post 2 months

This is how I create custom emails using one code base.
Create Custom Class:
I create a mixin using a custom SASS file to handle different projects. This allows me one code base using the existing Zurb SASS files with custom classes that have the customization for that project.
In /src/assets/, I create a new SASS file. In the file I create a custom unique class name. In my case, I use .alpha, .beta, .charlie, .delta. This will give me five different looks because if I go with no class, it defaults to the existing SASS code.
.alpha {}
.beta {}
.charlie {}
.delta {}
 
I enter the SASS customization like this:
.alpha { 
  // 4. Typography
  // -------------
  $global-font-color: $black;
  $body-font-family: Arial, sans-serif;
  $global-font-weight: 400;
  $header-color: inherit;
  $global-line-height: 1.43;
  $global-font-size: 14px;
  $body-line-height: $global-line-height;
  $header-font-family: $body-font-family;
  $header-font-weight: $global-font-weight;
  $h1-font-size: 30px;
 
   & body, table.body, p, td, th, a {
     color: $black;
     font-family: $body-font-family;
     font-weight: $global-font-weight;
     padding: 0;
     margin: 0;
     Margin-bottom: 10px;
     line-height: 1.3;
    }
}
 
Create Layouts:
In /src/layouts/ create a new layout for each parent class. As an example, alpha.html. Add this line to the body tag:
  <body class="alpha">
All of your custom headers, footers will be in the custom alpha layout.
 
Create a Page:
In /src/pages/ create your custom emails for each parent class. Create a new file called alpha-welcome.html
 Add this line to the top:
  ---
  layout: alpha
  ---
This allows you to leverage all of the customization you've already created for your email brand for the larger emails and use them with the alpha email. 
By creating specific classes in settings.scss, you can create a wide range of custom emails and still maintain your base email look and feel already laid out by Zurb and your specific custom changes in each parent class.
 
Good luck

You commented on Itamar Rogel's post 2 months

I'd also like to point out there is a lot that Gmail is supporting. To illustrate that, I copied all of the CSS supported by Gmail and to create a ridiculous long post.
Gmail Supported CSS Properties & Media Queries
The following CSS properties are supported in Gmail & Inbox:

azimuth
background
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
box-sizing
break-after
break-before
break-inside
caption-side
clear
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
direction
display
elevation
empty-cells
float
font
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-weight
height
image-orientation
image-resolution
isolation
letter-spacing
line-height
list-style
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
outline
outline-color
outline-style
outline-width
overflow
padding
padding-bottom
padding-left
padding-right
padding-top
pause
pause-after
pause-before
pitch
pitch-range
quotes
richness
speak
speak-header
speak-numeral
speak-punctuation
speech-rate
stress
table-layout
text-align
text-combine-upwrite
text-decoration
text-decoration-color
text-decoration-line
text-decoration-skip
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-style
text-indent
text-orientation
text-overflow
text-transform
text-underline-position
unicode-bidi
vertical-align
voice-family
width
word-spacing
writing-mode

Supported media queries
Supported types:

all
screen

Supported queries:

min-width
max-width
min-device-width
max-device-width
orientation
min-resolution
max-resolution

Supported keywords:

and
only

 
Bookmark this:
https://developers.google.com/gmail/design/reference/supported_css

You commented on Itamar Rogel's post 2 months

Email developer Rémi Parmentier did some extensive research into the different types of Gmail accounts and how email rendering differs per account.
https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-after-the-2016-update-53c15151063a
This is a good guide on email on Andoid:
https://litmus.com/blog/the-ultimate-guide-to-email-on-android
Despite the limitations, there's still much more to work with than there was. As an example, Gmail doesn't work with Web fonts, so you'll need a graceful fallback and that's the key to good looking responsive email design. Create something that gracefully degrades. Buttons in some versions of Outlook do not center, but you can make them default to flush left and they still work.

You commented on Itamar Rogel's post 2 months

Gmail supports media queries, but there are some caveats.
 
There is no support for the following gmail types:

Gmail Android App
Gmail desktop using pop/IMAP to connect to another domain.
Android 5.1, 6.0, 7.0
mobile webmail
Google Apps Free Edition

 
Gmail supports some media queries:

Types: all, screen
Keywords: and, only
Queries: min-width, max-width, min-device-width, max-device-width, orientation, min-resolution, max-resolution

 
There is no support for:

External stylesheets
Absolute/fixed positioning
Negative margins
CSS animations
Web fonts
HTML video

 
Gmail will discard your entire block of code when it encounters a css value it doesn't support. The way around that is if you are using css it finds invalid, move it to it's own style block. For instance, I have a <style> block meant for Outlook issues. Gmail might clip that entire block, which is fine because there's no html that applies to anything but Outlook.
 
Finally, Gmail will discard an entire code block for anything with a nested media query. If you're concerned, move the query to it's own <style> block.Good luck.

You commented on kevin neal's post 2 months

Kevin,
Did the emails grow substantially in size when you did changed, "removeStyleTags: false"?
 

You commented on Kevin Price-Ward's post 3 months

The default I have for background is $button-background. You have $backgroundCould that be it?
table.button {
&.outline{ @include button-style($background:transparent); }
}
The other defaults and my modified button code:
$button-background: $white;
$button-color: $global-radius;
$button-font-weight: normal;
$button-margin: 0 0 $global-margin 0;
$button-Margin: 0 190px 0 190px;
$button-border: none;
$button-rounded: $global-rounded;
$border-radius: $global-radius;
$button-padding: (
tiny: 4px 8px 4px 8px,
small: 5px 10px 5px 10px,
default: 8px 16px 8px 16px,
large: 10px 20px 10px 20px,
);
$button-font-size: (
tiny: 10px,
small: 12px,
default: 14px,
large: 20px,
);

Posts Followed

Following

  • No Content

Followers

  • No Content