Menu icon Foundation
Question about Projects

This might be a really dumb question, but here goes. When working with the Sass version of Foundation for Emails do I have to install a new project every time I want to make a new email? Or can I just create new pages within the src directory? If the latter is the case, how does that affect the build process? Will it attempt to build everything within the src directiory, or can I specify which files to use in the build? I don't recall seeing anything in the documentation addressing this. 

Thanks,

JBR

SASS version

This might be a really dumb question, but here goes. When working with the Sass version of Foundation for Emails do I have to install a new project every time I want to make a new email? Or can I just create new pages within the src directory? If the latter is the case, how does that affect the build process? Will it attempt to build everything within the src directiory, or can I specify which files to use in the build? I don't recall seeing anything in the documentation addressing this. 

Thanks,

JBR

Rafi Benkual over 3 years ago

Hi JBR,

Good question! The idea behind the build system and the handlebars templates is that you create each new email in the same project IF you are working on the same company or brand. That way you can theme the emails in the settings file based on a brand. 

Let's say you have a common header and footer, you can easily add into each page with Handlebars. Actually, you'd add it into the default layout. You can even use a {{title}} helper to change the name of of each email based on your different campaigns.

If it was a one off email that can't share settings, them I would create a new project.

The `npm start` tast will run through all the files in your src folder, process them, and copy to dist where you get the final assets to send your campaigns.

Corey Schaaf over 3 years ago

Rafi,

I'd like to expand on this question a little bit.  I actually finished the course for Mastering Foundation for Emails and had been getting ready to release our responsive emails into the wild (but then foundation for emails 2 came along so I decided to go back and upgrade before pushing all those template to production).  

A little background, I currently work for a company with three other designers and we design around 6 emails per week for three different website properties. I'm using the sass version of foundation for emails and I love the project aspect of foundation. All of our emails use the same code structure, we just theme them based on the website the email is going out for. The body content is different, phone number information is different, the content of the emails themselves are different, but to streamline our efforts, we use the same code structure for all of them. 

Based on what Jay is asking above, we have a series of Shopping Cart Abandonment emails that go out for all the portals. A 1 day, 3 day and 1 week version. In addition to that, we also have welcome series for each portal, transactional emails, review your product type email series etc ... 

From an organization stand point, all of those email series per web property use a uniqe header, footer along with some variations of a footer and header content based on the series that it is going out.  If I'm understanding you correctly - you're saying I would only need to create one project for all those different types of series for each website property?  For example, one of our web properties is TacticalGear.com.  All transactional emails, shopping cart abandonment emails, product review emails; - all of those series have the same header and footer - so I don't need to create a unique project for all those series? 

The reason I'm so confused is from a team perspective - my team members all work on different aspects of those projects. We would be using a version control system to make sure all members have the latest version of the code for all projects - but when they work locally and "build" out a project - it builds everything in the pages directory. This list of emails will actually grow and get larger and larger because we send out weekly promotional emails as well. I'm just trying to understand how to use the Project build in conjunction with a group of people as opposed to a lone designer. 

 

Jay Robinson over 3 years ago

 Corey,

I had these same questions, but did not have a solid scenario for explanation. I work with a number of designers as well, and the idea of building everything in the pages directory sounds like a potential nightmare.

Thank you,

Jay

Corey Schaaf over 3 years ago

 Jay,

One of the things I'm curious about is creating a folder structure for the projects inside the pages directly. In the foundation for emails course, it says I don't have to do that, but I want to from an orginization stand point. I tried to create a folder structure inside the pages directory and while I was successful with doing that, I ran into some issues with inlining.  

When using the command line to watch for any changes it built out my folder and the index file inside the dist folder. However when I went to build - it didn't inline the styles. I'm assuming the reason for this based on the error output is because it couldn't find the path of the app.css since the index file was inside another folder inside the dist. 

I'm assuming that can be updated my changing the gulpfile.babel.js and probably a few other locations but I think modifying those settings might break the package. 

I feel like it's really close to be able to do those things, but I'm not a programmer that understands all of those types of changes. 

Ethan Hackett over 3 years ago

Corey,

I believe you're right with the direcotry issue looking for `css/app.css` if your emails are burried in a sub folder it needs to be `../css/app.css` where each `../` goes up a level in the folders.

But you'd need to make sure each of your sub directories are the same depth like the example bellow.

  • company_1
    - email 1
    - email 2
  • company_2
    - email 1
    - email 2

You also might be able to create multiple layout files with matching paths to css ie one is /css/apps.css and the other is ../css/apps.css and two levels down would use ../../apps.css but I haven't created multuple layouts yet so I don't know how to implement that.

A third option would be to explore using `partials` which would allow you to create reusible headers/footers for each company and you include them at the top and bottom of each email. This way if the content is relatively the same you can easily move them between companies and just swap out the includes to project specific partials.

Corey Schaaf over 3 years ago

Ethan, 

I tried the method above and chaning the ../css/app.css AND DID get the projects in subfolders to inline.  However, when the server launched the window I got an error in my browser saying can not / GET. So while it built out the files in the subfolders, if I needed to work on them I couldn't get them to render. So close ... yet so far lol. 

This has actually spawned another question. by default their is an index.html page inside of pages.  What if I use that index page to create a review email.  That works great. 

However, now lets say I have another email I need to create. Let's say its a weekly promtional email.  Do I just create a brand new email in the page directory and call it promo-040716.html. When I use the foundation watch command in the command line the browser opens up with a localhost:3000 ... but it's referencing the index.html page.  How do I navigate to the new page I created promo-040716.html.  Seems like such a basic question that I should know. 

Corey Schaaf over 3 years ago

Ethan, 

I'm an idiot.  The reason I was getting CANNOT GET /  is because I needed to navigation to the folder where I had the files. This might actually work. I'll get back with you in a moment to check. 

Corey Schaaf over 3 years ago

Ethan, 

I was able to get this to work. One thing I did have to do was modify the layout css call to the following:

from:

<link rel="stylesheet" type="text/css" href="css/app.css">

to this:

<link rel="stylesheet" type="text/css" href="{{root}}/css/app.css">

 

Thanks for the idea. 

Jay Robinson over 3 years ago

Ethan,

I discovered that if you change your url to localhost:3000/promo-040716.html it should work correctly.

Jay 

Ethan Hackett over 3 years ago

Corey glad you got it working and thanks for sharing the {{root}} solution.