This chapter is from the book
This chapter is from the book
This chapter is from the book
9.10 A Footer, and Includes in Includes
After creating and styling a site header, a natural next step is to style the page footer. This is the navigational/informational section that can be found at the bottom of a site (Figure 9.41).
)
Figure 9.41: A refresher on the elements of a typical web page, including a page footer.
Often, the footer is a partial replication of the navigational elements from the header (just styled in a slightly different way), but many sites add to that a bunch of other content—everything from store locations and hours to additional content links.
Since the footer is found at the end of the page and contains ancillary information, you don’t really need to worry about space (there’s plenty of room at the bottom!). What we mean by that is that you can think of the footer as extra space, where users aren’t required to see everything there. Many sites, such as Amazon, have a lot of content in a giant footer at the bottom of the page (Figure 9.42).
)
Figure 9.42: A giant footer.
We’ll start by creating a new footer.html file inside the _includes folder:
$ touch _includes/footer.html
Next, we’ll add some HTML. We’re going to wrap the footer in another HTML5 semantic tag, the footer tag. As with the header tag, this is a semantic element that works just like a standard div, but gives automated site readers (such as web spiders and screen readers for the visually impaired) a better idea of what the purpose is of the content inside. We are also going to add in a logo link similar to the one in the header. The result appears in Listing 9.36.
Listing 9.36: Adding in the basic footer structure.
_includes/footer.html
<footer class="footer">
<a class="footer-logo" href="/">
<img src="/images/logo.png" alt="Learn Enough"/>
</a>
<h3>Learn Enough <span>to Be Dangerous</span></h3>
</footer>
To include the footer in the default layout, we’ll follow the model from Listing 9.12 and use Liquid to insert the contents of footer.html just before the closing body tag in default.html (Listing 9.37).
Listing 9.37: Add in the Liquid tag to the default layout.
_layouts/default.html
.
.
.
</p>
{% include footer.html %}
</body>
</html>
Now let’s add some styling as well. We’ll give the footer a black background, like the header, and we’ll give it some padding. We’ll make sure that the content inside is easy to read by using vh units, which causes our padding to take up a large portion of the screen:
background-color: #000; padding: 10vh 0 15vh;
We’ll also constrain the size of the logo so that it isn’t a giant image, and style the h3 and the span that is inside it (just to add a little design detail to give some of the text a different color). All together the footer styling looks like Listing 9.38.
Listing 9.38: The initial styles for the footer.
css/main.css
/* FOOTER STYLES */
.footer {
background-color: #000;
padding: 10vh 0 15vh;
text-align: center;
}
.footer-logo img {
width: 50px;
}
.footer h3 {
color: #fff;
padding-top: 1.5em;
text-transform: uppercase;
}
.footer h3 span {
color: #aaa;
}
/* HERO STYLES */
Save and refresh, and the result should appear as in Figure 9.43.
)
Figure 9.43: The first stab at the footer is looking pretty good.
And it looks... not too bad!
But let’s make it a little more useful and also add in the navigational links from the header. You could just copy and paste the HTML from the header, but if you added a new page you’d have to edit your navigation in two spots… we hope the mere suggestion of that is making your programmer’s itch flare up again. Since those nav links are always going to be the same in both the header and the footer, we can create a new include to include in includes (thereby fulfilling the promise from Figure 9.13—it wasn’t (just) a joke!).
){kind=link}
We don’t want to take the outer ul from Listing 9.14 since it has a header-nav class applied to it (well, you could add that in the include, then unstyle all the header styles, and then restyle to fit the footer—but that would be a lot of unnecessary work). So the content of our new include will just be the lis and the links—in other words, the content that definitely needs to be repeated.
To eliminate repetition in the links, let’s create a new file in the _includes directory and name it nav-links.html:
$ touch _includes/nav-links.html
Then cut the lis and links out of the .header-nav and paste them into the new include, as shown in Listing 9.39.
Listing 9.39: We’ve cut and pasted in the lis and links.
_includes/nav-links.html
<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>
With the code in Listing 9.39, we can replace the links in the header file with a Liquid tag, as shown in Listing 9.40.
Listing 9.40: Updating the header with an include and a second class.
_includes/header.html
<ul class="header-nav nav-links">
{% include nav-links.html %}
</ul>
Note that we’ve also added a .nav-links class in Listing 9.40 so we can add styling to the links that will be shared between the header and footer. Before, we were targeting and styling the links using the class .header-nav (introduced in Listing 9.14), but now that the links are going to be in multiple places, that isn’t a good name to use to target the styling common to both the header and the footer.
Now that we’ve factored the nav links into a separate include, let’s add them to the navigation section in the footer. In order to allow footer-specific styling, we’ll also add a footer-nav class (in analogy with the header’s header-nav class), as well as the general nav-links class added in Listing 9.40. The result appears in Listing 9.41.
Listing 9.41: The new Liquid tag to load the links in the footer.
_includes/footer.html
<footer class="footer">
<a class="footer-logo" href="/">
<img src="/images/logo.png" alt="Learn Enough"/>
</a>
<nav>
<ul class="footer-nav nav-links">
{% include nav-links.html %}
</ul>
</nav>
<h3>Learn Enough <span>to Be Dangerous</span></h3>
</footer>
Now let’s add some styling. First, we should move some of the styles that before were defined on .header-nav a over to .nav-links a, and change the class that is targeting the :hover and :active states from .header-nav to .nav-link, as in Listing 9.42.
Listing 9.42: Moving link styling into a new .nav-links class.
css/main.css
.header-nav a {
color: #fff;
}
.nav-links a {
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a:active {
color: #ed6e2f;
}
Again, the idea is that we want navigational links to look similar between the header and footer, and then for any changes that are specific to one location or the other by targeting the links using either the .header-nav or the .footer-nav class.
Finally, we’ll add footer-specific styles, as shown in Listing 9.43.
Listing 9.43: New styling for footer navigation and links.
css/main.css
.footer-nav li {
display: inline-block;
margin: 2em 1em 0;
}
.footer-nav a {
color: #ccc;
}
When you save and refresh, you’ll have a nice header and footer, both pulling their navigational links from the same place (Figure 9.44).
)
Figure 9.44: Styled header and footer with nav links from an include.
If you want to double-check and sync up all your styles, Listing 9.44 has the current state of the CSS declarations for the site.
Listing 9.44: The full header and footer styles.
css/main.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption, footer,
header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
strong, b {
font-weight: bold;
}
em, i {
font-style: italic;
}
a img {
border: none;
}
/* END RESET*/
/* GLOBAL STYLES */
html {
box-shadow: 0 0 0 30px #000 inset;
padding: 0 30px;
}
body {
font-family: helvetica, arial, sans;
}
h1 {
font-size: 7vw;
margin-top: 0;
}
a {
color: #f00;
}
h2 ~ p {
font-size: 0.8em;
font-style: italic;
margin: 1em auto 0;
max-width: 70%;
text-align: center;
}
/* HEADER STYLES */
.header {
background-color: #000;
color: #fff;
position: fixed;
width: 100%;
z-index: 20;
}
.header-logo {
background-color: #000;
box-sizing: border-box;
display: block;
height: 10vh;
left: -30px;
padding-top: 10px;
position: relative;
text-align: center;
width: 10vh;
}
.header-logo:hover,
.header-logo:active {
background-color: #ed6e2f;
}
.header-logo img {
width: 4.3vh;
}
.header-nav {
float: right;
padding: 5.5vh 60px 0 0;
}
.header-nav > li {
display: inline-block;
margin-left: 1em;
}
.header-nav > li ~ li {
border-left: 1px solid rgba(255, 255, 255, 0.3);
padding-left: 1em;
}
.header-nav a {
color: #fff;
}
.nav-links a {
font-size: 0.8rem;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
.nav-links a:hover,
.nav-links a:active {
color: #ed6e2f;
}
.header-nav > li:first-child a {
color: #ed6e2f;
}
.header-nav > li:first-child a:hover {
color: #fff;
}
/* FOOTER STYLES */
.footer {
background-color: #000;
padding: 10vh 0 15vh;
text-align: center;
}
.footer-logo img {
width: 50px;
}
.footer h3 {
color: #fff;
padding-top: 1.5em;
text-transform: uppercase;
}
.footer h3 span {
color: #aaa;
}
.footer-nav li {
display: inline-block;
margin: 2em 1em 0;
}
.footer-nav a {
color: #ccc;
}
/* HERO STYLES */
.full-hero {
background-color: #c7dbfc;
height: 50vh;
}
/* SOCIAL STYLES */
.social-list {
list-style: none;
padding: 0;
text-align: center;
}
.social-link {
background: rgba(150, 150, 150, 0.5);
border-radius: 99px;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-family: helvetica, arial, sans;
font-size: 1rem;
font-weight: bold;
height: 2.5em;
line-height: 1;
padding-top: 0.85em;
text-align: center;
text-decoration: none;
vertical-align: middle;
width: 2.5em;
}
.social-list > li {
display: inline-block;
margin: 0 0.5em;
}
/* BIO STYLES */
.bio-wrapper {
font-size: 24px;
margin: auto;
max-width: 960px;
overflow: hidden;
}
.bio-box {
border: 1px solid black;
box-sizing: border-box;
float: left;
font-size: 1rem;
margin: 40px 1% 0;
padding: 2%;
width: 23%;
}
.bio-box h3 {
color: #fff;
font-size: 1.5em;
margin: -40px 0 1em;
text-align: center;
}
.bio-box img {
width: 100%;
}
.bio-box .social-link {
display: block;
margin: 2em 0 1em;
}
.bio-copy {
font-size: 1em;
}
.bio-copy a {
color: green;
}
Finally, in case you haven’t been doing your own Git commits and deploys, now would be a good time to do one:
$ git add -A $ git commit -m "Finish initial layout"
You’ll discover that GitHub Pages is fully Jekyll-aware, and automatically generates and displays the site based on the contents of the repository—free static site hosting!
9.10.1 Exercise
(challenging) In the same manner that we just made the header links modular, first create a new include that makes the social links in the hero into an include that can be inserted into other places on the site. Then use the correct include tag to put it back where it originally was, and also a second include that builds the social links into a new ul in the footer.