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



  • 2
    Replies
  • Bug with Accordion Semantic Markup

    By Corey Schaaf

    I have been trying to create my own custom classes for an accordion menu but have been unable to get the javascript to fire based on the example found on this page: http://foundation.zurb.com/docs/components/accordion.html However, when I tried... (continued)

    Last Reply by Rafi Benkual over 4 years ago


My Comments

Corey Schaaf commented on Sergiu Goman's post over 2 years

Hey Sergi - this should get you pointed in the right direction. 
http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins
Previous versions of foundation used "reflow" in the javascript. That has been replace with reInit. Directions on how to use it are in the link above. 
Hope you find this helpful. 

Corey Schaaf commented on Izzy's post over 2 years

Izzy - I'll address the image problem first.  
If you are using images that are larger than the container they are setting inside of the padding issue may not be padding at all.  It may be the image scaling down to whatever proportions the container it's sitting inside of are. If you have images that are larger than the containers they are sitting inside of - make sure you include the height="" and width="" inside the img tag.  Note that you need to use the height="" width="" attributes and not style="height:XX; width:XX;" for this to work.  
I have a few other questions before I can answer your first question. When you use foundation watch vs foundation build there are two things that are different. Foundation watch is setting up a local view of you file and keeping folder structure intact which is why you should still be able to see a css folder and such.  If you open the index.html file in the dist folder you'll also notice that it's not minified. 
However if you run a foundation build, this creates a production ready file for you to top into your ESP (email service provider).  It should be inlined and your images should be optimized. 
If that is not happening - are you getting any errors during your build in cmd line? 

Corey Schaaf commented on Niall's post over 2 years

Are you trying to use a json or yml file for data? Just trying to understand the extent of variable data from email to email. 

Corey Schaaf commented on Adam's post over 2 years

can you post your syntax and an example of what you want to happen, vs what is happening. I've run into this before and what I normally do is create a class of 
.no-padding-lr{padding-left:0; padding-right:0;}
and then my ink markup looks like this: 
<row class="no-padding-lr">
<columns small="12">
<row>
<columns small="6"></columns>
<columns small="6"></columns>
<columns>
</row>
This means I can effectively remove padding from the top level row and not have it cascade down to all the other rows. The only time I use collapse is on the inner most elements (because of what you specified above). 

Corey Schaaf commented on Zachary Moore's post over 2 years

Post your Inky markup.  My guess is that you are using really large images without putting the height="" and width="" attributes on the image.  

Corey Schaaf commented on Israel Evans's post over 2 years

Israel Evans,
My guess is that code from the MasterClass may not be taking advantage of the the correct version of Foundation For Emails 2.2.1. I took the masterclass as well and I know there have been releases since I participated in Master Class. The course material may need to be updated to reflect the changes in the new versions.  
They usually stay on top of that pretty well.  I could be completely wrong and it could be something else. I started a new project and dropped some of my html in and everything seemed to be working fine for all those browsers. 
 

Corey Schaaf commented on Abraham's post over 2 years

You can try something like this: 
@media only screen and (max-width: #{$global-breakpoint}) {
font-size: 19px;
}
 

Corey Schaaf commented on Wally Glenn's post over 2 years

@rafi he's saying he's already tried that above ... I'd be interested to know how to handle this as well because I have a issue with the inliner doing the same thing ... similar to a bug that is open in git about this. https://github.com/zurb/foundation-emails/issues/532
 
and a bug I opened about this as well ... 
https://github.com/zurb/foundation-emails/issues/417

Corey Schaaf commented on Adam Sherman's post over 2 years

Adam, 
If you want something to be a full row it depends on the structure of how you setup your html. For example, the following will give me a full row. But the purpose of using this is when you need to use a row on a container. This will not give you 100% of the browser window if that's what your looking for. 
<div class="column row">
Row column
</div>
If your html syntax looks like this where you have nesting and you're trying to achieve a full with row that spands the entire width of your device / screen - this ALSO WILL NOT WORK. 
<div class="row">
<div class="small-12 column">
<div class="column row">
Row column
</div>
</div>
</div>

The reason for this is the column row now sits inside a container that is contained within the boundries of the $global-width variable in the _settings.scss file.  By default, I believe it's set to 1200px. 
I believe this is also true when you try to use:
<div class="expanded row">
</div>
All that happens when adding expanded is that it removes the $global-width variable from a pixesl to be a percentage of the container it's sitting inside of. Again, rows by default are 1200px wide (unless the variable is changed in settings). You could also post your markup and that could help troubleshoot as well. The following as a top level container will give me a full with row from the left of my screen to the right of my screen. 
<div class="row expanded columns">
Row Column
</div>

Corey Schaaf commented on Corey Schaaf's post over 2 years

Hey Kim, Since this was an older post, it's not relative for Gmail anymore.  Gmail now supports media queries which accounts (as I write this) for about 30% of mobile email traffic. Foundation has updated their framework, so depending on the version you are using, some of the steps above might be out of date.  Which version of Foundation for Emails do you have installed?  Let's start there first. 

Posts Followed


  • 1
    Reply
  • Handling dynamic images in templates

    By GURU PRASAD

    email

    Hi All, &nbsp; I am new to this forum. I am developing email template , in which user will dynamically add the images from application. As user adding the images it may be in one column or two column content. But when email triggered it will get distor... (continued)

    Last Reply by Corey Schaaf almost 3 years ago


  • 2
    Replies
  • Tennis Spam

    By Julian Warren

    spamtennis

    I was looking forward, in vain, to reading the replies to my two recent posts:&nbsp;"Spacers in Outlook and Rows" &nbsp;and &nbsp;"Spacers = Outlook Trouble" Sadly, the replies were from a spammer inviting me to view the Australian Tennis on some, presum... (continued)

    Last Reply by Corey Schaaf almost 3 years ago






  • 8
    Replies
  • Email: Reduce padding for mobile?

    By Bryan

    emailpaddinggutter

    I'm finding that I get a massive amount of padding in my mobile email layouts, and it's destroying the column structure &mdash; to the extent that, though my columns for "small" add up to 12, two side-by-side columns still end up getting stacked. Only whe... (continued)

    Last Reply by Bryan almost 3 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Sergiu Goman's post over 2 years

Hey Sergi - this should get you pointed in the right direction. 
http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins
Previous versions of foundation used "reflow" in the javascript. That has been replace with reInit. Directions on how to use it are in the link above. 
Hope you find this helpful. 

You commented on Izzy's post over 2 years

Izzy - I'll address the image problem first.  
If you are using images that are larger than the container they are setting inside of the padding issue may not be padding at all.  It may be the image scaling down to whatever proportions the container it's sitting inside of are. If you have images that are larger than the containers they are sitting inside of - make sure you include the height="" and width="" inside the img tag.  Note that you need to use the height="" width="" attributes and not style="height:XX; width:XX;" for this to work.  
I have a few other questions before I can answer your first question. When you use foundation watch vs foundation build there are two things that are different. Foundation watch is setting up a local view of you file and keeping folder structure intact which is why you should still be able to see a css folder and such.  If you open the index.html file in the dist folder you'll also notice that it's not minified. 
However if you run a foundation build, this creates a production ready file for you to top into your ESP (email service provider).  It should be inlined and your images should be optimized. 
If that is not happening - are you getting any errors during your build in cmd line? 

You commented on Niall's post over 2 years

Are you trying to use a json or yml file for data? Just trying to understand the extent of variable data from email to email. 

You commented on Adam's post over 2 years

can you post your syntax and an example of what you want to happen, vs what is happening. I've run into this before and what I normally do is create a class of 
.no-padding-lr{padding-left:0; padding-right:0;}
and then my ink markup looks like this: 
<row class="no-padding-lr">
<columns small="12">
<row>
<columns small="6"></columns>
<columns small="6"></columns>
<columns>
</row>
This means I can effectively remove padding from the top level row and not have it cascade down to all the other rows. The only time I use collapse is on the inner most elements (because of what you specified above). 

You commented on Zachary Moore's post over 2 years

Post your Inky markup.  My guess is that you are using really large images without putting the height="" and width="" attributes on the image.  

You commented on Israel Evans's post over 2 years

Israel Evans,
My guess is that code from the MasterClass may not be taking advantage of the the correct version of Foundation For Emails 2.2.1. I took the masterclass as well and I know there have been releases since I participated in Master Class. The course material may need to be updated to reflect the changes in the new versions.  
They usually stay on top of that pretty well.  I could be completely wrong and it could be something else. I started a new project and dropped some of my html in and everything seemed to be working fine for all those browsers. 
 

You commented on Abraham's post over 2 years

You can try something like this: 
@media only screen and (max-width: #{$global-breakpoint}) {
font-size: 19px;
}
 

You commented on Wally Glenn's post over 2 years

@rafi he's saying he's already tried that above ... I'd be interested to know how to handle this as well because I have a issue with the inliner doing the same thing ... similar to a bug that is open in git about this. https://github.com/zurb/foundation-emails/issues/532
 
and a bug I opened about this as well ... 
https://github.com/zurb/foundation-emails/issues/417

You commented on Adam Sherman's post over 2 years

Adam, 
If you want something to be a full row it depends on the structure of how you setup your html. For example, the following will give me a full row. But the purpose of using this is when you need to use a row on a container. This will not give you 100% of the browser window if that's what your looking for. 
<div class="column row">
Row column
</div>
If your html syntax looks like this where you have nesting and you're trying to achieve a full with row that spands the entire width of your device / screen - this ALSO WILL NOT WORK. 
<div class="row">
<div class="small-12 column">
<div class="column row">
Row column
</div>
</div>
</div>

The reason for this is the column row now sits inside a container that is contained within the boundries of the $global-width variable in the _settings.scss file.  By default, I believe it's set to 1200px. 
I believe this is also true when you try to use:
<div class="expanded row">
</div>
All that happens when adding expanded is that it removes the $global-width variable from a pixesl to be a percentage of the container it's sitting inside of. Again, rows by default are 1200px wide (unless the variable is changed in settings). You could also post your markup and that could help troubleshoot as well. The following as a top level container will give me a full with row from the left of my screen to the right of my screen. 
<div class="row expanded columns">
Row Column
</div>

You commented on Corey Schaaf's post over 2 years

Hey Kim, Since this was an older post, it's not relative for Gmail anymore.  Gmail now supports media queries which accounts (as I write this) for about 30% of mobile email traffic. Foundation has updated their framework, so depending on the version you are using, some of the steps above might be out of date.  Which version of Foundation for Emails do you have installed?  Let's start there first. 

Posts Followed

Following

  • No Content

Followers

  • No Content