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

Customizing the template


As in our other projects, we start by copying our boilerplate project to a new directory called chapter6. Open the _data.json file and insert the following code:

{
  "index": {
    "pageTitle": "Dashboard"
}

For this project, we're only creating one page template. Let's start by creating a file in the root of our project. For now, just leave the file blank; we'll fill it in a bit later: index.ejs.

Updating _layout.ejs

Next, let's update the _layout.ejs file in the root of our new project. The layout for this project will need a few more things that we haven't seen before. First of all, insert the following line of code to import the Google web font Roboto, which we'll be using for our dashboard:

<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>

For this project, we're going to use a third-party chart library to draw some pie charts and line graphs. I've decided to use a library called Chartist. This library...