This chapter is from the book
This chapter is from the book
This chapter is from the book
9.6 Includes Intro: Head and Header
Now that we’ve factored the CSS into a separate file (and added a CSS reset), it’s time to start slicing up the default page into reusable pieces. As discussed in Section 9.3, Jekyll provides includes to help us with this important task. (Note: In this context, the word “include” is used as a noun, which is not standard English but is standard in the world of static site generators. This usage also changes the pronunciation; the verb form is “in-CLUDE”, but the noun form is “IN-clude”.)10
Includes are supposed to be the smallest/most reusable snippets of site code. They are usually loaded into either layouts or templates, but in fact can be used anywhere on a site—you can even have includes call other includes (Figure 9.13).11 Since these snippets of code are intended to get dropped into the site almost anywhere, you should always try to make sure that any includes you create have code that is portable and self-contained.
)
Figure 9.13: You can put includes in includes, so your includes have includes.
Jekyll includes are located in a dedicated folder called _includes (as with _lay-outs, the underscore is important). Go ahead and create that folder now, together with a new file called head.html (Listing 9.10).
Listing 9.10: Creating the includes folder and adding in a new file.
$ mkdir _includes $ touch _includes/head.html
At this point, your project folder should look something like Figure 9.14.
)
Figure 9.14: The project directory with added includes.
As you might have guessed, we’re going to use head.html to hold the head tag and its contents. The way to do this is first to cut that content out of default.html, and then paste it into head.html (possibly using Shift-Command-V to paste with the proper indentation), as shown in Listing 9.11.
Listing 9.11: Moving head to its own file.
_includes/head.html
<head> <title>Test Page: Don’t Panic</title> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head>
To include the contents of head.html back into the default.html layout, we’ll use our first example of the Liquid language mentioned in Section 9.3, which looks like this:
{% include head.html %}
Here include is a Liquid command to include the file in question (in this case, head.html). The special syntax {% … %} tells Jekyll to replace the contents of that line with the result of evaluating the code inside. Because Jekyll automatically knows to look in the _includes directory, the result will be to insert the contents of head.html.
Replacing the original head section with the corresponding Liquid snippet gives the code shown in Listing 9.12.
Listing 9.12: Including the site head using Liquid.
_layouts/default.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
After making these changes, you should refresh your browser to confirm that the page still works.
9.6.1 Page Header: Up Top!
At the top of a typical web page, you will usually find some sort of site-level navigation that takes users from page to page on the site, and also includes site branding. This section is often referred to as the site header (Figure 9.15) (not to be confused with the head tag, which is the HTML header). Implementing such a header site-wide is a perfect application of Jekyll includes.
)
Figure 9.15: Some site headers from popular websites.
To get started, let’s add a new Liquid tag to header.html (which we’ll create in a moment) at the top of the default.html file, as shown in Listing 9.13.
Listing 9.13: Including the header HTML.
_layouts/default.html
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="full-hero hero-home">
<h1>I’m an h1</h1>
<ul class="social-list">
Next, create a new blank document in the _includes folder called header.html:12
$ touch _includes/header.html
The header itself will use two semantic elements (i.e., elements that have meaning): header to contain the header and nav for the navigation links, which (as with the social links in Section 8.5) are organized as an unordered list ul. We’ll also use the classes ”header” and ”header-nav” to make it easier to apply styles across a range of browsers (Box 9.2). The resulting code appears in Listing 9.14.
Listing 9.14: The basic structure of our site header.
_includes/header.html
<header class="header">
<nav>
<ul class="header-nav">
<li><a href="/">Home</a></li>
<li><a href="#">Nav 1</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
</ul>
</nav>
<a href="/" class="header-logo">Logo</a>
</header>
Save and refresh your browser and now you’ll see your new site header (Figure 9.16). (We’ll explain the placement of the logo in Section 9.6.2.)
)
Figure 9.16: Our not-very-attractive header.
9.6.2 Navigation and Children
Now, let’s style that ugly header!
The end goal for our design is to create a traditional sort of header, with a logo on the left-hand side that will send users back to the homepage, and site navigation at the top right. As a final step, we’ll change the position of the header so that it will sit on top of content below it.
The first thing that we are going to do is move the navigation to the right and put the lis into a horizontal row by changing their display property to inline-block. The result, which we suggest inserting immediately after the global styles, appears in Listing 9.15.
Listing 9.15: Adding header styles.
css/main.css
/* HEADER STYLES */
.header-nav {
float: right;
}
.header-nav > li {
display: inline-block;
}
Note in Listing 9.15 that we’ve used the more advanced child selector > to target the lis (as discussed before in Box 8.1). That is to make sure that if we wanted to put a second level of links into the menu, only the direct children would be inline-block (which we will in fact do in Section 13.4).
After saving and refreshing, you’ll see that the menu has moved (Figure 9.17).
)
Figure 9.17: Navigation moved to the right and all in a line.
You might have wondered why the logo is below the navigational list in Listing 9.14 even though it comes first when viewing the header from left to right. The reason is that we knew all along that we were going to float the navigation to the right side of the screen, and if the logo appeared before the navigation in the HTML order then the menu would start at the bottom of the logo. This is because even a floating element respects the line height and position of normal block or inline elements that come before it, which in this case would lead to unwanted space around the logo. You can check this yourself by switching the positions of the logo and nav links; you’ll see that the menu starts lower as a result (Figure 9.18).
)
Figure 9.18: Switching the logo to come first adds unwanted space.
Now let’s add in some padding on the list items and make those links a little more stylish. We are going to add some padding to move the navigation away from the edges of the page:
padding: 5.5vh 60px 0 0;
We are also going to give each li in the navigation a bit of left margin so that it isn’t bumping right up against its neighbor:
margin-left: 1em;
For the links themselves, we’ll change the color and the size, make the font bold so that it is easier to read, get rid of the default link underlines (as is done in about 99% of site headers), and also automatically transform the text to be uppercase:
color: #000; font-size: 0.8rem; font-weight: bold; text-decoration: none; text-transform: uppercase;
Here we’ve used #000 instead of black; as noted in Section 7.1.1, it’s important to learn how to use these two interchangeably.
After adding the appropriate selectors, the styling changes look like Listing 9.16.
Listing 9.16: Styling the navigational links.
css/main.css
.header-nav {
float: right;
padding: 5.5vh 60px 0 0;
}
.header-nav > li {
display: inline-block;
margin-left: 1em;
}
.header-nav a {
color: #000;
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
Your page navigation should now look like Figure 9.19.
)
Figure 9.19: Navigational links are now a bit more stylish.
So how did we come up with those exact styles? The values came from just adding a couple of styling rules, and then tweaking the numbers until things looked good. Design isn’t always a systematic process—often you just need to make changes and then play around with the numbers until you get something you like. When designing websites, there tends to be an extended period of experimentation, so don’t worry if it takes you time to get things right when you work on your own!
9.6.3 Exercise
You can load dynamic text into includes. To try this, add the extra code {{ include.content }} somewhere in your header.html include, and then in the layout change the include tag to {% include header.html content=”This is my sample note.” %}.