Building Responsive Data Visualization for the Web

Chapter 04 Designing Responsive Layouts with CSS

Building CSS responsively is the linchpin, the idea that shifts our efforts from building flexible websites to building responsive websites. This difference will become clearer as some terms are defined, but think of both fluidity and responsiveness as tools in your adaptive tool belt. Fluidity enables you to grow and shrink your content based upon its container. Responsiveness enables you to ask the container more about its attributes, and change how you handle your content. We’re the first apes to touch the monolith.

The Gist

We’re officially moving into the how of our progressive enhancement tower’s second layer: presentation. It astounds me to this day that there was a time when design lived outside of its own bubble, and was a messy, hairy, in-the-way-and-staining-everything part of web markup. You’re going to get a brief history lesson into just how design on the web came to be.

From there, you’re going to learn the programmatically way in which a browser reads CSS, and how you can query properties of the browser to then begin to target your styling in order to respond to different features. At the very end of this chapter, you’ll learn a few ways you can cut corners while prototyping, which takes you a few shuffling steps backward to those dark design ages, but first let’s establish some context.

A Brief History of CSS

Cascading Style Sheets (CSS) is a stylesheet language. It describes the look and formatting of a document ...