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

My Comments

Corey Schaaf commented on Jason Kendall's post almost 2 years

Based on your build the following OS / Architectures are supported. Are you 
https://github.com/sass/node-sass/releases/tag/v3.13.1

Helpful 0
Corey Schaaf commented on John's post about 2 years

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

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 over 2 years

 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 over 2 years

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 over 2 years

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 over 2 years

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 over 2 years

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 over 2 years

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 over 2 years

Hey Lee,
I believe the issue you are experiencing is because the content on small is larger than the content box.  [email protected] 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

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

Following

Followers

My Posts

My Comments

You commented on Jason Kendall's post almost 2 years

Based on your build the following OS / Architectures are supported. Are you 
https://github.com/sass/node-sass/releases/tag/v3.13.1

Helpful 0
You commented on John's post about 2 years

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

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 over 2 years

 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 over 2 years

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 over 2 years

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 over 2 years

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 over 2 years

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 over 2 years

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 over 2 years

Hey Lee,
I believe the issue you are experiencing is because the content on small is larger than the content box.  [email protected] 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

Posts Followed

Following

Followers

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.

See Upcomming Classes

Or if you prefer, contact the Foundation Team at [email protected] or (408) 341-0600 x635