Menu icon Foundation

Designer | Saint Louis, Missouri

I'm the Lead Designer at Cat5 Commerce. Cat5 Commerce owns and operates three online retail stores, TacticalGear.com, WorkBoots.com and RunningShoes.com.

@coreyschaaf coreyschaaf http://linkedin.com/in/coreyschaaf

My Posts

  • 4
    Replies
  • SPAM ON POSTINGS

    By Corey Schaaf

    forumspamBots

    Foundation Zurb! I love your framework for Emails. I love your framework for Sites. If I knew how to develop an app, I'd probably love your framework for aps. However, I absolutely hate your forum. It's almost unusable with all the automated posting... (continued)

    Last Reply by kolormerah over 1 year ago

My Comments

Corey Schaaf commented on John's post about 1 month

 Here is the code I was trying to paste. Foundation's forums are horrible and anytime you try to show code, it flags it as spam it seems. I sent this post to the engineers and they turned the post back on, but seemed to  have left out my code. I will try to post it again for you. 
<row>
<columns large="6">
<img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="157" alt="">
<div style="padding:20px;">
<h3 style="color:black" class="text-left">Kop 1</h3>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<p>
<a href="https://www.coosto.com">
<span style="color:#ec4756" class="text-left">
<strong>linkerino</strong>
</span>
</a>
</p>
</div>
</columns>
<columns>
<img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="157" alt="">
<div style="padding:20px;">
<h3 style="color:black" class="text-left">Kop 1</h3>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<p>
<a href="https://www.coosto.com">
<span style="color:#ec4756" class="text-left">
<strong>linkerino</strong>
</span>
</a>
</p>
</div>
</columns>
</row>

Helpful 1
Corey Schaaf commented on John's post about 1 month

Out of curiosity, the code above looks like you're using INKY and writing some additional html markup? Is that correct? If you are, I'm not sure why you're doing that (you may have a good reason) but it looks like you don't need certain things and you don't need to add additional TD between <row> and <columns> tags.  
 
The above in addition to the problem with your images is you're putting them inside a table and setting a max-width of 580px.  Outlook is probably just interpreting that as make this table 580px. You're also missing the value of the height="" ... without the height value the images won't scale correctly.  
 
Keep in mind, outlook is not responsive so the best you're hoping to achieve is a good looking desktop version. 
 
I would write what you have like this (note I just added a value in for both images height, you will most likely need to adjust that depending on the size of your image): 

Helpful 1
Corey Schaaf commented on Josh B.'s post 4 months

 On large, your columns must add up to 12 in a row. if they don't you can use offsets (as explained in the docs) to have uneven rows.  However what you're trying to do is not going to work. 
Your columns have to add up to 12 in a single row. row
One (3 columns) |  Two (3 columns)  |  Three (three columns)  |  Four (three columns) = 12
/row
row
Five (3 columns) |  Six (3 columns)  Seven  (three columns)  |  Eight (three columns)  = 12
/rowrownine (3 columns) (you would need to use the "large-offsets" classes for this row since they don't add up to 12. 
/row
 
your html code also had some nesting errors with <th> that I corrected. The new HTML would look like this and should achieve the result you're looking for. 
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<!-- The content of your email goes here. -->
<table align="center" class="container">
<tbody>
<tr>
<td>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tr>
<th>One</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Two</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Three</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tr>
<th>Four</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tr>
<th>Five</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Six</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Seven</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tr>
<th>Eight</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tr>
<th>Nine</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>

Helpful 0
Corey Schaaf commented on Asaf R's post 4 months

There's a good chance that since you are linking to a youtube video and opening the email in gmail (I'm guessing) that it looks like a video is attached to your email with a thumbnail of that image or a thumbnail of the video.
Also - this is just the inky code correct? You're sending the file in that gets compiled from the dist folder right? Sorry, I don't know your level of expertise, so hope you don't find that question insulting. 
 
 

Helpful 1
Corey Schaaf commented on Hao Yu's post 4 months

The file you want to change is _settings.scss located src/assets/scss/_settings.scss. In that file you can change some of the default classes / margin / padding / styles etc. 
For more information on what you can change in the _settings.scss folder - I would visit the following page: 
http://foundation.zurb.com/emails/docs/sass.htm (scroll to the bottom where is says "The Settings File". 
Also when you make changes, make sure you use the cmd "foundation watch" or "foundation build". I hope you found this helpful. 

Helpful 0
Corey Schaaf commented on Elisandro Martinez's post 5 months

Sorry - want I mean is card sorting. It's used to help you evaluate categorization / site hierarchy. 
 
Here's a link to the process: https://www.optimalworkshop.com/101/card-sorting

Helpful 0
Corey Schaaf commented on Elisandro Martinez's post 5 months

Since your navigation is extremely long and only works best on large and up views. You should consider having a menu option for medium down.  Meaning use the navigation approach on medium that you use on small devices. 
You would have to change the font size significantly in order to get the entire menu to fit on medium devices, so I don't even think you should attempt that. The only other thing I can think of it to do a card shuffle and see about re-organizing the menu items into something smaller. Hope you find that helpful. 
 | | | | |\/

Helpful 0
Corey Schaaf commented on Itamar Rogel's post 5 months

Based on the compatibility docs for the latest version of foundation
*Gmail app for Android: Works - does not recognize media queries so it will render large breakpoint.
You can see the support docs for compatibility here:
https://foundation.zurb.com/emails/docs/compatibility.html
Hop you found this helpful!
 | | | | |\/

Helpful 2
Corey Schaaf commented on Elisandro Martinez's post 5 months

Hey Lee,
I believe the issue you are experiencing is because the content on small is larger than the content box.  Imelhart@melhartindustries.com is a really long word.  I would suggest either making the font smaller, or implement an ellipses to cut off the word gracefully. 
.my-class {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// don’t forget that .block-with-text can’t be an inline element
}
 
 
 
so instead the email address would look something like this: 

Helpful 0
Corey Schaaf commented on Jordan Charters's post 5 months

Should be a simple fix. It's the way you are referencing the width of the images on the img tag itself. Try this instead. 
<row>
<columns large="4">
<img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
</columns>
<columns large="4">
<img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
</columns>
<columns large="4">
<img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
</columns>
</row>
 
Foundation while responsive is not mobile first. It's desktop first. So what I would suggest is setting the images to the exact height and width of the container they are sitting inside of for desktop. I'm guessing, but at 580px, with gutters, that would mean your images are probably 187px x 187px (to maintain proportions). You need to specify the that height and width on the image. Note the height and width is needed to be compatible with older browsers otherwise you might get some weird stretching that isn't proportionate to the image. Also - don't use style="height:XXX; width:XXX;" that won't work. The images will "stretch" to 100% of the container on small.  That's the default behavior for Foudation for Emails. However, in some instances, (like when a 3 column format stacks on small devices) the actual image size needs to be as large as the viewport. If it's note, then you might end up with centered images with lots of padding on the left and right of the image.  It's a matter of preference I guess. 
The reason what you have above doesn't work is that you're telling the images to be 100% on desktop (which is 300px for each image - totally 900px total) when you really want to tell desktop the exact dimensions.   
Hope you find that helpful     |     |     |    \/

Helpful 0

Posts Followed

  • 4
    Replies
  • Make change in foundation-email.scss

    By Hao Yu

    email; sass;

    Just started using the SASS version for html email. I wanna make changes to foundation-email.scss which is included in app.scss. Say when I go to the node-modules/foundation-emails/components/_normalize.scss and make changes. There's no change made in&nbs... (continued)

    Last Reply by Hao Yu 4 months ago

Following

Followers

My Posts

My Comments

You commented on John's post about 1 month

 Here is the code I was trying to paste. Foundation's forums are horrible and anytime you try to show code, it flags it as spam it seems. I sent this post to the engineers and they turned the post back on, but seemed to  have left out my code. I will try to post it again for you. 
<row>
<columns large="6">
<img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="157" alt="">
<div style="padding:20px;">
<h3 style="color:black" class="text-left">Kop 1</h3>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<p>
<a href="https://www.coosto.com">
<span style="color:#ec4756" class="text-left">
<strong>linkerino</strong>
</span>
</a>
</p>
</div>
</columns>
<columns>
<img src="https://info.coosto.com/cdnr/300/acton/attachment/22761/f-033f/1/-/-/-/-/maxresdefault.jpg" width="280" height="157" alt="">
<div style="padding:20px;">
<h3 style="color:black" class="text-left">Kop 1</h3>
<p class="text-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</p>
<p>
<a href="https://www.coosto.com">
<span style="color:#ec4756" class="text-left">
<strong>linkerino</strong>
</span>
</a>
</p>
</div>
</columns>
</row>

Helpful 1
You commented on John's post about 1 month

Out of curiosity, the code above looks like you're using INKY and writing some additional html markup? Is that correct? If you are, I'm not sure why you're doing that (you may have a good reason) but it looks like you don't need certain things and you don't need to add additional TD between <row> and <columns> tags.  
 
The above in addition to the problem with your images is you're putting them inside a table and setting a max-width of 580px.  Outlook is probably just interpreting that as make this table 580px. You're also missing the value of the height="" ... without the height value the images won't scale correctly.  
 
Keep in mind, outlook is not responsive so the best you're hoping to achieve is a good looking desktop version. 
 
I would write what you have like this (note I just added a value in for both images height, you will most likely need to adjust that depending on the size of your image): 

Helpful 1
You commented on Josh B.'s post 4 months

 On large, your columns must add up to 12 in a row. if they don't you can use offsets (as explained in the docs) to have uneven rows.  However what you're trying to do is not going to work. 
Your columns have to add up to 12 in a single row. row
One (3 columns) |  Two (3 columns)  |  Three (three columns)  |  Four (three columns) = 12
/row
row
Five (3 columns) |  Six (3 columns)  Seven  (three columns)  |  Eight (three columns)  = 12
/rowrownine (3 columns) (you would need to use the "large-offsets" classes for this row since they don't add up to 12. 
/row
 
your html code also had some nesting errors with <th> that I corrected. The new HTML would look like this and should achieve the result you're looking for. 
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<!-- The content of your email goes here. -->
<table align="center" class="container">
<tbody>
<tr>
<td>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tr>
<th>One</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Two</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Three</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tr>
<th>Four</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tr>
<th>Five</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Six</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns">
<table>
<tr>
<th>Seven</th>
</tr>
</table>
</th>
<th class="small-12 large-3 columns last">
<table>
<tr>
<th>Eight</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-3 columns first">
<table>
<tr>
<th>Nine</th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>

Helpful 0
You commented on Asaf R's post 4 months

There's a good chance that since you are linking to a youtube video and opening the email in gmail (I'm guessing) that it looks like a video is attached to your email with a thumbnail of that image or a thumbnail of the video.
Also - this is just the inky code correct? You're sending the file in that gets compiled from the dist folder right? Sorry, I don't know your level of expertise, so hope you don't find that question insulting. 
 
 

Helpful 1
You commented on Hao Yu's post 4 months

The file you want to change is _settings.scss located src/assets/scss/_settings.scss. In that file you can change some of the default classes / margin / padding / styles etc. 
For more information on what you can change in the _settings.scss folder - I would visit the following page: 
http://foundation.zurb.com/emails/docs/sass.htm (scroll to the bottom where is says "The Settings File". 
Also when you make changes, make sure you use the cmd "foundation watch" or "foundation build". I hope you found this helpful. 

Helpful 0
You commented on Elisandro Martinez's post 5 months

Sorry - want I mean is card sorting. It's used to help you evaluate categorization / site hierarchy. 
 
Here's a link to the process: https://www.optimalworkshop.com/101/card-sorting

Helpful 0
You commented on Elisandro Martinez's post 5 months

Since your navigation is extremely long and only works best on large and up views. You should consider having a menu option for medium down.  Meaning use the navigation approach on medium that you use on small devices. 
You would have to change the font size significantly in order to get the entire menu to fit on medium devices, so I don't even think you should attempt that. The only other thing I can think of it to do a card shuffle and see about re-organizing the menu items into something smaller. Hope you find that helpful. 
 | | | | |\/

Helpful 0
You commented on Itamar Rogel's post 5 months

Based on the compatibility docs for the latest version of foundation
*Gmail app for Android: Works - does not recognize media queries so it will render large breakpoint.
You can see the support docs for compatibility here:
https://foundation.zurb.com/emails/docs/compatibility.html
Hop you found this helpful!
 | | | | |\/

Helpful 2
You commented on Elisandro Martinez's post 5 months

Hey Lee,
I believe the issue you are experiencing is because the content on small is larger than the content box.  Imelhart@melhartindustries.com is a really long word.  I would suggest either making the font smaller, or implement an ellipses to cut off the word gracefully. 
.my-class {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// don’t forget that .block-with-text can’t be an inline element
}
 
 
 
so instead the email address would look something like this: 

Helpful 0
You commented on Jordan Charters's post 5 months

Should be a simple fix. It's the way you are referencing the width of the images on the img tag itself. Try this instead. 
<row>
<columns large="4">
<img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
</columns>
<columns large="4">
<img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
</columns>
<columns large="4">
<img src="http://placehold.it/186x300" alt="" class="show-for-large" width="187" height="187">
</columns>
</row>
 
Foundation while responsive is not mobile first. It's desktop first. So what I would suggest is setting the images to the exact height and width of the container they are sitting inside of for desktop. I'm guessing, but at 580px, with gutters, that would mean your images are probably 187px x 187px (to maintain proportions). You need to specify the that height and width on the image. Note the height and width is needed to be compatible with older browsers otherwise you might get some weird stretching that isn't proportionate to the image. Also - don't use style="height:XXX; width:XXX;" that won't work. The images will "stretch" to 100% of the container on small.  That's the default behavior for Foudation for Emails. However, in some instances, (like when a 3 column format stacks on small devices) the actual image size needs to be as large as the viewport. If it's note, then you might end up with centered images with lots of padding on the left and right of the image.  It's a matter of preference I guess. 
The reason what you have above doesn't work is that you're telling the images to be 100% on desktop (which is 300px for each image - totally 900px total) when you really want to tell desktop the exact dimensions.   
Hope you find that helpful     |     |     |    \/

Helpful 0

Posts Followed

Following

Followers

Download ZURB’s 17 Responsive Trends That Will Shape 2017

Stay informed with amazing responsive trends each month from ZURB.
Register Today

Get all the answers in our
Foundation Classes

Learn Foundation from the creators in our interactive online webinars which will keep you up to date with the latest trends and skills needed to win your projects.

Or if you prefer, contact the Foundation Team at training@zurb.com or (408) 341-0600 x635