Menu icon Foundation

Designer | Hamburg

My Posts




My Comments

Ede Oldi commented on Jim Welch's post over 2 years

I'd use the <callout> component with some custom CSS to adjust the margins and paddings, like so:
<container>
<row>
<columns large="4">
/* nothing here/
</columns>
<columns large="4">
<callout class="month">
<p class="text-center">JAN</p>
</callout>
<callout class="day">
<h1 class="text-center">12</h1>
</callout>
</columns>
<columns large="4">
/
nothing here*/
</columns>
</row>
</container>
Define background-colors for .month and .day, and you're ready to go.
Let me know if this works!

Ede Oldi commented on Matt Brown's post about 3 years

Have you tried to use:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can use any "normal" HTML markup in combination with Inky.
<container>
<row>
<columns>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</columns>
</row>
</container>

Ede Oldi commented on zacbrown@me.com's post about 3 years

 I'd like an invite as well :-)

Ede Oldi commented on Michael Machado's post about 3 years

Michael, one (manual) way to update your version of FFE is:

download the ZIP from https://github.com/zurb/foundation-emails & extract
delete all of the contents from {root}/node_modules/foundation-emails
move the contents of the unzipped folder to your {root}/node_modules/foundation-emails
(re-)run "npm start" -> voila!

Ede Oldi commented on zacbrown@me.com's post over 3 years

@Corey: I believe he is referring to the HTML tags/markup:
<table dir="rtl">
<tr>
<td width="50%" dir="ltr">1st column (left)</td>
<td width="50%" dir="ltr">2nd column (right)</td>
</tr>
</table>
These allow you to reverse the stacking direction of your columns. In mobile view, the second (right) column would be on top, while the first (left) would follow.
@zrb: Have you tried to change the compiled HTML markup (after "foundation build") and including the dir="rtl" tags there? Should work for all I know, however I've always found this technique somewhat squishy and unpredictable with respect to email-client support.

Ede Oldi commented on Michael Machado's post over 3 years

Hi Michael,
I have not yet encountered this issue. Maybe you could post the relevant code for us to check?
Please post:

Inky/HTML markup
SCSS files (app.scss, _content.scss, _settings.scss)

Ede Oldi commented on Max Monastyrev's post over 3 years

@Max: I encountered the same problem and found a solution here:
https://github.com/zurb/foundation-emails/issues/394
The trick is to edit your compiled code (i.e. the code you pasted above) and add align="center" to the <table class="container">. Using your code as an example:
<table class="wrapper header float-center blue-bar" align="center">
<tr>
<td class="wrapper-inner">
<table class="container" align="center">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-12 large-12 columns first last blue-bar">
<table>
<tr>
<th> <p class="text-center header"><a href="#">View in Browser</a></p> </th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Not the most elegant fix, but at least a fix. :-)

Ede Oldi commented on Ede Oldi's post over 3 years

Corey, thanks for the confirmation and thanks again for your help.
Someone give this guy a cookie! :-)

Ede Oldi commented on Ede Oldi's post over 3 years

Thank you, @Corey for your help. From your post I gather that you've been trying to update the devDependencies (i.e. Inky) to a new version, correct?
My problem is specifically related to the foundation-emails dependency. I tried to change the package.json:
"dependencies": {
"foundation-emails": "2.1.0"
}

to

"dependencies": {
"foundation-emails": "master"
}
which unfortunately only resulted in an error when running "npm update".
For the time being I managed to solve the issue by replacing the contents of
{project}/node_modules/foundation-emails
with the contents of the .zip file of the latest commit from github.
However, if anyone has had a similar problem and know a more seamless solution, I am all ears! :-)

Posts Followed




  • 3
    Replies
  • Push, pull in email

    By Hew Ingram

    emailmobile

    I had a good hunt around the forum and couldn't find anything.&nbsp; I like, in email, to have rows with images and text, alternating image from right to left as below. It looks great on desktop but on mobile it ends up as image, text, text, image. Is th... (continued)

    Last Reply by Kabir 10 months ago


  • 3
    Replies
  • Images not updating

    By Michael Machado

    broken images

    I'm sure this is due to something I'm doing incorrectly but when I add a new image into the img folder on Foundation for Emails 2 SASS version and then place the image into the email code, when the browsersync updates the image shows as a broken graphic u... (continued)

    Last Reply by Ede Oldi about 3 years ago



  • 11
    Replies
  • Change color in style

    By Michael Machado

    color tag

    I'm new to FFE 2 and SASS&nbsp;so I apologize for the basic question but I can't seem to find much help in the docs. I am trying to do a simple text color change on a subhead of my email. I have a separate _content.scss file that is being imported last to... (continued)

    Last Reply by Michael Machado over 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Jim Welch's post over 2 years

I'd use the <callout> component with some custom CSS to adjust the margins and paddings, like so:
<container>
<row>
<columns large="4">
/* nothing here/
</columns>
<columns large="4">
<callout class="month">
<p class="text-center">JAN</p>
</callout>
<callout class="day">
<h1 class="text-center">12</h1>
</callout>
</columns>
<columns large="4">
/
nothing here*/
</columns>
</row>
</container>
Define background-colors for .month and .day, and you're ready to go.
Let me know if this works!

You commented on Matt Brown's post about 3 years

Have you tried to use:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
You can use any "normal" HTML markup in combination with Inky.
<container>
<row>
<columns>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</columns>
</row>
</container>

You commented on zacbrown@me.com's post about 3 years

 I'd like an invite as well :-)

You commented on Michael Machado's post about 3 years

Michael, one (manual) way to update your version of FFE is:

download the ZIP from https://github.com/zurb/foundation-emails & extract
delete all of the contents from {root}/node_modules/foundation-emails
move the contents of the unzipped folder to your {root}/node_modules/foundation-emails
(re-)run "npm start" -> voila!

You commented on zacbrown@me.com's post over 3 years

@Corey: I believe he is referring to the HTML tags/markup:
<table dir="rtl">
<tr>
<td width="50%" dir="ltr">1st column (left)</td>
<td width="50%" dir="ltr">2nd column (right)</td>
</tr>
</table>
These allow you to reverse the stacking direction of your columns. In mobile view, the second (right) column would be on top, while the first (left) would follow.
@zrb: Have you tried to change the compiled HTML markup (after "foundation build") and including the dir="rtl" tags there? Should work for all I know, however I've always found this technique somewhat squishy and unpredictable with respect to email-client support.

You commented on Michael Machado's post over 3 years

Hi Michael,
I have not yet encountered this issue. Maybe you could post the relevant code for us to check?
Please post:

Inky/HTML markup
SCSS files (app.scss, _content.scss, _settings.scss)

You commented on Max Monastyrev's post over 3 years

@Max: I encountered the same problem and found a solution here:
https://github.com/zurb/foundation-emails/issues/394
The trick is to edit your compiled code (i.e. the code you pasted above) and add align="center" to the <table class="container">. Using your code as an example:
<table class="wrapper header float-center blue-bar" align="center">
<tr>
<td class="wrapper-inner">
<table class="container" align="center">
<tbody>
<tr>
<td>
<table class="row collapse">
<tbody>
<tr>
<th class="small-12 large-12 columns first last blue-bar">
<table>
<tr>
<th> <p class="text-center header"><a href="#">View in Browser</a></p> </th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
Not the most elegant fix, but at least a fix. :-)

You commented on Ede Oldi's post over 3 years

Corey, thanks for the confirmation and thanks again for your help.
Someone give this guy a cookie! :-)

You commented on Ede Oldi's post over 3 years

Thank you, @Corey for your help. From your post I gather that you've been trying to update the devDependencies (i.e. Inky) to a new version, correct?
My problem is specifically related to the foundation-emails dependency. I tried to change the package.json:
"dependencies": {
"foundation-emails": "2.1.0"
}

to

"dependencies": {
"foundation-emails": "master"
}
which unfortunately only resulted in an error when running "npm update".
For the time being I managed to solve the issue by replacing the contents of
{project}/node_modules/foundation-emails
with the contents of the .zip file of the latest commit from github.
However, if anyone has had a similar problem and know a more seamless solution, I am all ears! :-)

Posts Followed

Following

  • No Content

Followers

  • No Content