Menu icon Foundation

Developer | Sligo, Ireland

Software Engineer, working for Groupmail Ltd.

My Posts





My Comments

Derek McDermott commented on Derek McDermott's post about 1 year

Thank you Corey,
That's good to know. I can stop trying to get it to work now!
Derek

Derek McDermott commented on Rowan Cairns's post about 1 year

Hi Corey,
I guess that's good news then if there's a prospect that an update will fix all those issues we're having.
Thanks for responding.
Derek

Derek McDermott commented on Derek McDermott's post about 1 year

Hi Corey,
Currently I'm testing those on the desktop version of Outlook 2016 however, undoubtedly I shall also have to make my email templates render correctly on Outlook.com the website too, so it would be nice to know if they can be responsive there as well.
But my first priority at the moment is trying to see if they're supposed to render responsively on the Desktop version.
Thanks!
Derek

Derek McDermott commented on Rowan Cairns's post about 1 year

Hi Madison,I'm having similar issues to you and posted about it here:-
http://foundation.zurb.com/forum/posts/45355-zurb-sample-email-templates-responsive-in-outlook
To date though, I haven't received any response regarding this. It's a simple query and I've given sample code that Zurb can test on their side and let us know.
I suspect the reason they don't respond is because it's bad news, that their sample templates aren't responsive in Outlook.
I guess they only want positive responses showing on their forum!
Derek

Derek McDermott commented on Joel Smith's post over 1 year

All of your SCSS/Sass definitions (which can include sass variables and your custom CSS which may use those variables) are compiled into a single CSS file which you will find in the "dist/css/app.css" location.
You shouldn't modify that 'dist/css/app.css' file though because when you build the system again by running 'foundation build' it will delete that dist folder and output an updated app.css file each time, so you will lose whatever changes you make there.
Instead, you should put your own css into the SCSS files. I'm not sure what the best practice is here - I saw one poster recommending that your custom CSS should go into the 'src/assets/scss/app.scss' file.
If you don't like doing that, you can add your own scss file to the build by creating a new '_custom.scss' file (note the leading underscore) and storing it in 'src/assets/scss' and then in your existing app.scss file include the following line after all the other imports:-
@import 'custom';
This links your _custom.scss into the build and any styles you create in custom will be output in the "dist/css/app.css" file after building. You can add as many of your own .scss files as you want like this.
Alternatively, if you're just using css only and not sass, you can add your own style blocks at the top of the pages (e.g. see the sidebar-hero.html template as an example) and these style blocks will be incorporated by the inliner into your html body during the build.
 
Regarding the default definitions, the foundation CSS definitions are included here as part of the foundation_emails module:-/your-foundation-emails-project-name-here/node_modules/foundation-emails/scss
I don't think it's advisable to change them there though because if you ever update the framework you will lose your changes. If you need to customise things, I think they recommend that you either change the values in the _settings.scss (which they never overwrite during an update supposedly!) or else you override the css/scss definitions within your own .scss file.
Derek

Derek McDermott commented on Brian Tan's post over 1 year

Hi Brian,
You may not need to run gulp, as the "gulp-inline-css" library itself uses the "inline-css" library which appears to be a basic javascript library that runs outside of gulp.
See here:-
https://github.com/jonkemp/inline-css
So if from PHP you can run javascript then you should be able to get that library running from there - you may need something like browserify perhaps to give you access to the npm library (which requires Commonjs) from the browser.
If you can't get this to work from php and you're on the server side you could always run it in Nodejs perhaps?
Derek

Derek McDermott commented on Brian Tan's post over 1 year

This is the Gulp script that the foundation build process uses for inlining it would appear: -
// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
var css = fs.readFileSync(css).toString();
var mqCss = siphon(css);

var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: false,
removeLinkTags: false
})
.pipe($.replace, '<!-- <style> -->', &lt;style&gt;${mqCss}&lt;/style&gt;)
.pipe($.htmlmin, {
collapseWhitespace: true,
minifyCSS: true
});

return pipe();
}
Looking at the node_modules in the project it would appear that it uses this inlining package:-
https://github.com/jonkemp/gulp-inline-css
I don't know PHP but presumably you can use that library?Hope this helps.
Derek

Derek McDermott commented on Joel Smith's post over 1 year

Basically I think you're missing the CSS definition. I think those SCSS variables that you create can only be referenced within your SCSS files, not from within your HTML files.Therefore, in an SCSS file, you would need to create a class definition that uses that $pink variable.
So, you could create a custom.scss file and import this in your app.scss and create a style there, or else add a new custom style directly into your app.scss file.
So for example, your app.scss file would look like this, assuming you want to change the ink colour and not the background colour: -
 
 
@import 'settings';

@import 'foundation-emails';

.my-colour {

color: $pink

}
So then your index.html code should look like this instead:-
<h1 class="my-colour">my heading text</h1>
I think that ought to work.
Derek

Derek McDermott commented on Derek McDermott's post over 1 year

No takers on this?
From what I can see, the zurb system is not responsive on Outlook (2016) based on the following test.
Here is my inky content on my responsive.html page:-
---

layout: default

<container>
<row>
<columns large="6" small="12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
</columns>
<columns large="6" small="12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores.</p>
</columns>
</row>
</container>

I'm just using this with the default layout. When I view this on Outlook 2016, it shows two columns side by side and doesn't go responsive when you decrease the width. However, except for Windows Mobile, it's responsive on all other email clients I've tested.
Is this by design? Are there any plans to make the system work responsively on Outlook? Are there any reliable/recommended hacks that we can implement to make this responsive?
Thanks!
 

Derek McDermott commented on Derek McDermott's post over 1 year

@Chris, I'd concur with Corey that it probably isn't any harm leaving that css link in the header place - it might even help compatibility across email clients for those that support it. It is a little confusing for anyone starting out though.
However, if you're intent on removing it, I came across this post which explains how to get the sass/gulp build process to remove it for you:-
http://foundation.zurb.com/forum/posts/42859-email-remains-linked-to-appcss-stylesheet
(You could also just set those attributes to true rather than removing them, if you want to more easily change them back later.)
Just do this at your own risk!

Posts Followed



  • 4
    Replies
  • adding new colors to _settings.scss

    By Joel Smith

    color

    I am trying to add my own colours to _settings.scss so I can customise my heading colour in Foundation for Emails. &nbsp; I have added the following code to _settings.scss: $pink: #ee2b53; &nbsp; and then withing index.html I have &lt;h1 class="pink... (continued)

    Last Reply by Joel Smith over 1 year ago


  • 4
    Replies
  • Search within framework

    By Bryan

    searchFeature

    It'd be fantastic if I could select a framework in the feed, and search within it. Right now, it looks like the search feature clears the framework selection and casts its net across all of them. As I'm focused right now on the email framework, those post... (continued)

    Last Reply by Jarryd Fillmore over 1 year ago



Following

    No Content

Followers

My Posts

My Comments

You commented on Derek McDermott's post about 1 year

Thank you Corey,
That's good to know. I can stop trying to get it to work now!
Derek

You commented on Rowan Cairns's post about 1 year

Hi Corey,
I guess that's good news then if there's a prospect that an update will fix all those issues we're having.
Thanks for responding.
Derek

You commented on Derek McDermott's post about 1 year

Hi Corey,
Currently I'm testing those on the desktop version of Outlook 2016 however, undoubtedly I shall also have to make my email templates render correctly on Outlook.com the website too, so it would be nice to know if they can be responsive there as well.
But my first priority at the moment is trying to see if they're supposed to render responsively on the Desktop version.
Thanks!
Derek

You commented on Rowan Cairns's post about 1 year

Hi Madison,I'm having similar issues to you and posted about it here:-
http://foundation.zurb.com/forum/posts/45355-zurb-sample-email-templates-responsive-in-outlook
To date though, I haven't received any response regarding this. It's a simple query and I've given sample code that Zurb can test on their side and let us know.
I suspect the reason they don't respond is because it's bad news, that their sample templates aren't responsive in Outlook.
I guess they only want positive responses showing on their forum!
Derek

You commented on Joel Smith's post over 1 year

All of your SCSS/Sass definitions (which can include sass variables and your custom CSS which may use those variables) are compiled into a single CSS file which you will find in the "dist/css/app.css" location.
You shouldn't modify that 'dist/css/app.css' file though because when you build the system again by running 'foundation build' it will delete that dist folder and output an updated app.css file each time, so you will lose whatever changes you make there.
Instead, you should put your own css into the SCSS files. I'm not sure what the best practice is here - I saw one poster recommending that your custom CSS should go into the 'src/assets/scss/app.scss' file.
If you don't like doing that, you can add your own scss file to the build by creating a new '_custom.scss' file (note the leading underscore) and storing it in 'src/assets/scss' and then in your existing app.scss file include the following line after all the other imports:-
@import 'custom';
This links your _custom.scss into the build and any styles you create in custom will be output in the "dist/css/app.css" file after building. You can add as many of your own .scss files as you want like this.
Alternatively, if you're just using css only and not sass, you can add your own style blocks at the top of the pages (e.g. see the sidebar-hero.html template as an example) and these style blocks will be incorporated by the inliner into your html body during the build.
 
Regarding the default definitions, the foundation CSS definitions are included here as part of the foundation_emails module:-/your-foundation-emails-project-name-here/node_modules/foundation-emails/scss
I don't think it's advisable to change them there though because if you ever update the framework you will lose your changes. If you need to customise things, I think they recommend that you either change the values in the _settings.scss (which they never overwrite during an update supposedly!) or else you override the css/scss definitions within your own .scss file.
Derek

You commented on Brian Tan's post over 1 year

Hi Brian,
You may not need to run gulp, as the "gulp-inline-css" library itself uses the "inline-css" library which appears to be a basic javascript library that runs outside of gulp.
See here:-
https://github.com/jonkemp/inline-css
So if from PHP you can run javascript then you should be able to get that library running from there - you may need something like browserify perhaps to give you access to the npm library (which requires Commonjs) from the browser.
If you can't get this to work from php and you're on the server side you could always run it in Nodejs perhaps?
Derek

You commented on Brian Tan's post over 1 year

This is the Gulp script that the foundation build process uses for inlining it would appear: -
// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
var css = fs.readFileSync(css).toString();
var mqCss = siphon(css);

var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: false,
removeLinkTags: false
})
.pipe($.replace, '<!-- <style> -->', &lt;style&gt;${mqCss}&lt;/style&gt;)
.pipe($.htmlmin, {
collapseWhitespace: true,
minifyCSS: true
});

return pipe();
}
Looking at the node_modules in the project it would appear that it uses this inlining package:-
https://github.com/jonkemp/gulp-inline-css
I don't know PHP but presumably you can use that library?Hope this helps.
Derek

You commented on Joel Smith's post over 1 year

Basically I think you're missing the CSS definition. I think those SCSS variables that you create can only be referenced within your SCSS files, not from within your HTML files.Therefore, in an SCSS file, you would need to create a class definition that uses that $pink variable.
So, you could create a custom.scss file and import this in your app.scss and create a style there, or else add a new custom style directly into your app.scss file.
So for example, your app.scss file would look like this, assuming you want to change the ink colour and not the background colour: -
 
 
@import 'settings';

@import 'foundation-emails';

.my-colour {

color: $pink

}
So then your index.html code should look like this instead:-
<h1 class="my-colour">my heading text</h1>
I think that ought to work.
Derek

You commented on Derek McDermott's post over 1 year

No takers on this?
From what I can see, the zurb system is not responsive on Outlook (2016) based on the following test.
Here is my inky content on my responsive.html page:-
---

layout: default

<container>
<row>
<columns large="6" small="12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
</columns>
<columns large="6" small="12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores.</p>
</columns>
</row>
</container>

I'm just using this with the default layout. When I view this on Outlook 2016, it shows two columns side by side and doesn't go responsive when you decrease the width. However, except for Windows Mobile, it's responsive on all other email clients I've tested.
Is this by design? Are there any plans to make the system work responsively on Outlook? Are there any reliable/recommended hacks that we can implement to make this responsive?
Thanks!
 

You commented on Derek McDermott's post over 1 year

@Chris, I'd concur with Corey that it probably isn't any harm leaving that css link in the header place - it might even help compatibility across email clients for those that support it. It is a little confusing for anyone starting out though.
However, if you're intent on removing it, I came across this post which explains how to get the sass/gulp build process to remove it for you:-
http://foundation.zurb.com/forum/posts/42859-email-remains-linked-to-appcss-stylesheet
(You could also just set those attributes to true rather than removing them, if you want to more easily change them back later.)
Just do this at your own risk!

Posts Followed




Following

  • No Content

Followers