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 Danny van Zon's post about 22 hours

Your html code is a mess. You have an open row that doesn't close, a a table cell with no table.
Start a new html page and stick to something simple like this:
<container>
<row>
<columns large="12">
full width
</columns>
</row>
<row>
<columns large="6" small="12">
left
</columns>
<columns large="6" small="12">
right
</columns>
</row>
</container>
Use this as a guide: http://foundation.zurb.com/emails/docs/grid.html
This answer assumes you're attempting to use Foundation for Email 2.0.
From there, customize as you need to fine-tune your html page.
Good luck.

Wally Glenn commented on John's post 4 days

Danny,
I work with Outlook all the time since half of my customer base uses Outlook.
In my case I want a maximum width of 580px for an image. When using Foundation for Emails 2, this is the code I use for a full-width table to get those results:
<container>
<row>
<columns small="12" large="12">
<img src="http://sample.com/images/hero.jpg" width="580" align="center" border="0" style="max-width: 580px;"/>
</columns>
</row>
</container>
The reason to specify the maximum desktop width is that if you use max-width: 100%, some desktop email clients like AOL will stretch the image to fill the entire screen.
Good luck.

Wally Glenn commented on Wally Glenn's post 26 days

siphon or siphon-media-query pulls values from _template.scss, even if you don't link the file to your sass.
Are there other files that get automatically pulled in? 
It's really annoying because for some reason the values are given precedence over my SASS files. As an example, I don't want a 95% width, f3f3f3 is not a brand color and I don't need a 16px padding, but those values cannot be overwritten in SASS and that's sloppy.
    .pipe($.replace, 'width: 95% !important', 'width: 100% !important')
    .pipe($.replace, 'padding-right: 16px !important;', '')
    .pipe($.replace, 'padding-left: 16px !important;', '')
 
    .pipe($.replace, 'background: #f3f3f3;', '')
How can I identify which SASS files are used automatically and is there a way to stop this and still create a style sheet with my custom values?

Wally Glenn commented on Wally Glenn's post about 1 month

Thanks Rafi.
I have an email that on a mobile device needs the width of images to go edge-to-edge. 
It looks to me like I need to change this specific setting:
@media only screen and (max-width: 596px) {

table.body .container {
width: 95% !important;
}
}
I have tried setting it to width: 100%. Every time I edit this on my custom SASS, it reverts back to width: 95%.
I am trying to troubleshoot where that's coming from, fix it and add back the rest of my SASS files.
To troubleshoot, I created a new scss file with no values to see what would show up when I ran 'foundation build'.
Even though there is no link to the foundation scss files, css values are showing up.
If you have an idea how I can edit those values in the JSFiddle, it would be really great. Then I can really move forward.

Wally Glenn commented on Wally Glenn's post about 1 month

This is the code for the drip.html file:
 
https://jsfiddle.net/wallyglenn/fqs9qcLe/

Wally Glenn commented on mxeise's post about 1 month

 I really want to get posting lessons from halloween. They're obviously posting spam, but the posts make it to the thread just fine and there's no way to mark it as spam.
I'm trying to get problems solved, find solutions for others, but my posts always get automatically marked spam, so they go dark until someone fixes something and they pop up days or weeks later.
halloween, what is your secret?

Wally Glenn commented on Keith Mason's post about 2 months

Do you have the html code we can see to help determine the problem?

Wally Glenn commented on Josh Bambrick's post about 2 months

This is the js file with the gulpfile in the js field.
https://jsfiddle.net/wallyglenn/8exrp02n/
The options I was trying are currently commented out.

Wally Glenn commented on Josh Bambrick's post about 2 months

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 2 months

/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.
 

Posts Followed


  • 8
    Replies
  • Outlook breaks image column width

    By John

    Outlookmail2016

    So im new to inky for mail but ive run into this problem that im not sure how to solve. I even stripped out all my own code and tried with Inky template to see if its my code or not. It seems it still breaks with the inky email template. How it suppose t... (continued)

    Last Reply by Danny van Zon about 11 hours ago


  • 6
    Replies
  • Layout breaks in iOS Mail

    By mxeise

    ioslayoutResponsive

    Hello, I do have a problem with the "responsiveness" of my mail. In the Google Chrome preview, everything looks fine and is responsive as it should be - but on iOS iPhone 6 the layout is not going to "responsive". Any Ideas?Thanks in advance :) Here's m... (continued)

    Last Reply by Wally Glenn about 1 month ago









Following

    No Content

Followers

My Posts






My Comments

You commented on Danny van Zon's post about 22 hours

Your html code is a mess. You have an open row that doesn't close, a a table cell with no table.
Start a new html page and stick to something simple like this:
<container>
<row>
<columns large="12">
full width
</columns>
</row>
<row>
<columns large="6" small="12">
left
</columns>
<columns large="6" small="12">
right
</columns>
</row>
</container>
Use this as a guide: http://foundation.zurb.com/emails/docs/grid.html
This answer assumes you're attempting to use Foundation for Email 2.0.
From there, customize as you need to fine-tune your html page.
Good luck.

You commented on John's post 4 days

Danny,
I work with Outlook all the time since half of my customer base uses Outlook.
In my case I want a maximum width of 580px for an image. When using Foundation for Emails 2, this is the code I use for a full-width table to get those results:
<container>
<row>
<columns small="12" large="12">
<img src="http://sample.com/images/hero.jpg" width="580" align="center" border="0" style="max-width: 580px;"/>
</columns>
</row>
</container>
The reason to specify the maximum desktop width is that if you use max-width: 100%, some desktop email clients like AOL will stretch the image to fill the entire screen.
Good luck.

You commented on Wally Glenn's post 26 days

siphon or siphon-media-query pulls values from _template.scss, even if you don't link the file to your sass.
Are there other files that get automatically pulled in? 
It's really annoying because for some reason the values are given precedence over my SASS files. As an example, I don't want a 95% width, f3f3f3 is not a brand color and I don't need a 16px padding, but those values cannot be overwritten in SASS and that's sloppy.
    .pipe($.replace, 'width: 95% !important', 'width: 100% !important')
    .pipe($.replace, 'padding-right: 16px !important;', '')
    .pipe($.replace, 'padding-left: 16px !important;', '')
 
    .pipe($.replace, 'background: #f3f3f3;', '')
How can I identify which SASS files are used automatically and is there a way to stop this and still create a style sheet with my custom values?

You commented on Wally Glenn's post about 1 month

Thanks Rafi.
I have an email that on a mobile device needs the width of images to go edge-to-edge. 
It looks to me like I need to change this specific setting:
@media only screen and (max-width: 596px) {

table.body .container {
width: 95% !important;
}
}
I have tried setting it to width: 100%. Every time I edit this on my custom SASS, it reverts back to width: 95%.
I am trying to troubleshoot where that's coming from, fix it and add back the rest of my SASS files.
To troubleshoot, I created a new scss file with no values to see what would show up when I ran 'foundation build'.
Even though there is no link to the foundation scss files, css values are showing up.
If you have an idea how I can edit those values in the JSFiddle, it would be really great. Then I can really move forward.

You commented on Wally Glenn's post about 1 month

This is the code for the drip.html file:
 
https://jsfiddle.net/wallyglenn/fqs9qcLe/

You commented on mxeise's post about 1 month

 I really want to get posting lessons from halloween. They're obviously posting spam, but the posts make it to the thread just fine and there's no way to mark it as spam.
I'm trying to get problems solved, find solutions for others, but my posts always get automatically marked spam, so they go dark until someone fixes something and they pop up days or weeks later.
halloween, what is your secret?

You commented on Keith Mason's post about 2 months

Do you have the html code we can see to help determine the problem?

You commented on Josh Bambrick's post about 2 months

This is the js file with the gulpfile in the js field.
https://jsfiddle.net/wallyglenn/8exrp02n/
The options I was trying are currently commented out.

You commented on Josh Bambrick's post about 2 months

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 2 months

/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.
 

Posts Followed

Following

  • No Content

Followers

  • No Content