Having multiple copies of the same navigation or footer strewn about your pages can get cluttered and ungainly very quickly. Plainly put, you're better off not wasting time re-coding repeated elements, copy and pasting here and there, or making a change that has to be changed in many different places. In the web or email world, once you set up your common elements like headers, footer, and ad units etc., you should be able to automatically include these in every page or email. If you need to change a footer link, you should be able to do so once, and have it apply to all. Using Panini in this way will save you time and reduce costly mistakes. In this lesson we’re going to leverage Panini to make you a workflow and efficiency hero.

Having multiple copies of the same navigation or footer strewn about your pages can get cluttered and ungainly very quickly. Plainly put, you're better off not wasting time re-coding repeated elements, copy and pasting here and there, or making a change that has to be changed in many different places. In the web or email world, once you set up your common elements like headers, footer, and ad units etc., you should be able to automatically include these in every page or email. If you need to change a footer link, you should be able to do so once, and have it apply to all. Using Panini in this way will save you time and reduce costly mistakes. In this lesson we’re going to leverage Panini to make you a workflow and efficiency hero.

Layouts Are The “Bread” of Panini

All your Pages and Partials will be wrapped in a Layout. The ZURB Stack comes with a default.html layout file. It looks like this:

If you were making a Panini sandwich, the layout would be the bread that wraps all your pages, and components. The {{> body}} include is where your pages get injected into. Unless you specify another layout, the default layout where you can add anything that every page will use. Things like CDN links or Panini handlebars partials that will be shared on each page should be added here.

Dividing Up Our Ingredients

Let’s say we have our first page built out with a set of components like the navigation, footer and other pieces. We can take some of these pieces that will be used on every page and create HTML partials which we can add to our layout.

Partials Are the Condiments of Your Panini

First, we’ll create our partials. So in the partials folder we’ll create these HTML files:

We’ll add our navigation, footer, hero, and feature links into these partials. So in our layout.html it looks like this:

The reason that these components are included in the layout is that they will be used on every page. Notice that the order that the includes are placed on the page is the order they appear.

There are ways to exclude an element from a particular page which we’ll cover in part four of the series, Helpers and Data. You might have noticed that the {{> feature-links}} partial is missing from the layout. One way to conditionally add a partial to one page and not another is to include the partial directly in the page.

In our index.html we’ll add it at the top.

You can already see how this keeps your pages and components organized and allows you to have repeated elements coming from a single source.

Partials can be stored in folders or subfolders for better organization. For example:

This gives you better organization, avoiding a cluttered mess. You still include the partial with the same syntax as Panini will find the name of the partials in the folders for you.

You can also include partials inside of partials. Let’s add a repeatable set of navigation links that we’ll use in our mobile Off-canvas as well:

Pages Are The "Meat" of Your Panini

You can add as many pages as you need for your site. You can add folders and subfolders to keep your pages organized. The folders you create become categories to organize your site.

For example, we’ll make a bunch of pages in our bicycle website:

Unless we specify otherwise, all these pages will use the default layout and therefor be wrapped with our navigation, hero, and footer.

You can access these pages in your browser by changing the URL:

To get to the City page, the URL would look like: http://localhost:8000/city.html
To get to the Helmets page, the URL would be: http://localhost:8000/accessories/helmets.html

When your site is deployed, the name of the domain would replace http://localhost:8000/

Choosing Different Bread for Your Panini: Changing Up the Layout

You may need another layout for certain pages. Maybe there are many unneeded components or you’d like to create a micro-site with a different CSS file. Creating another layout is as easy as creating another HTML page in the layouts folder and copying over the <head>.

You can tell any page to use that new layout with some Front Matter at the top of the page:

---