Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Foundation for Emails
Webdesign

Foundation for Emails: How to Use Panini Partials

by
Difficulty:IntermediateLength:MediumLanguages:
Final product image
What You'll Be Creating

In this tutorial, we’ll be using ZURB’s Foundation for Emails to create a simple functioning email. We’ll explore various libraries provided by the framework, specifically “Panini”. Panini allows us to do a few things but we’ll be focusing on its partials feature.

We’ll be using a design put together with Web Wireframe Kit available from Envato Elements.

Setting up Our Project

Foundation offers two versions; a standard CSS version or one which uses Sass. For this tutorial we’ll be leaning on the Sass version as it offers a different workflow which includes the “Inky” templating language, as well as more customisation for styling.

I will presume you already have some knowledge of how to setup a project using Foundation, the easiest way being with the Foundation CLI. Instructions for installing via the command line are available in the Foundation docs. Alternatively, if you’re an Envato Tuts+ or Elements subscriber you can follow Adi Purdila as he walks through the whole installation process.

Once you’ve done this, we can create a project with the following command. You’ll then be asked for the name of the folder you want to create the project in.

Before we dive into any code, I like to clean up my build directory first. You should see a src folder with the following structure:

  • assets
  • helpers
  • layouts
  • pages
  • partials

I like to delete all files with the exception of index.html within the pages folder (we won’t be using any of the others). I’ll also delete the index-layout.html in the layouts folder. 

Note: As mentioned above, this isn’t compulsory. I just like to keep my build directory nice and clean.

_settings.scss file

The sass version of the framework allows us to customise the pre-built components for our own use. I’ve listed below the changes I have made, including each comment section header. Feel free to either change these in your _settings.scss file or create a new file and import it after the the settings file, but before the foundation framework one.

Let’s Begin Coding!

Moving on, it’s time to open up index.html in the pages folder. This is where we will create the email content. We’ll start with the following code which includes a spacer element and the container element. Remember, we’re using the Inky templating language if this looks unfamiliar!

We’ve already started to use the features of Panini here, specifically Custom Data. This is a default data value used by Foundation. It uses a variable name of subject which is then pulled through into the master template for the title tag with {{ subject }}.

The Header

Now we can begin to start using partials with Panini! Go ahead and create a new file called header.html within the src/partials folder.

We’ll be using the following code for the header, and whilst it’s not necessary I do like to wrap my sections within the wrapper tag along with a class for identification:

You may have noticed I’ve used two anchor tags for the logo. This was due to the logo being centered on mobile (images need a center tag around them) so I used Foundation’s visibility classes to show/hide on mobile. I’ve also hidden the webversion link text on mobile too.

Now you’re wondering, how do we get this to show up? Heading back on over to the index.html file, between the container tags, place the following code inside:

All partial includes require {{> }} along with the name of the partial file name, in this case, header.html.

I’ll be using the following styles for the header too, feel free to put this anywhere. I created a file named _styles.scss and imported this via app.scss.

Note: You may have noticed I didn’t apply a width to the img tag for the logo (which you should normally do!) Foundation’s framework has a bunch of styles which cause the image to expand to its full width. In this case, because I’m supporting retina screens, I create @2x images. We can solve this by targeting the img and applying a max-width (be sure to use max-width, and not just width).

Hero Section

For this section, I decided to keep it within the index.html file; I felt it didn’t require a partial, but it’s up to you how you handle it.

As far as styling goes, you may see some things in here you haven’t seen before. We’ve started to introduce some styles for mobile size, this is done using a media query but Foundation is very helpful and supplies a Sass variable for the max-width.

Whenever creating styles within the media query, you’ll often need to use the !important tag otherwise the small size styles will be overwritten by the large ones.

Remaining Partials

So we have three sections left to be completed: Projects, Testimonials and the Footer. Each can be placed in its own file within the src/partials folder.

projects.html

testimonials.html

footer.html

Styles

Including the Remaining Partials

Now we’ve created the final partials we can get them included within our index.html. Go ahead and add {{> projects}} and {{> testimonials }} immediately after the closing hero wrapper tag.

But what about the footer? The footer does need to be included but it will need to be placed outside the <container> tags. This is because it uses a full width background. Add {{> footer}} straight after the closing container tag.

Finishing Up

At this point, our email should be looking pretty good! However, you may have noticed fonts aren’t loading correctly. We defined the $body-font-family variable to use “Lato”, along with fallbacks. This is a Google font so we can import it in the app.scss file. Be sure to import this before anything else.

Now our email is finished, we can finalise it and get it ready for distribution! Using the foundation command helpers we can simply run foundation build which will minify images, inline css and package everything up! 

Conclusion

We’ve done it! We’ve successfully built an email using ZURB Foundation’s Email framework and the Panini library! If you’d like to look at the other features included within Panini, the full documentation is available.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.