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