Grid Systems and Skeleton

When we have a display device larger than a phone, we often want to switch to a different layout, with different columns and such. For example, we might have a nav bar on the left and a twitter feed to the right in addition to a wide column of main content in the center. We might even have multiple columns of content. To make things neat and orderly, we often have a layout based on a grid. (Typically, you'll see the grid based on 960px, not because that amount matches any device size, but because 960 is divisible in lots of ways.)

For an idea of the theory, please read the Mozilla Developer Network article on grids Fair warning, though, it is long. Stop when you get to "the implicit and explicit grid". Our goal is to learn the basic concept and some of the techniques, but not every detail.

You will use a grid in the quizzes assignment.

Skeleton¶

FYI, in this website, I'm using Skeleton which I like a lot because it's simple and well-documented. However, I acknowledge that many people like Bootstrap, and you're welcome to use that, too. Learning about Skeleton is optional.

The MDN article used to mention both Skeleton and Bootstrap; but it's been revised and no longer mentions either. We'll spend very little time on either of them.