Before we get our hands on the code, let's talk about the mobile-first approach that will drive our decision on writing part of the blog style rules.

Mobile-first is one of the buzzwords in the web design community. Mobile-first is a new way of thinking on building websites of today, which also guides the pattern to build websites that are optimized for mobile use. As mentioned in Chapter 1, Responsive Web Design, mobile users are growing and desktop is no longer the main platform where users can access the web.

The mobile-first concept drives us to think and prioritize mobile use on building the website blocks, including how we compose style rules and media queries. In addition, adopting mobile-first thinking, as Brad Frost demonstrated in his blog post (http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/), allows producing leaner codes than the other way around (desktop to mobile). Herein, we will first optimize and address the blog for mobile...