Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

AndrewEQ
Copy link

@AndrewEQ AndrewEQ commented Aug 26, 2016

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

Allows multiple “app.css” files, which allows each layout to have a
different look and feel in a single project.
…ables 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
        ...
        <link rel="stylesheet" type="text/css" href="css/invite.css">
        ...

   > 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
@AndrewEQ AndrewEQ changed the title Master Feature - Allow for layouts to have different CSS files via prefix workflow, enables you to have different/multiple template styles in same project Sep 7, 2016
Copy link

@billyromano billyromano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Author

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
Copy link

billyromano commented Dec 20, 2016 via email

@billyromano
Copy link

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?

Copy link

@billyromano billyromano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Author

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

Synced the differences with the Zurb master.

Auto-generate an index page with links to all your template previews.
You can choose to group the links by their prefix (default) or just
list them alphabetically.

Options: true/‘prefix’ | ‘alpha’ | false
prefixIndex
@AndrewEQ
Copy link
Author

AndrewEQ commented Jan 24, 2017

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

@billyromano
Copy link

billyromano commented Jan 25, 2017 via email

@zanomite
Copy link

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
Copy link

@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
Copy link

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

@GarikGelios
Copy link

GarikGelios commented Mar 24, 2020

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
Copy link
Contributor

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.

@foundation foundation deleted a comment from Creativenauts Mar 25, 2020
@GarikGelios
Copy link

GarikGelios commented Mar 27, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants