In the previous chapter, you learned all the pieces of the puzzle we need to develop a mobile first, progressive enhancement, responsive design web application. Mobile first is a way of thinking; for the progressive enhancement part, we used enhance.js and modernizr.js. So, we still need to know how to do the responsive part by writing a flexible grid, creating media queries, supporting flexible images, and then some.

This is the part that Foundation has already done for us. In addition, it does have some cool User Interface (UI) components. One of them is off-canvas, an awesome feature to be used on mobiles and tablets that, since I have used it, I recognize on every major website or app, Facebook included. Check out the excellent Foundation documentation for the full list of features. In this chapter, we will describe the ones that I found particularly useful.