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

Coding the activity feed


The next template in the project that we're going to tackle is the activity feed. This is the page that you would see when you log in to your account. The main differences compared to the public profile are the form for posting an update and some changes to the right sidebar.

Let's see what this page will look like:

Customizing the first column

As I mentioned earlier, the first column in this template is going to be different compared to the public profile. The second left sidebar will be the one used for the remaining templates as they are all pages that are viewable by the logged-in user only. Start by creating a new file called _sidebar-left.ejs and save it to the /partial directory. The top of the sidebar, which includes the avatar and description, will remain the same. Here's the code again, or you can copy it from the first file:

<div><img src="img/main-avatar.jpg" class="main-avatar"></div>
<h2><a href="#">John Smith</a>&lt...