Setting up the JSON files

Each Harp project has at least two JSON files that are used for configuring a project. JSON stands for JavaScript Object Notation and it's a lightweight format for data interchange. If that sounds complicated, don't worry about it. The actual coding of a JSON file is actually really straightforward, as I will show you now.

The first is called _harp.json and it's used for configuring global settings and variables that will be used across the entire blog. In this case, we're going to set up a global variable for the name of our project that will be inserted into every page template. Start by creating a new file in the root of blog project and call it _harp.json. Within the file, insert the following code:

{ 
   "globals": { 
      "siteTitle": "Learning Bootstrap 4" 
   } 
}

Here's what's happening in this code:

We're using the globals keyword so any variables under this will be available across all of our templates
I've created a new variable called siteTitle which will be the title of the project
I've inserted the name of the book, Learning Bootstrap 4, as the title for the project

That completes the setup of the global _harp.json file. In a little bit, I'll show you how to add the variable we set up to the main layout file.

Creating the data JSON file

The next thing we need to do is set up the _data.json file that can hold template-specific variables and settings. For our project, we'll set up one variable for each page template which will hold the name of the page. Create another file in the root of the blog project and name it _data.json. In that file, insert the following code:

{ 
   "index": { 
      "pageTitle": "Home" 
   } 
}

Let me break down this code for you:

index refers to a filename. In this case, it will be our home page. We haven't actually created this file yet but that is okay as we will in the next steps.
I've created a variable called pageTitle which will refer to the title of each page template in our project
Since this is the index template, I've assigned a value or name of Home to it

That completes the setup of the _data.json file for now. Later on, we'll need to update this file once we add more page templates. For now, this will give us the minimum resources that we need to get our project going.

Setting up the layout

Let's go ahead and set up the layout file for our project. The layout is a separate file that will be a wrapper for the content of all of our pages. It contains things such as the <head> of our page, a header partial, and a footer partial. This is one of the advantages to using a static site generator. We don't have to define this on every page so if we want to change something in our header, we only change it in the layout. On the next compile, all of the page templates' headers will be updated with the new code.

Create a new file in the root of the blog project called _layout.ejs. Since this is technically a type of layout file, we'll be creating it as an EJS template file. Once you've created the file, insert the following code into it:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- Required meta tags always come first --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <title><%- pageTitle %> | <%- siteTitle %></title> 
 
    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
  </head> 
  <body> 
 
    <%- partial("partial/_header") %> 
 
    <%- yield %> 
 
    <%- partial("partial/_footer") %> 
 
    <!-- jQuery first, then Bootstrap JS. --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
  </body> 
</html>

There are a few things going on here, so let me explain everything that you need to know:

The top is your standard <head> section that matches the basic Bootstrap template we covered in the first chapter, with, however, a few differences.
Note the <title> tag and that it includes the two variables we set up previously. One for the pageTitle variable which will print out Home if we are on the index page. The second siteTitle variable will always print out Learning Bootstrap 4 as that is what we set it to in _harp.json.
Skip down to the <body> section and you'll see some new lines of code. The first partial is for our header. This line will include a snippet of code that we'll set up later that contains the markup for our header. Since this will be the same on all pages, we only need to include it here once instead of on every page.
The second section in the <body> is the <%- yield %> tag. This is a Harp template tag and here is where the contents of our page template files will load. In the case of our index page, any code that we enter into index.ejs (that we need to create still) will be loaded in at this place in the layout.
The final line of code is a partial for the footer and works exactly the same as the header. At a minimum, you should have a header and footer partial in your projects. However, you are free to add as many partials as you like to make your project more modular.

That completes the setup of the layout. Next, let's move on to coding the header and footer partials.

Setting up the header

Let's set up our first partial by coding the header. We'll use the Bootstrap navbar component here for our global navigation for the blog. In the partial directory, open up the _header.ejs file that you created a little earlier and insert the following code:

<nav class="navbar navbar-light bg-faded"> 
  <a class="navbar-brand" href="#">Learning Bootstrap 4</a> 
  <ul class="nav navbar-nav"> 
    <li class="nav-item active"> 
      <a class="nav-link" href="index.html">Home</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="about.html">About</a> 
    </li> 
    <li class="nav-item"> 
      <a class="nav-link" href="contact.html">Contact</a> 
    </li> 
  </ul> 
  <form class="form-inline pull-xs-right"> 
    <input class="form-control" type="text" placeholder="Search"> 
    <button class="btn btn-primary" type="submit">Search</button> 
  </form> 
</nav>

If you're a Bootstrap 3 user, you'll likely notice that the code to render a navbar in version 4 is much cleaner. This will make the navbar much easier to use and explain. Let me break down the code for you:

On the <nav> tag, we have a few classes we need to include. .navbar is the standard class need for this component. .navbar-light will render a light-colored navbar for us. There are some other color options you can check out in the Bootstrap documents. Finally, the .bg-faded class is optional but I like to include it as it makes the background of the navbar a little more subtle.
The .navbar-brand class is unchanged from Bootstrap 3 and I've inserted the name of the book for this tag. Feel free to name it whatever you want.
Next, we have our navigation list of links. The <ul> tag needs to have the two required classes here: .nav and .navbar-nav.
Within the list, you'll notice three pages: Home, About and Contact. These are going to be the pages we'll build out through later chapters so please fill them in now.
Tip
Note the .active class on the index page link. This is optional and you may not want to include it in this manner as this is a global navigation.
Finally, I've included a search form and used the .pull-xs-right to align it to the right of the navbar. If you're familiar with Bootstrap 3, this class used to simply be called .pull-right. In Bootstrap 4, you have more control of the alignment based on the viewport size of your device. If you always want the search bar to be aligned to the right then use the -xs value in the class.

Save the file and that will complete the setup of the header partial. Let's move on to setting up the footer.

Setting up the footer

The footer partial works exactly like the header. Open up the _footer.ejs file in the partial directory that we created earlier and paste in the following code:

<!-- footer //--> 
<div class="container"> 
   <div class="row"> 
      <div class="col-lg-12"> 
         Learning Bootstrap 4 2016 
      </div> 
   </div> 
</div>

The footer content is going to be quite basic for our blog. Here's a breakdown of the code:

I'm using the .container class to wrap the entire footer, which will set a max width of 1140 px for the layout. The navbar wasn't placed into a container so it will stretch to the full width of the page. The .container class will also set a left and right padding of .9375rem to the block. It's important to note that Bootstrap 4 uses REMs for the main unit of measure. EMs has been deprecated with the upgrade from version 3. If you're interested in learning more about REMs, you should read this blog post: http://snook.ca/archives/html_and_css/font-size-with-rem .
It's also important to note that the column classes have NOT changed from Bootstrap 3 to 4. This is actually a good thing if you are porting over a project, as it will make the migration process much easier. I've set the width of the footer to be the full width of the container by using the .col-lg-12 class.
Finally I've entered some simple content for the footer, which is the book name and the year of writing. Feel free to change this up to whatever you want.
Save the file and the footer setup will be complete.

We're getting closer to having our Harp development environment set up. The last thing we need to do is set up our index page template and then we can compile and view our project.

Previous Chapter

Setting up the blog project

Next Chapter

Creating our first page template

Table of Contents for Bootstrap 4 – Responsive Web Design

Setting up the JSON files

Creating the data JSON file

Setting up the layout

Setting up the header

Tip

Setting up the footer

Table of Contents for
Bootstrap 4 – Responsive Web Design