Menu icon Foundation
Split distribution file into header, content & footer

First: great work! I love the inky concept without all the tables... :)

Now I'm wondering how to manage an automatic split of header, content and footer of the email template during the build process. Instead of a single html file I ant to separate this three parts because they are needed for the system I want integrate some mail templates into.

emailseparatesplitbuild

First: great work! I love the inky concept without all the tables... :)

Now I'm wondering how to manage an automatic split of header, content and footer of the email template during the build process. Instead of a single html file I ant to separate this three parts because they are needed for the system I want integrate some mail templates into.

Rafi Benkual about 3 years ago

Hi Lars, thanks for the kudos!

The purpose of the handlebar templating (panini) is to take HTML partials and 'flatten" them into single files. So using handlebar partials may not fit your use case.

Are you using Rails or what is the build system you are adapting for? There may be a better way to achieve this.

Lars about 3 years ago

Hi Rafi,

thank you for the answer. I just started to use foundation for emails for producing new mail templates. I don't have any special build system so far, just the gulp workflow shipped with the zurb stack. I thought about extending that process with some kind of automatic splitting of the final template files. For this purpose I added some html comments in my source files, e.g.

<!-- <header> -->
...
<!-- </header> -->

Now I just needed some kind okf gulp task that can extract this sections out of the compiled file into new ones. I guess there is no such task in the zurb stack but maybe it would be a good extension for other users, too.

Rafi Benkual about 3 years ago

 

 Yeah that could be useful - are you trying to automatically create HTML partials without creating the files manually? What is the benefit?

Corey Schaaf about 3 years ago

The most difficult thing about doing what is asked are the dependencies of the the inlined styles and class names the media queries use to override those styles. As Rafi stated, the final output is a flat file. To break those pieces apart means the relationship of inlined styles to the media query overrides would be destroyed.  

I realize if you're just copying the pieces of the header and footer into a template system, so they will merge them together in whatever system your describing. But unless that process happens often, using comment tags seems like the way to go.

I've had some similar issues with modifying the inlined code as it relates to special characters, because every time I build, all the code is re-built in the distribution folder which means I then have to update the special characters I just fixed. It's just that in my scenario it isn't worth fixing because it doesn't happen often enough. Just more of a thorn in my workflow that I have to deal with depending on the email project. 

 

Lars about 3 years ago

That's what I want to achieve Rafi, yes. The benefit would be time saving doing this again and again - e.g. during testing changes of the email layout and how it would look like the final system with dynamic content inserted in the <!-- content --> area.

As Corey stated correctly the breaking apart is just temporarily - the shop system put the pieces together with different content sections. This means there is no problem about broken relationshop between media queries and inline styles.

I believe there are a lot of systems (crm, cms, blog, shop, etc.) that use the approach of global header and footer with a dynamic or interchangeable content section for sending emails.

The issue with special characters (", ', &) in my case) that get replaced during the build process is something I noticed, too. I would like to see a setting for excluding certain special characters but that's another issue I think :)