Excerpt
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.
Try it
-
Exercise One (Easy)
Go back to the previous chapter’s final product and add some responsive breakpoints where content begins to break. You can download the code from the repository. There should be (at least) two obvious breakpoints.
A sample solution is also given in the repository.
-
Exercise Two (Intermediate)
Brush up on your CSS by building out the results list from the Cocktail Guide discussed in the chapter. Designs for The Cocktail Guide can be found here.
A sample solution is also given in the repository.
-
Exercise Three (Hard)
Download the sample markup for the Cocktail Guide from the repository and convert it to use a 12-column grid.
Stuck? Maybe it isn’t actually possible...