foundation
Feature - Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project
allows for layouts to have different css references but page names prefix must match css file name e.g.
scss/__invite.scss .invite { background-color:#333333; ... } ...
scss/invite.scss @import 'settings'; @import 'foundation-emails'; @import '_invite'; ...
layouts/invite.html ...
...pages/invite.html, invite2.html, invite_audience1.html /--- layout: invite /--- ...
So all the pages with the prefix "invite" will be inlined with the css from invite.css
Hey Billy, sorry for the delay, I implemented the fix but the syntax you gave me was a little off; probably cos my fork is a few commits behind but I managed to get it working ;)
Sweet thanks man! I’ll check it out soon.
On Dec 20, 2016, at 4:04 PM, Andrew Quan [email protected] wrote:
Hey Billy, sorry for the delay, I implemented the fix but the syntax you gave me was a little off; probably cos my fork is a few commits behind but I managed to get it working ;)
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/zurb/foundation-emails-template/pull/25#issuecomment-268359179, or mute the thread https://github.com/notifications/unsubscribe-auth/AFWRlhfYuV1WrvForXiqQwIhM1UYnXLdks5rKELMgaJpZM4JuSZ7.
I tested out the latest updates and noticed that this new templating setup will only work with the npm run build terminal command and it breaks using the npm start command. Can you update the file to make this work for the npm start command too?
...added an index generator apart from syncing it with the latest from Zurb.
Dude, I’m so sorry to hear that man! I hope you and your family are doing ok and I send my condolences.
Definitely not a worry with timing. I’m just providing some comments and I appreciate your help with this too : ) I’m still new to using github’s features, and not sure If I can provide updates as well, but I’m busy myself with tons of things too. I can help out if you ever need and thanks again for your help with this!
On Jan 23, 2017, at 11:27 AM, Andrew Quan [email protected] wrote:
Sorry for the delayed update Billy; my dad passed away about 2 weeks ago.
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/zurb/foundation-emails-template/pull/25#issuecomment-274537030, or mute the thread https://github.com/notifications/unsubscribe-auth/AFWRlsjdBAs7rZMwuukJU97uDdVwZ-Ymks5rVNUOgaJpZM4JuSZ7.
I was able to create a workflow for multiple template styles within one project with very minimal effort or change to the original repo.
I simply edited the gulpfile to look for all scss files, and within subfolders as well, meaning you create in assets/scss/template/[custom sass file].
This file now compiles to dist/css/template/[custom compiled css file].
Then I utilized the layouts folder to create different layouts that pull in the custom css file. I took the default layout and turned the start of the html and the end into partials (template-start.html and template-end.html). These look like this (make sure to look at the css linking path and see {{type}}:
template-start:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{root}}css/{{type}}.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>{{subject}}</title>
<!-- <style> -->
</head>
<body>
<span class="preheader">{{description}}</span>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
template-end:
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div class="gmailfix" style="white-space:nowrap; font:15px courier; line-height:0;"> </div>
</body>
</html>
Then my layout file for my welcome series looks like this:
{{> template-start type="template/welcome"}}
{{!-- Insert Page (email) --}}
{{> body}}
{{> template-end}}
Back to the gulp file (just edited one section = gulp.src('src/assets/scss/app.scss'):
// Compile Sass into CSS
function sass() {
return gulp.src('src/assets/scss/**/*.scss')
.pipe($.if(!PRODUCTION, $.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
}).on('error', $.sass.logError))
.pipe($.if(PRODUCTION, $.uncss(
{
html: ['dist/**/*.html']
})))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest('dist/css'));
}
@zanomite How did you fix the issue of inliner looking for app.css? I too have multiple stylesheets as my project has 20+ email variations that all have different stylesheets.
Also, does anyone know when running mail build how to replace background-image: url() source?
@zanomite Did you find a solution to this? I am running into the same issue.
Hello!
I edit in gulpfile.babel
73: // return gulp.src('src/assets/scss/app.scss')
74: return gulp.src('src/assets/scss/*.scss')
now in in dist/css I have new .css files, cool!
But what about Inline CSS and minify HTML in line 97 and line 130 ?
But what about Inline CSS and minify HTML in line 97 and line 130 ?
Not sure why you ask in this issue. These are optional and you can enable these lines if you want to use this.
But what about Inline CSS and minify HTML in line 97 and line 130 ?
Not sure why you ask in this issue. These are optional and you can enable these lines if you want to use this.
that is, the letter will have inline styles after the build, if you change only one line # 74 in gulpfile.babel? I have not had time to check. I will check it when get next email task