Updating the header and footer
Now that our Less variables are ready to go, let's move on to updating our template partials. At this point, we'll set up a new header and footer. We'll also create a couple of more placeholder files for sidebars, which will be added a little later. For now, create the following blank files for later use:
_nav-modal.ejs
(if you haven't already)_sidebar.ejs
_sidebar-search.ejs
As explained earlier, the nav
modal will be our primary navigation component. The sidebar partial will be used on almost every page, so I've broken it down into a partial. Thus, it can be easily edited. Our search results page will have a different sidebar, so a partial has been created for that as well.
Coding the header
As we've done in a past project, we're not going to use the default Bootstrap header here. We're going to use the basic grid, the inline list component, and some wrapper classes to create a custom header. The header will be divided into two sections. The first will be...