-
Notifications
You must be signed in to change notification settings - Fork 209
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
base: master
Are you sure you want to change the base?
Conversation
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
There was a problem hiding this 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 : )
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 ***@***.***> 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>.
|
I tested out the latest updates and noticed that this new templating setup will only work with the |
There was a problem hiding this 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"[^>]*>/, '')))
foundation#25 (comment) view-14872615
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
...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 ***@***.***> 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>.
|
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 template-start:
template-end: Then my layout file for my welcome series looks like this:
Back to the gulp file (just edited one section = |
@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! |
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? |
allows for layouts to have different css references but page names
prefix must match css file name
e.g.
So all the pages with the prefix "invite" will be inlined with the css
from invite.css