Menu icon Foundation

Coder | Scottsdale, AZ

HTML email developer for 10 year. Recently discovered Foundation for Email.

My Posts





  • NEW
  • Change Location of Browser Sync

    By Brad Shomer

    browsersyncdist

    I need to change the location of my DIST files in Foundation for Email. I've figured out how to get Foundation to compile the files in the correct location, but I can't figure out how to get BrowserSync to pick up on the new location. In the gulpfile.babe... (continued)




My Comments

Brad Shomer commented on Aisling McCagh's post 7 days

You can try adding a style to the wrapper tag and define your padding there. Because the style tag is inline, it should override styles from the style sheet. 
<wrapper style="padding:0 0 0 0;">

Brad Shomer commented on Nirtz's post 13 days

We were able to add a preheader above the table in the layouts file
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{{subject}}</title>
</head>
<body>
<!-- <style> -->
<span class="preheader">{{preheader}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}}
{{> grey-spacer-20}}
{{> body}}
{{> waw-footer}}
</center>
</td>
</tr>
</table>
<br />

&lt;!-- prevent Gmail on iOS font size manipulation --&gt;

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</body>
</html>

Brad Shomer commented on Giorgio's post 13 days

Check the _overrides.scss file in the /src/assets/scss directory. There should be a class that controls the hyphenation. 
 
// Hyphens
* {
hyphens:none;
-webkit-hyphens: none;
}

Brad Shomer commented on Steffen's post 13 days

I've been unable to use conditional statements in the front matter. You might be able to put the {{if}} {{else}} around the preheader in the body of the email and use a JSON or YML file to feed your preheader into the conditional statement.

Brad Shomer commented on Brad Shomer's post 3 months

I discovered that the data is getting pulled into the dist file, but it wasn't showing in Browser Sync. Turned out to be a problem with MS Edge. I set Firefox as my default browser and it works!
Thanks for your help.

Brad Shomer commented on Brad Shomer's post 3 months

Thanks Rafi,
The only thing I found in the gulp file is this:
// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
return gulp.src('src/pages//*.html')
.pipe(newer('dist'))
.pipe(newer('src/partials/
/*.html'))
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
data: 'src/data', // Added the ability to use data
helpers: 'src/helpers'
}))
.pipe(inky())
.pipe(gulp.dest('dist'));
}
I added the line "data: 'src/data', and ran "foundation build" in the command line. Doesn't seem to be picking up my yml file.

Brad Shomer commented on Brad Shomer's post 8 months

Thanks. This is great. I think my IT dept has prevented me from running the update. I'll have to get permission to do it.
It looks like the documentation on the GitHub is out of date if 2.2.5 is the latest version. GitHub is saying 2.2.1 is the latest, but but that page hasn't been updated since June of 2016.

Brad Shomer commented on Brad Shomer's post 8 months

Thanks for the link. I book marked it. According the the site, version 2.2.1 is the latest version. My CSS file doesn't seem to indicate what version of Foundation I am on. It has references to which version of ruby which seems to 2.2.0. If I type "foundation -v" into the Node.js Command Prompt, I see that I am running 2.2.3. Is it possible the release notes aren't up-to-date?

Brad Shomer commented on Arik's post 9 months

I wasn't able to take the code straight out of the Bullet Proof tool, but I was able to modify it to work with Foundation for Email. Here is what I did:
<container>
<row class="collapse">
<columns small="12" large="12" background="https://www.worldatwork.org/email/assets/img/tr/tr18-background-masthead.jpg" bgcolor="#ffffff" valign="bottom" style="background-repeat:no-repeat;">

    &lt;!--[if gte mso 9]&gt;
    &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:230px"&gt;
    &lt;v:fill type="frame" src="https://www.worldatwork.org/email/assets/img/tr/tr18-background-masthead.jpg" color="#ffffff" /&gt;
    &lt;v:textbox inset="0,0,0,0"&gt;
    &lt;![endif]--&gt;

    &lt;row&gt;
      &lt;columns small="12" large="12" valign="top"&gt;

        Lorem ipsum dolor sit amet, assum graeci argumentum vel at. Modo splendide quo an, alienum voluptatum cu cum. Corpora complectitur ius eu. Elit vocibus corrumpit eu nec. An duo exerci dolores.

      &lt;/columns&gt;
    &lt;/row&gt;

  &lt;!--[if gte mso 9]&gt;
  &lt;/v:textbox&gt;
  &lt;/v:rect&gt;
  &lt;![endif]--&gt;


&lt;/columns&gt;

</row>
</container>
You'll need to adjust some of the variables to make it work for the image and email layout that you are developing. Hope this helps.

Brad Shomer commented on Henrique Zambonin's post 10 months

We tried pretty much everything that's been suggested here, but eventually found a fairly low-tech workaround. I know the font instructions are normally placed in the <style> tag in the header. We found that the fonts work if you place a <style> tag in the body of your email just below the front matter. Then inline the font on the tags you want them applied to. Here is what it looks like in our source file. Note that you need the "!important" tag 
---
layout: editorial-workspan-weekly


<style>
@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Fira+Sans|Signika');
.workspan-headline {font-family: 'Fira Sans', Helvetica !important}
.workspan-tagline {font-family: 'Fira Sans', Verdana !important}
.category-head {font-family: 'Signika', Verdana, sans-serif !important}
.workspan-body {font-family: 'Bree Serif', Helvetica !important}

</style>

<container>
<row>
<columns small="12" large="12">

  &lt;p style="font-family: 'Fira Sans', Helvetica !important"&gt;No meis velit integre has. Veniam dicunt invidunt eam ad, vel utinam malorum qualisque et. Convenire partiendo scriptorem vix ut. Discere prodesset eam id, vix at vide choro delectus. Mel eu partiendo gubergren splendide, reque verterem ei vim.&lt;/p&gt;    

&lt;/columns&gt;

</row>
</container>
 
 
This seems to work for the email clients you would expect. It definitely has some drawbacks though. The fact that the styles need to be inlined defeats the purpose of Foundation for Email. I hope Zurb finds a way to make this easier.
 
 
 
 
 

Posts Followed



  • 1
    Reply
  • Hyphenation issue

    By Giorgio

    Hyphenation

    Hi everyone, let see if you can help. I've got the&nbsp;Hyphenation issue.&nbsp;Right now foundation is set on "auto". Instead I need&nbsp;Hyphenation to be "none". The easy solution, also found here (Git) is to simply add&nbsp; td { word-break: keep-... (continued)

    Last Reply by Brad Shomer 13 days ago


  • 2
    Replies
  • If-else in preheader

    By Steffen

    email preheader if-else panini

    Hi I'm currently facing a problem with the preHeader in Foundation Email. At the moment we have something like this defined --- layout: default_transactional type: single preheader: More info regarding the maintenance license --- Is there a way to ... (continued)

    Last Reply by Madona 9 days ago


  • 13
    Replies
  • Working with git and other computers

    By Philipp

    git

    Hi, &nbsp; how can I work with Foundations of Emails on different computers? I am using GIT to manage my source code. I haven't touched the .gitignore file which comes with Foundations of Emails and uploaded everything else to my repository. On my lap... (continued)

    Last Reply by lukenlow lukenlow 15 days ago


  • 9
    Replies
  • Can I add CSS to Yaml?

    By Dave Hust

    YAMLcss

    Instead of "Maybe try using 'prompt()' in assignment, I would rather use bold instead of ''. So it would be "Maybe try using prompt(). Is that possible? examples: - video: nr4Gb5OZYvI title: If size: 310 theme: 29966 link: dRa... (continued)

    Last Reply by Jene Alice 26 days ago



  • 1
    Reply
  • Responsive issue

    By Nik Sol

    Responsive

    Hi, I am trying to achieve a responsive email block that has 3 columns. Each column consisting of&nbsp;image, title and paragraph stacked on each other. When on mobile I want each column to be stacked on each other and the contents reordered with image t... (continued)

    Last Reply by cs joshi 3 months ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Aisling McCagh's post 7 days

You can try adding a style to the wrapper tag and define your padding there. Because the style tag is inline, it should override styles from the style sheet. 
<wrapper style="padding:0 0 0 0;">

You commented on Nirtz's post 13 days

We were able to add a preheader above the table in the layouts file
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/app.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>{{subject}}</title>
</head>
<body>
<!-- <style> -->
<span class="preheader">{{preheader}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened emails are created. --}}
{{> grey-spacer-20}}
{{> body}}
{{> waw-footer}}
</center>
</td>
</tr>
</table>
<br />

&lt;!-- prevent Gmail on iOS font size manipulation --&gt;

<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
</body>
</html>

You commented on Giorgio's post 13 days

Check the _overrides.scss file in the /src/assets/scss directory. There should be a class that controls the hyphenation. 
 
// Hyphens
* {
hyphens:none;
-webkit-hyphens: none;
}

You commented on Steffen's post 13 days

I've been unable to use conditional statements in the front matter. You might be able to put the {{if}} {{else}} around the preheader in the body of the email and use a JSON or YML file to feed your preheader into the conditional statement.

You commented on Brad Shomer's post 3 months

I discovered that the data is getting pulled into the dist file, but it wasn't showing in Browser Sync. Turned out to be a problem with MS Edge. I set Firefox as my default browser and it works!
Thanks for your help.

You commented on Brad Shomer's post 3 months

Thanks Rafi,
The only thing I found in the gulp file is this:
// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
return gulp.src('src/pages//*.html')
.pipe(newer('dist'))
.pipe(newer('src/partials/
/*.html'))
.pipe(panini({
root: 'src/pages',
layouts: 'src/layouts',
partials: 'src/partials',
data: 'src/data', // Added the ability to use data
helpers: 'src/helpers'
}))
.pipe(inky())
.pipe(gulp.dest('dist'));
}
I added the line "data: 'src/data', and ran "foundation build" in the command line. Doesn't seem to be picking up my yml file.

You commented on Brad Shomer's post 8 months

Thanks. This is great. I think my IT dept has prevented me from running the update. I'll have to get permission to do it.
It looks like the documentation on the GitHub is out of date if 2.2.5 is the latest version. GitHub is saying 2.2.1 is the latest, but but that page hasn't been updated since June of 2016.

You commented on Brad Shomer's post 8 months

Thanks for the link. I book marked it. According the the site, version 2.2.1 is the latest version. My CSS file doesn't seem to indicate what version of Foundation I am on. It has references to which version of ruby which seems to 2.2.0. If I type "foundation -v" into the Node.js Command Prompt, I see that I am running 2.2.3. Is it possible the release notes aren't up-to-date?

You commented on Arik's post 9 months

I wasn't able to take the code straight out of the Bullet Proof tool, but I was able to modify it to work with Foundation for Email. Here is what I did:
<container>
<row class="collapse">
<columns small="12" large="12" background="https://www.worldatwork.org/email/assets/img/tr/tr18-background-masthead.jpg" bgcolor="#ffffff" valign="bottom" style="background-repeat:no-repeat;">

    &lt;!--[if gte mso 9]&gt;
    &lt;v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px; height:230px"&gt;
    &lt;v:fill type="frame" src="https://www.worldatwork.org/email/assets/img/tr/tr18-background-masthead.jpg" color="#ffffff" /&gt;
    &lt;v:textbox inset="0,0,0,0"&gt;
    &lt;![endif]--&gt;

    &lt;row&gt;
      &lt;columns small="12" large="12" valign="top"&gt;

        Lorem ipsum dolor sit amet, assum graeci argumentum vel at. Modo splendide quo an, alienum voluptatum cu cum. Corpora complectitur ius eu. Elit vocibus corrumpit eu nec. An duo exerci dolores.

      &lt;/columns&gt;
    &lt;/row&gt;

  &lt;!--[if gte mso 9]&gt;
  &lt;/v:textbox&gt;
  &lt;/v:rect&gt;
  &lt;![endif]--&gt;


&lt;/columns&gt;

</row>
</container>
You'll need to adjust some of the variables to make it work for the image and email layout that you are developing. Hope this helps.

You commented on Henrique Zambonin's post 10 months

We tried pretty much everything that's been suggested here, but eventually found a fairly low-tech workaround. I know the font instructions are normally placed in the <style> tag in the header. We found that the fonts work if you place a <style> tag in the body of your email just below the front matter. Then inline the font on the tags you want them applied to. Here is what it looks like in our source file. Note that you need the "!important" tag 
---
layout: editorial-workspan-weekly


<style>
@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Fira+Sans|Signika');
.workspan-headline {font-family: 'Fira Sans', Helvetica !important}
.workspan-tagline {font-family: 'Fira Sans', Verdana !important}
.category-head {font-family: 'Signika', Verdana, sans-serif !important}
.workspan-body {font-family: 'Bree Serif', Helvetica !important}

</style>

<container>
<row>
<columns small="12" large="12">

  &lt;p style="font-family: 'Fira Sans', Helvetica !important"&gt;No meis velit integre has. Veniam dicunt invidunt eam ad, vel utinam malorum qualisque et. Convenire partiendo scriptorem vix ut. Discere prodesset eam id, vix at vide choro delectus. Mel eu partiendo gubergren splendide, reque verterem ei vim.&lt;/p&gt;    

&lt;/columns&gt;

</row>
</container>
 
 
This seems to work for the email clients you would expect. It definitely has some drawbacks though. The fact that the styles need to be inlined defeats the purpose of Foundation for Email. I hope Zurb finds a way to make this easier.
 
 
 
 
 

Posts Followed

Following

  • No Content

Followers