ZURB loves flat file generators, so much infact that we created our own as a companion to the Foundation Family. Panini is a flat file compiler that uses the concepts of templates, pages, and partials—powered by the Handlebars templating language—to streamline the process of creating static prototypes. Panini comes with tons of Handlebars helpers built in, like a repeat helper or markdown parser, but in this lesson we’ll take a look at creating a custom month/year helper for an HTML email.

First, let’s review what we’re trying to accomplish:

We’ll be sending a monthly newsletter to our user base and need both the header and footer of the email to include the month and year it was created. We could just type this by hand each month, but that can get tedious and may be forgotten. We’ll create a custom Handlebars helper that can be placed in the template of our email to inject the month and year into our text.

Let’s make our custom handlebars template.

1. Create a new project

As of February 2016, Foundation for Emails has a Release Candidate that can be found on GitHub. First, we’ll clone down the Foundation for Emails ZURB Stack:

git clone https://github.com/zurb/foundation-emails-template projectname

We’ll cd into our project

cd projectname

and install dependancies

npm install

2. Creating a helper file

We’ll navigate to the src/helpers folder and create a new file called month-year.js

3. Adding our JS

We’ll drop in some JS into our helper:

module.exports = function() {
  var month = new Date().getMonth() + 1;
  var year = new Date().getFullYear();

  return month + '-' + year;
}

Let’s break down this code:

module.exports = function() {}
module.exports tells Handlebars what code to use when loading the helper. Any code outside of module.exports won’t be revealed to Handlebars.

var month = new Date().getMonth() + 1
Gets the current date and extracts the month from it as a number. However, since the counter starts at 0, we add 1 to the number, so 1 is January, 2 is February, and so on.

var year = new Date().getFullYear()
Gets the current date and extracts a 4-digit year from it.

return month + ‘-’ + year
Finally, we return the two numbers with a hyphen between them. The plus signs let us “add” the values together, so we get something like “02-2016”

4. Add our handlebars to our templates

Now we can add our Handlebars into our header, footer or wherever else we need to print the date in our email. The name of our new Handlebar helper is the exact name of our JS file, so in this case we’ll be calling month-year as follows.

{{month-year}}

That's it!

---