Book Image

Bootstrap Site Blueprints Volume II

By : Matt Lambert
Book Image

Bootstrap Site Blueprints Volume II

By: Matt Lambert

Overview of this book

Bootstrap is the most popular open source project on GitHub today. With a little bit of know-how, this massively popular CSS framework can leveraged for any type of complex web application or website. Bootstrap Site Blueprints Volume II will teach you to build these types of projects in an easy-to-understand fashion. The key to any complex Bootstrap project is a strong development foundation for your project. The book will first teach you how to build a Bootstrap development environment using Harp.js, Node, and Less. In the next chapters, we’ll build on this foundation by creating restaurant and mobile-first aggregator projects. Once you’re warmed up, we’ll move on to more complex projects such as a wiki, a new magazine, a dashboard, and finally a social networking website. Whether you are brand new to Bootstrap or a seasoned expert, this book will provide you with the skills you need to successfully create a number of popular web applications and websites.
Table of Contents (14 chapters)
Bootstrap Site Blueprints Volume II
Credits
About the Author
About the Reviewer
www.PacktPub.com
Preface
Index

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...