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

The article page template


Now that we've set up the homepage, let's tackle setting up a page for a single article or wiki topic. Here's what the page we're going to build will look like:

First, create a new file called article.ejs and save it to the root of your project. If you remember, earlier in this chapter, we added this page to the _data.json file. If you name it differently, make sure that the filename matches what was entered in the _data.json file. Once you have saved the file, you may want to compile the project to ensure that everything is working correctly. It's a good idea to do a compile every so often so that you catch errors before you are done. Waiting until the very end will make it more complicated to troubleshoot compile errors if you have them.

Start off your new page template by coding a wrapping .container <div> for the entire page:

<div class="container">
  ..
</div>

The first section that we will insert into the container is the page title. This is...