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 11 months ago


My Comments

Corey Schaaf commented on kevin neal's post 2 days

So you have an image on the left and an image on the right that exist in their own cells and the content in the middle is separate? 
If that's the case - you CAN accomplish what you're asking for using background images. 
You just have to specify the position. 
 
i would do this like so: 
.left-image{
background:url(http://placehold.it/500x200) no-repeat right top;
}

.right-image{
background:url(http://placehold.it/500x200) no-repeat left top;
}
<div class="large-3 columns left-image"><!-- you may have to put a non-breaking space in here --></div>
<div class="large-6 columns"></div>
<div class="large-3 columns right-image"><!-- you may have to put a non-breaking space in here --></div>
 

Corey Schaaf commented on skube's post 2 days

This may be a result of not having the height and width attributes of the image explicitly called out on the img tag.  Have you tried adding the height and width to the image? 
<container>
<row class="collapse">
<columns>
<img src="http://placehold.it/580x50/663399" height="50" width="580">
</columns>
</row>
</container>

Corey Schaaf commented on Wally Glenn's post 2 days

FYI - sometimes background as style is not honored in Outlook clients.  
bgcolor="" on the table, tr or td is the most bullet proof way of adding background colors.  However - that would mean you would not be able to control the bgcolor via styles and media queries.  Just wanted to make sure you were aware of that in some instances of outlook. 

Corey Schaaf commented on Clint Avalos's post 2 days

Clint - offsets might work depending on what you're trying to do.  You can read about them here. They work well when you have columns that don't add up to twelve. Might be worth investigating. 
 http://foundation.zurb.com/emails/docs/grid.html#offsets

Corey Schaaf commented on Sergiu Goman's post 10 days

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

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

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

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

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

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. 
 

Posts Followed





  • 1
    Reply
  • Equalizer not working on resize

    By Sergiu Goman

    Equalizer

    Hello.&nbsp; I have a problem with the foundation equalizer. It works&nbsp;perfectly on page load, but wouldn't work when I resize the browser. Does anyone&nbsp;know how to solve this problem ? &nbsp; my markup is something like this: &lt;div class="... (continued)

    Last Reply by Corey Schaaf 10 days ago



  • 2
    Replies
  • Automate emails from a template

    By Niall

    automate

    I've got a number of emails that I want to put different data into. At the moment, I'm generating the email with placeholder text and then replacing them with my node app before I send them. I was wondering if anyone had any ideas for how I should go ab... (continued)

    Last Reply by Niall 11 days ago



  • 2
    Replies
  • Max-Width for Emails

    By Zachary Moore

    Responsive

    Hello, I'm trying to change the max-width for my template, but it doesn't seem to be working correctly. When I change the global_width variable in settings.scss, it seems to work correctly in the preview, but as an actual email it is no longer responsive... (continued)

    Last Reply by Corey Schaaf 11 days ago


  • 4
    Replies
  • Cross Browser Grid Errors

    By Israel Evans

    grid

    Hello! I'm going through the zurb masterclass and found that the zurb grid system doesn't seem to work in anything but Chrome (and Opera, which is basically now chrome). &nbsp; &nbsp; After seeing this sample code from the engine, I ran some basic g... (continued)

    Last Reply by Corey Schaaf 11 days ago


Following

Followers

My Posts



My Comments

You commented on kevin neal's post 2 days

So you have an image on the left and an image on the right that exist in their own cells and the content in the middle is separate? 
If that's the case - you CAN accomplish what you're asking for using background images. 
You just have to specify the position. 
 
i would do this like so: 
.left-image{
background:url(http://placehold.it/500x200) no-repeat right top;
}

.right-image{
background:url(http://placehold.it/500x200) no-repeat left top;
}
<div class="large-3 columns left-image"><!-- you may have to put a non-breaking space in here --></div>
<div class="large-6 columns"></div>
<div class="large-3 columns right-image"><!-- you may have to put a non-breaking space in here --></div>
 

You commented on skube's post 2 days

This may be a result of not having the height and width attributes of the image explicitly called out on the img tag.  Have you tried adding the height and width to the image? 
<container>
<row class="collapse">
<columns>
<img src="http://placehold.it/580x50/663399" height="50" width="580">
</columns>
</row>
</container>

You commented on Wally Glenn's post 2 days

FYI - sometimes background as style is not honored in Outlook clients.  
bgcolor="" on the table, tr or td is the most bullet proof way of adding background colors.  However - that would mean you would not be able to control the bgcolor via styles and media queries.  Just wanted to make sure you were aware of that in some instances of outlook. 

You commented on Clint Avalos's post 2 days

Clint - offsets might work depending on what you're trying to do.  You can read about them here. They work well when you have columns that don't add up to twelve. Might be worth investigating. 
 http://foundation.zurb.com/emails/docs/grid.html#offsets

You commented on Sergiu Goman's post 10 days

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

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

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

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

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

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. 
 

Posts Followed








Following

Followers