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.

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 about 1 year ago


My Comments

Corey Schaaf commented on Josh B.'s post 29 days

 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>

Corey Schaaf commented on Asaf R's post 29 days

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. 
 
 

Corey Schaaf commented on Hao Yu's post 29 days

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. 

Corey Schaaf commented on Elisandro Martinez's post 2 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

Corey Schaaf commented on Elisandro Martinez's post 2 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. 
 | | | | |\/

Corey Schaaf commented on Itamar Rogel's post 2 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!
 | | | | |\/

Corey Schaaf commented on Elisandro Martinez's post 2 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: 

Corey Schaaf commented on Jordan Charters's post 2 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     |     |     |    \/

Corey Schaaf commented on Sean Smith's post 3 months

It might be some of the dependencies are failing.  I usually take the step you've already done when this fails.  Out of curiosity - have you tried a npm install for rebuilding the node-modules folder? 
 

Corey Schaaf commented on Corey Schaaf's post 3 months

Not that I'm aware of - but I believe some people are having success using UnCSS with the framework. 

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 26 days ago









Following

Followers

My Posts



My Comments

You commented on Josh B.'s post 29 days

 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>

You commented on Asaf R's post 29 days

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. 
 
 

You commented on Hao Yu's post 29 days

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. 

You commented on Elisandro Martinez's post 2 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

You commented on Elisandro Martinez's post 2 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. 
 | | | | |\/

You commented on Itamar Rogel's post 2 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!
 | | | | |\/

You commented on Elisandro Martinez's post 2 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: 

You commented on Jordan Charters's post 2 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     |     |     |    \/

You commented on Sean Smith's post 3 months

It might be some of the dependencies are failing.  I usually take the step you've already done when this fails.  Out of curiosity - have you tried a npm install for rebuilding the node-modules folder? 
 

You commented on Corey Schaaf's post 3 months

Not that I'm aware of - but I believe some people are having success using UnCSS with the framework. 

Posts Followed

Following

Followers