Framework Review: Zurb Foundation INKY2

(This post is not done yet. I will keep updating my draft.)

While I work as a freelancer, I often used to have EDM development tasks. The tasks required sometimes just one day to build whole a landing page or EDM. And of course, Whatever I build, The page should be responsive as well.

Quite crazy huh? That could be a month long project if the project codes are quite spaghetti within a big code container. For example, the main campaign landing page on sep. 2014 – so the new campaign landing page is no longer took a month to finish it. Of course, It was based on the Drupal CMS and all menu, theme style guide, API protocol surely have to work perfectly so it is a bit different story..but still one day of landing page completion or EDM sounds crazy.

Only good thing is, those types of works do not require clean codes or designs. The agencies requiring those tasks just want to get stuff done. Afterwards is not my(or their) business.

To make the things easy, I started to gather the code and design patterns. Furthermore, I started to look up some frameworks. There were a couple of frameworks and design patterns. While I work on a couple of responsive EDM development task from media agencies, I started to apply to them. The result was quite good. The development working hours got more shorten.

People are so awesome. Especially, the developer working in marketing process share a lot of know-hows.

This is the site I used to refer a lot. Pretty much covers what I need to develop from PSD slices.

and I sometimes used Inky ver.1 of foundation czurb email template (

The thing is, I want to dynamically test on the each of small steps. Yes, I can test the codes on litmus but it is still annoying to make sure all your inline CSS codes are laid on each of markups and you gotta make your template up to a certain degree to paste your code into their test builder. Plus, uploading to cloud space is not waste your every single minute..or minutes until it compiles. I wanted to have such an automation task tool. I mean, everybody on product development uses the auto task tool like gulp or grunt. Even I have used gulp for my prototyping designs. (I make prototyping and UI animation via framer studio and the framer.js library can be used in gulp.)

And..voila! The zurb foundation made the ultimate task runner template! Woohoo!

The stacks required for this ultimate template is “Gulp”, “Handlebar”, “SASS”, and “NPM”.

Okay. Not a problem. I know a little bit of Gulp. I often used handlebar(panini) template while I am working in Tourism Australia project. SASS? Phssess…Most of my CSS development is done by SASS and Compass. NPM?  I already installed the ruby gem “Homebrew” and installed Node and NPM via homebrew. Everything is pretty much already setup.

So I went to the getting-started page (I choose the SASS version)

and just follow their baby step guide.

I won’t explain how I installed the template since the guide covers everything.

This is what my current template base looks like. The layout/default.html is the main layout. Under the centre table, you will see “{{> body}}”

This body mustache is bringing all the body(the greatest outer container page..I would say) pages under the pages. Once you run your localhost, the default template is index.html. If you parallelly develop another page, simply go to http://localhost:3000/the new page name.html.

Screen Shot 2016-08-05 at 1.54.27 PM

I will show you how it turns out. Once you type “npm start” It will initially install all related node package modules. If you built something and have watcher mode, you can type “npm run build”

Screen Shot 2016-08-05 at 2.05.29 PM

On the terminal, you see that Gulp is doing his job quite fast.

And, if you go to localhost, you will see the default index page. That was a bit ugly but it was tjust simple test..hehe. I also consolated the inky sample snippets for different EDM marketing template like a grid catalogue. I made this catalogue page separately at pages/inkBoilate.html. You don’t need to change any path variable.

Screen Shot 2016-08-05 at 2.02.58 PM

Just type the page name at the end of localhost port number.

Screen Shot 2016-08-05 at 2.04.43 PM


Another awesome feature of this ultimate template is that you can develop all the template as module object oriented style by using panini layout (Handlebar or called as a mustache) I will show you what I mean. The inkBoilate.html page above is just one module compiled the page. I want to see another module continuously landing out.

I built new partial components “hero” and “drip” under partials/inkBoilerate/hero.html and  partials/inkBoilerate/drip.html  (Others for my convenience. You will see the full code on my bitbucket at the end.) After that, I injected these two components into inkBoilate.html like this

Screen Shot 2016-08-05 at 2.13.22 PM

Tada~~! Now you can see the new modules are compiled and landed at the localhost:3000/inkBoilate.html. It is quite awesome.

Screen Shot 2016-08-05 at 2.14.14 PM

You can test your development directly via using Chrome inspector tool. I, however, recommend you experience the browsersync. It is a really useful tool for grid testing.

The testing server is set-up at localhost:3001

and I will turn the CSS outlining option.
Screen Shot 2016-08-05 at 2.21.10 PM

And now you will see the grid outlines on your template.

Screen Shot 2016-08-05 at 2.21.19 PM

Okay Okay, all sounds good. I cannot be still sure to use this ultimate task. The email is very fiddly development and you have to entirely make sure all grids are remained firmly even in outlook. So far the I didn’t use any of super loooooooong table tags and I didn’t write inline CSS code either. How the heck then I can use this template to test in litmus?

Ah..wait a minute. After I type “npm run build” on my terminal, the gulp task runner generated another folder and files. Haha. Look at this. They compiled all the codes into minified version. The CSS code written in SASS file or separately in the block <style></style> is all injected into markups.

Screen Shot 2016-08-05 at 2.31.27 PM

I am still very negative that the compiled code is still working. I cannot be sure until I test the code on litmus. So I decided to make a sample e-mail template and test in litmus.

Here is my new code for order-shipment confirmation. I grab the reference from send with us but the HTML file was just manually written with all inline CSS. I have to re-write them in the Inky 2 format.

The additional positive feature of inky2 is shortening your code much more. I like this feature a lot. Normally when I write the EDM manually without any supported library or tools, it is always over 200 lines and so hard to read them. It also affected to de-bugging when the e-mail template is not laid precisely. Look at the screen shot below. The total code lines that I wrote is just 77. Much shorter than before.

Screen Shot 2016-08-05 at 2.34.57 PM.png

This is the result of the default size.

Screen Shot 2016-08-05 at 2.32.22 PM

and this is mobile view. My code seems okay both on the localhost.

Screen Shot 2016-08-05 at 2.32.43 PM

I grabbed the minified code into litmus checklist section. Since I am a free user, I can only test Gmail, Outlook 2013, and Iphone6. As long as it is not breaking in Outlook 2013.I think It is good to go.

Screen Shot 2016-08-05 at 2.43.17 PM

Oh wow. The minified code works. Through the thumbnail, the grid looks good.

Screen Shot 2016-08-05 at 2.45.33 PM.png

First, Outlook 2013

Screen Shot 2016-08-05 at 2.47.42 PM

Second, G-mail

Screen Shot 2016-08-05 at 2.48.00 PM

Last, Iphone6

Screen Shot 2016-08-05 at 2.48.17 PM

Seems like there is no breaks on the grid. I wonder why only the background value is not injected as inline CSS…Well, I guess that is the debugging part that I need to do next.


PS. I am continuously updating my e-mail template pattern into INKY2. Come and see my bitbucket repository.