At this point in the evolution of the web,

it's widely agreed that we need to build for a vast array of screen sizes.

There's simply no getting around it.

We've got phones, and tablets, and Laptops, and desktops,

and giant conference room monitors, that we have to account for.

There are so many different sizes a user screen might be,

that there's no use in trying to design for each individually.

What we can do instead is design around our content.

We can make our work beautiful and easy to use,

no matter the size of the screen it's viewed on.

Responsive web design could be an entire course in and of itself.

In fact, Treehouse has several courses that discuss responsive

techniques in detail.

I'll leave links to some of them in the teacher's notes.

For now, we'll touch on just a few really important points here,

that should be enough to get you started.

An integral part of a responsive layout is a flexible grid.

Grids are broken up into columns, usually twelve.

And our content then fills as many of those columns as we need it to.

This helps to maintain consistency,

in the way everything is spaced throughout a site.

The widths of our columns need to be defined using a relative width.

Rather then a fixed unit like pixels.

That way our columns, and

therefore our content, will be able to scale with the width of the viewport.

There is a wealth of CSS frameworks out there.

And the responsive grid is possibly the most common feature among them.

Let's head back over to the Skelton website and

check out what it has to say about their grid.

So here we can se that everything should be wrapped in an element, likely a div or

a section, which has the container class.

From there, content is broken up into rows.

Again, there's a class to go along with this sort of inner container element.

Each row gets broken up into twelve columns, but

the combination of those columns is up to the developer of the site.

The available class names make it easy to write out in English,

how much space should be taken up.

But the total should always add up to 12.

Skeleton comes with a little demo site, that we can play around with.

Using the developer tools on it,

reveals how we might use those grade classes in action.