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 Brad Shomer's post 18 days

I typed "foundation -v" and npm reported back the version number. I did it again and I got this message:
Update available: 2.2.5 (current: 2.2.3)
Run npm update -g foundation-cli to update.
I typed it in and the update took very little time.

Wally Glenn commented on Jason's post about 2 months

You mean something like this:
<wrapper>
<center>
<container>
<row>
<columns>
<center>
CONTENT
</center>
</columns>
</row>
</container>
</center>
</wrapper>
Or just try adding <center></center> with your current code.

Wally Glenn commented on Danny van Zon's post 2 months

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

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

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

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

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

Wally Glenn commented on mxeise's post 4 months

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

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

Wally Glenn commented on Josh Bambrick's post 4 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.

Posts Followed


  • 1
    Reply
  • Center Entire Email

    By Jason

    center

    Hi, I am using <wrapper> around my entire email in the hope that it centers the entire email within the email client. However, nothing I do centers the email, rather it is always left-justified. Is there a way to center the email in the email client? Thanks.

    Last Reply by Wally Glenn about 2 months ago



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


  • 7
    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 lopa singh 7 days ago







Following

    No Content

Followers

My Posts







My Comments

You commented on Brad Shomer's post 18 days

I typed "foundation -v" and npm reported back the version number. I did it again and I got this message:
Update available: 2.2.5 (current: 2.2.3)
Run npm update -g foundation-cli to update.
I typed it in and the update took very little time.

You commented on Jason's post about 2 months

You mean something like this:
<wrapper>
<center>
<container>
<row>
<columns>
<center>
CONTENT
</center>
</columns>
</row>
</container>
</center>
</wrapper>
Or just try adding <center></center> with your current code.

You commented on Danny van Zon's post 2 months

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

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

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

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

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

You commented on mxeise's post 4 months

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

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

You commented on Josh Bambrick's post 4 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.

Posts Followed

Following

  • No Content

Followers