I'm just trying to evaluate the Zurb Foundation for Email, using the Gulp/Sass Stack.
My first port of call was to try to get some of the sample templates working however, it's not clear from the docs exactly what the general workflow ought to be for a pure beginner.
You would think this would be a no-brainer to take the sample templates, run them through the SASS build system and reproduce the results shown in Zurb's litmus tests, but no, it's proving to be a bit of a nightmare! Some basic walkthroughs included in the docs to clarify the general steps would be helpful for anyone else starting out trying to get familiar with the system.
I really want the Zurb for Emails system to work as I think it has great potential, so if anyone could chip in with some help or general guidelines I would be most grateful.
In particular, I've found the following pretty confusing:-
- To run the in-liner, is there any difference between 'Foundation Build' and 'npm run build'?
- A brief outline of what the build process actually does would be great. For example, my output file still has the css link tag at the top pointing to 'css/app.css'. Is that supposed to be there even after inlining? Because of this, I'm not sure my inlining process is running properly? Maybe it's no harm to retain it there for compatibility across email clients?
- As far as I can tell, the inlining process only actually in-lines the css present in the 'css/app.css' file into the style attributes of the various tags in the document.
Where the page being inlined actually has it's own internal style block <style>...</style> (as in the sidebar-hero sample template) this block is actually only copied into the body of the document
<table class='body'><tr><td><center><style> ...style block copied here... </style></td></tr></table>
So, they don't actually get 'in-lined' into the various 'style' attributes on the various tags the same way that the 'css/app.css' styles do.
Is this supposed to happen like this or is there something going wrong with my in-lining process?
- Because of the way that the page-level inlining works (as described immediately above) I'm finding that the Zurb sample templates don't actually render in Outlook (2016) the way that the Zurb site portrays them in the Litmus tests, so obviously I'm going wrong somewhere, but can't see where.
(I've documented this issue here if anyone can help.)
- After building my page using the Gulp/Sass stack (including inlining with npm run build) are we actually supposed to take the output file and the css provided in the 'dist' folder and run it through Zurb's web-based inliner? I doubt I'm supposed to do this, but the funny thing is, the page actually renders somewhat better in Outlook 2016 after doing this, presumably because the page-level css in the style block is finally properly in-lined within the various style attributes rather than being retained as a style block (which probably gets filtered out by Outlook).
- Perhaps my issue is with how/what I'm actually sending... Let's say I create a page in the 'pages' folder called 'Demo1.html' and build it with npm run build. The output file is in the 'dest' folder also called 'Demo1.html'. Is this output file self-contained and ready to send out as a HTML email or does it also require the 'css/app.css' file to be included with it? If so, how do you package these two files together for sending as an HTML email? At the moment, I'm using an npm utility called 'send-html-email' which only sends a single html file at a time. So, what to do with the CSS file there? I've also tried using GroupMail which supports sending html emails, but again not sure what to do with the CSS file there either as it just expects you to send a single file. Should it be included as an attachment in some way? Or should the CSS file be put up in a public website and linked to from there? I'd have thought those would get blocked by email clients? Any guidelines here would be appreciated.
- A little more information on the purpose of the various folders in the SASS build system would be useful. I understand the obvious ones like the 'Layouts' and 'Pages' and 'Dist' however, it's not clear what the 'Partials' folder is for and what the build system does with that! Presumably page fragments go in there but how do they get included? Some examples would help perhaps.
I'm running out of time to evaluate this product, so if anyone could give some info on any of the above sticking points or point me in the direction of the appropriate docs, in case I've missed something, that would be great!