Feature - Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project

[AndrewEQ]

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

[billyromano]

You'll also need to make sure to adjust the code that removes the css file link in the html head. If you don't, then the CSS file will be linked in the final inlined html files which will throw an error when uploaded without the .css file. The zurb team setup the regex replacement in the 'inliner' function as a string literal to "css/app.css" which needs to change to a regex value, so it will look at each css file independent of the exact file name. On line 129 I have a fix for the issue, so that when running the npm run build command it will properly remove the css link tag independent of the exact css file name. Here's the code fix to add to line 129 and then this feature can be pushed into the latest release. Love this feature btw, and using it currently.

Code fix (line 129 of gulp file.babel.js):
.pipe($.replace, /<link rel="stylesheet"[^>]*>/, '')

Please implement and push : )

[AndrewEQ]

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 ;)

[billyromano]

Sweet thanks man! I’ll check it out soon.

…

On Dec 20, 2016, at 4:04 PM, Andrew Quan ***@***.***> 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 <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFWRlhfYuV1WrvForXiqQwIhM1UYnXLdks5rKELMgaJpZM4JuSZ7>.

[billyromano]

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?

[billyromano]

Line 123 needs to be updated to fix an issue loading the css file running the command npm start
Replace line 123 with the following to fix:
.pipe($.if(PRODUCTION, $.replace(/<link rel="stylesheet"[^>]*>/, '')))

[AndrewEQ]

Sorry for the delayed update Billy; my dad passed away about 2 weeks ago.

[AndrewEQ]

...added an index generator apart from syncing it with the latest from Zurb.

[billyromano]

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 ***@***.***> 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 <#25 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFWRlsjdBAs7rZMwuukJU97uDdVwZ-Ymks5rVNUOgaJpZM4JuSZ7>.

[zanomite]

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;"> &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>

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'));
}

[Creativenauts]

@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?

[nick-bettondesign]

@zanomite Did you find a solution to this? I am running into the same issue.

[GarikGelios]

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 ?

[DanielRuf]

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.

[GarikGelios]

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