Menu icon Foundation

My Posts


My Comments

Evan Wiegand commented on Isaac Fennell's post about 2 years

Did you know you can move the node_modules folder up a level (or more) out of the project folder, and it will still work? That was the key for me.
So if you have:
/All-my-files/my-email-project/node_modules
Grab the node_modules folder and move up a level to:
/All-my-files/node_modules
Now your "my-email-project" folder is suddenly very small and manageable. I simply keep a master version of that folder, and duplicate it each time I need to make a new project. So my structure is
/All-my-files
/node_modules
/master-project-template
/project-1
/project-2
You can of course snap in different asset folders as needed for a particular campaign or client. This has been working quite well for over a year for me.
 
 
 

Evan Wiegand commented on Evan Wiegand's post over 2 years

FINALLY! Thank you Scott! Got me down from ~4 mins to a speedy 5 secs!

Evan Wiegand commented on Andrew Cetnarskyj's post over 2 years

Looks like you might just need to add some quotes around the word "custom".
@import "custom";

Evan Wiegand commented on Cosmin Popovici's post almost 3 years

Haven't done any real-world experiments yet, but my initial thinking is that it will depend on how complicated your CSS is. I do know that support for CSS selectors varies widely across clients. Nice thing about inlining is that I can use complex things like attribute/pseudo/child/sibling selectors in my sass, and as long as the inliner understands it (which it pretty much always does), everything works out fine in the end. Get rid of the inliner and you're relying on each individual email client's spotty interpretation. Might be able to get by if you stick to using a very basic 'write a class for each and every little thing' approach. But have a feeling I'll still be inlining for a long time. 

Evan Wiegand commented on Jarrett Prosser's post almost 3 years

Not certain but I believe the default behavior of the inlining task tells it strip out any <style> tags in the body of the HTML email. There's a true/false setting for that somewhere in the gulpfile. But regardless, the proper method is to put your custom styles inside the app.scss file in the src folder. That way they will get processed as intended without you having to monkey around with gulpfile settings. It also ensures they are loaded AFTER the foundation stuff, so that your customizations will override the defaults rather than be overridden by them...which could be part of your problem.  

Evan Wiegand commented on Evan Wiegand's post almost 3 years

Just 1 file in 'pages'; typically 10-15 in 'partials'. I just ran tests with 1 partial vs 30 partials and neither had any effect for better or worse. I normally run 'build'. Tried 'watch' and still got same results. 
OSX Yosemite on iMac 2011, also tried a mac mini 2015. 
To clarify, the time it takes the babel-register step is inconsistent within the SAME project. It randomly varies from about 20-30s to several mins on each run, even if all the project files stay exactly the same. 
Interestingly, today it's averaging 20-30s, which I can certainly live with. But I've seen some people's screenshots from the terminal indicating only 1-2 seconds. What's normal? 
Thanks!
 

Evan Wiegand commented on Bryan's post almost 3 years

This is the snippet I use that works great. Putting the stuff inside of a media query allows it to carry over into the final version (assuming you have "preserveMediaQueries" set to true in your gulpfile).
@media screen and (min-device-width: 1px) {

a[href=tel],
a[href="x-apple-data-detectors:"]
{
color:inherit !important;
text-decoration:none !important;
}

}

Evan Wiegand commented on Justin J's post almost 3 years

You custom styles should go inside ./src/assets/scss/app.scss. You can type them directly inside the bottom of that file, or load your own custom partials using @import "my-partial-name".
And no, you don't need that linked app.css file in your final inlined version. To get rid of the link line, add "removeLinkTags: true" in your gulpfile.babel.js file, last line shown here:
var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: false,
removeLinkTags: true
})
 

Posts Followed






  • 7
    Replies
  • iOS blue links styles

    By Bryan

    emailiosblue linkcss

    In my app.css file, I place the following: &nbsp; a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; ... (continued)

    Last Reply by Bryan over 2 years ago


  • 3
    Replies
  • Best way to inline custom styles

    By Justin J

    inlining

    I'm looking into learning about the finer points of the email framework. Currently, I'm trying to set up some custom styles. I've placed my stylesheet inside the, ./src/layouts/default.html file. Once I run, &nbsp;&nbsp;&nbsp; npm run build The styles ... (continued)

    Last Reply by Sameer sharma over 1 year ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Isaac Fennell's post about 2 years

Did you know you can move the node_modules folder up a level (or more) out of the project folder, and it will still work? That was the key for me.
So if you have:
/All-my-files/my-email-project/node_modules
Grab the node_modules folder and move up a level to:
/All-my-files/node_modules
Now your "my-email-project" folder is suddenly very small and manageable. I simply keep a master version of that folder, and duplicate it each time I need to make a new project. So my structure is
/All-my-files
/node_modules
/master-project-template
/project-1
/project-2
You can of course snap in different asset folders as needed for a particular campaign or client. This has been working quite well for over a year for me.
 
 
 

You commented on Evan Wiegand's post over 2 years

FINALLY! Thank you Scott! Got me down from ~4 mins to a speedy 5 secs!

You commented on Andrew Cetnarskyj's post over 2 years

Looks like you might just need to add some quotes around the word "custom".
@import "custom";

You commented on Cosmin Popovici's post almost 3 years

Haven't done any real-world experiments yet, but my initial thinking is that it will depend on how complicated your CSS is. I do know that support for CSS selectors varies widely across clients. Nice thing about inlining is that I can use complex things like attribute/pseudo/child/sibling selectors in my sass, and as long as the inliner understands it (which it pretty much always does), everything works out fine in the end. Get rid of the inliner and you're relying on each individual email client's spotty interpretation. Might be able to get by if you stick to using a very basic 'write a class for each and every little thing' approach. But have a feeling I'll still be inlining for a long time. 

You commented on Jarrett Prosser's post almost 3 years

Not certain but I believe the default behavior of the inlining task tells it strip out any <style> tags in the body of the HTML email. There's a true/false setting for that somewhere in the gulpfile. But regardless, the proper method is to put your custom styles inside the app.scss file in the src folder. That way they will get processed as intended without you having to monkey around with gulpfile settings. It also ensures they are loaded AFTER the foundation stuff, so that your customizations will override the defaults rather than be overridden by them...which could be part of your problem.  

You commented on Evan Wiegand's post almost 3 years

Just 1 file in 'pages'; typically 10-15 in 'partials'. I just ran tests with 1 partial vs 30 partials and neither had any effect for better or worse. I normally run 'build'. Tried 'watch' and still got same results. 
OSX Yosemite on iMac 2011, also tried a mac mini 2015. 
To clarify, the time it takes the babel-register step is inconsistent within the SAME project. It randomly varies from about 20-30s to several mins on each run, even if all the project files stay exactly the same. 
Interestingly, today it's averaging 20-30s, which I can certainly live with. But I've seen some people's screenshots from the terminal indicating only 1-2 seconds. What's normal? 
Thanks!
 

You commented on Bryan's post almost 3 years

This is the snippet I use that works great. Putting the stuff inside of a media query allows it to carry over into the final version (assuming you have "preserveMediaQueries" set to true in your gulpfile).
@media screen and (min-device-width: 1px) {

a[href=tel],
a[href="x-apple-data-detectors:"]
{
color:inherit !important;
text-decoration:none !important;
}

}

You commented on Justin J's post almost 3 years

You custom styles should go inside ./src/assets/scss/app.scss. You can type them directly inside the bottom of that file, or load your own custom partials using @import "my-partial-name".
And no, you don't need that linked app.css file in your final inlined version. To get rid of the link line, add "removeLinkTags: true" in your gulpfile.babel.js file, last line shown here:
var pipe = lazypipe()
.pipe($.inlineCss, {
applyStyleTags: false,
removeStyleTags: false,
removeLinkTags: true
})
 

Posts Followed

Following

  • No Content

Followers

  • No Content