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 Elisandro Martinez's post 11 days

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 11 days

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 11 days

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 11 days

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 15 days

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

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

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

Corey Schaaf commented on Jim Welch's post about 1 month

I'm buy no means a Git expert. But what I normally do is look for features that are tagged to be added to the next release. I look at the lines of code that are modified and manually add them to my project.  
There are other ways of doing this. Like changing your package.json file to point on the code branch a person has done a pull request for.  Most of the time, I'm okay with waiting for the release, but it is nice grabbing some stuff earlier. 

Corey Schaaf commented on Jim Welch's post about 1 month

What version of Foundation For Emails are you using? 
What I normally do as a backup before I update: 
Copy my src folder and put it someplace safe. 
Then I use command line and run an npm update in the root of my project folder. npm update looks at everything in your package.json file. If there's a new vesion / bug fixes the dependencies in this file will update when you run the npm update cmd.  This updates everything in the node_modules folder with any new features. It will also update the _settings.scss file in case there are some new items that require new classes.  (this is why I said to make a copy of your src folder).  In some instances, I've customized items in the node_modules folder as well. If that's the case you will need to manually add those customization's back. 
I also like to head on over to the change log (I know this can be daunting - but once you take a moment to digest it - it's pretty easy to see what lines of code have changed). I use this while looking at the _settings.scss file. When new features come out, I copy the new lines of code into my original _settings.scss file. (Note you could do this vice versa as well - just depends on which one has more changes). For example if you've made lots of edits to your settings file, it will probably be easier for you to copy any new features into your existing _settings.scss file. 
If you choose not to make a copy of your src folder - all items like pages, images should remain in tact. I'm just overly cautious. 
 
 
 

Corey Schaaf commented on zegg's post about 1 month

 
This should help you achieve the effect you're looking for. Keep in mind, if you nest a wrapper, within a wrapper (which I don't recommend doing) you wall have a border on your inner most elements as well. So you would need to create a different class on the inner most wrapper and target the new class and set the border (or any other styles that are cascading downwards) to 0px. 
<style>
// notice that .wrapper-inner is a class that you have access
// to so you can incorporate styles on elements inside the .wrapper class
// inky adds the markup during Foundation Watch cmds or Foundation Build cmds

.nike-border .wrapper-inner{
border:1px solid #212131;
padding:0px;
}
</style>

<row>
<columns>
<center>
<a href="http://nike.com"&gt;VOIR EN FRANÇAIS</a>
</center>
</columns>
</row>
<wrapper class="nike-border">
<row>
<columns>
Add all content you want to have a border here.
</columns>
</row>
</wrapper>

Posts Followed








  • 2
    Replies
  • Does not collapse on small

    By skube

    gridcollapsefull-width

    &nbsp; I have a basic image where I want collapsed margins. I use the `collapse` class and everything works fine while large, but when I shrink the browser and the breakpoint hits, the margins are&nbsp;no longer collapsed.&nbsp; &nbsp; &lt;container&gt... (continued)

    Last Reply by Corey Schaaf about 1 month ago




Following

Followers

My Posts



My Comments

You commented on Elisandro Martinez's post 11 days

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 11 days

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 11 days

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 11 days

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 15 days

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

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

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

You commented on Jim Welch's post about 1 month

I'm buy no means a Git expert. But what I normally do is look for features that are tagged to be added to the next release. I look at the lines of code that are modified and manually add them to my project.  
There are other ways of doing this. Like changing your package.json file to point on the code branch a person has done a pull request for.  Most of the time, I'm okay with waiting for the release, but it is nice grabbing some stuff earlier. 

You commented on Jim Welch's post about 1 month

What version of Foundation For Emails are you using? 
What I normally do as a backup before I update: 
Copy my src folder and put it someplace safe. 
Then I use command line and run an npm update in the root of my project folder. npm update looks at everything in your package.json file. If there's a new vesion / bug fixes the dependencies in this file will update when you run the npm update cmd.  This updates everything in the node_modules folder with any new features. It will also update the _settings.scss file in case there are some new items that require new classes.  (this is why I said to make a copy of your src folder).  In some instances, I've customized items in the node_modules folder as well. If that's the case you will need to manually add those customization's back. 
I also like to head on over to the change log (I know this can be daunting - but once you take a moment to digest it - it's pretty easy to see what lines of code have changed). I use this while looking at the _settings.scss file. When new features come out, I copy the new lines of code into my original _settings.scss file. (Note you could do this vice versa as well - just depends on which one has more changes). For example if you've made lots of edits to your settings file, it will probably be easier for you to copy any new features into your existing _settings.scss file. 
If you choose not to make a copy of your src folder - all items like pages, images should remain in tact. I'm just overly cautious. 
 
 
 

You commented on zegg's post about 1 month

 
This should help you achieve the effect you're looking for. Keep in mind, if you nest a wrapper, within a wrapper (which I don't recommend doing) you wall have a border on your inner most elements as well. So you would need to create a different class on the inner most wrapper and target the new class and set the border (or any other styles that are cascading downwards) to 0px. 
<style>
// notice that .wrapper-inner is a class that you have access
// to so you can incorporate styles on elements inside the .wrapper class
// inky adds the markup during Foundation Watch cmds or Foundation Build cmds

.nike-border .wrapper-inner{
border:1px solid #212131;
padding:0px;
}
</style>

<row>
<columns>
<center>
<a href="http://nike.com"&gt;VOIR EN FRANÇAIS</a>
</center>
</columns>
</row>
<wrapper class="nike-border">
<row>
<columns>
Add all content you want to have a border here.
</columns>
</row>
</wrapper>

Posts Followed

Following

Followers