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

Chapter 3. Mobile First Bootstrap

Being the seasoned developer you are, you probably know that Bootstrap is actually a mobile first CSS framework. Up until now, we haven't focused that much on the mobile first philosophy. However, that will change in this chapter, as I teach you how to build a mobile first aggregator website template. Along with taking the mobile first approach for the first time, I'll cover using some custom JavaScript to improve the UI and use a flat Google material inspired design.

First of all, let's take a look at what the mobile website will look like when completed:

Let's also take a look at what the desktop version of this project will look like:

As you can see in the preceding screenshot, the layout is going to change depending on our viewport size. I've optimized the mobile layout to make sure it's easy to use on a phone or tablet. This is done through the use of buttons and text links that are easy to touch. We also aren't relying on any hover states for our links...