At the start of this chapter, I have shown you a screenshot of a responsive mobile-first one-page marketing site built with Bootstrap. In the rest of the chapter, I will guide you to build this site using the Gulp build process you have created in the preceding sections.
You will have to split up the HTML page into different parts in accordance with the HTML template structure you have already created.
The project will have a single breakpoint at 768 pixels. For viewports wider than 768 pixels, the navigation menu will become horizontal and other adoptions are made.
As already mentioned, you'll use Panini to modularize your HTML code. Panini helps you to avoid code duplications in your HTML code.
Panini is powered by the Handlebars templating language. I highly recommend you to read Panini's documentation at the following URL: http://foundation.zurb.com/sites/docs/panini.html.
The index.html file, our main page, will only contain...