Chapter 2. Sample RWD Setup for Client-Side Development

To test and learn RWD and RESS concepts, we will build a demo website. In this chapter we are going to focus on client-side design and development. We will go through the process of implementing a simple design with practical application of RWD concepts such as fluid images, responsive grids, and media queries.

A sample responsive homepage design we are going to build in this chapter

During the process, we are going to look closer at HTML and CSS constructs often used to build responsive web pages. To implement our design, we will employ the often-used frontend framework, Twitter's Bootstrap, based on 12 fluid columns. We don't need most of its components (we are only going to use the responsive navigation bar), but we will seize the opportunity to get acquainted with this useful tool. Our design uses variable column count depending on the screen size. To achieve it, we may use the Gridpak tool, which lets us create complex variable column grids with an intuitive interface. Then we will learn how to integrate the two, the Gridpak grid and Bootstrap. Finally, we will add custom classes to format the document and fine tune the page look on various screen sizes by adjusting font sizes and fixing issues that might crop up.