1
00:00:00,690 --> 00:00:02,830
At this point in the evolution of the web,

2
00:00:02,830 --> 00:00:07,860
it's widely agreed that we need to
build for a vast array of screen sizes.

3
00:00:07,860 --> 00:00:10,290
There's simply no getting around it.

4
00:00:10,290 --> 00:00:13,995
We've got phones, and tablets,
and Laptops, and desktops,

5
00:00:13,995 --> 00:00:18,115
and giant conference room monitors,
that we have to account for.

6
00:00:18,115 --> 00:00:21,531
There are so many different
sizes a user screen might be,

7
00:00:21,531 --> 00:00:25,387
that there's no use in trying
to design for each individually.

8
00:00:25,387 --> 00:00:29,675
What we can do instead is
design around our content.

9
00:00:29,675 --> 00:00:32,405
We can make our work beautiful and
easy to use,

10
00:00:32,405 --> 00:00:34,375
no matter the size of
the screen it's viewed on.

11
00:00:35,450 --> 00:00:39,820
Responsive web design could be
an entire course in and of itself.

12
00:00:39,820 --> 00:00:43,030
In fact, Treehouse has several
courses that discuss responsive

13
00:00:43,030 --> 00:00:44,850
techniques in detail.

14
00:00:44,850 --> 00:00:47,480
I'll leave links to some of
them in the teacher's notes.

15
00:00:47,480 --> 00:00:51,610
For now, we'll touch on just a few
really important points here,

16
00:00:51,610 --> 00:00:53,000
that should be enough to get you started.

17
00:00:55,280 --> 00:00:59,860
An integral part of a responsive
layout is a flexible grid.

18
00:00:59,860 --> 00:01:03,500
Grids are broken up into columns,
usually twelve.

19
00:01:03,500 --> 00:01:08,060
And our content then fills as many
of those columns as we need it to.

20
00:01:08,060 --> 00:01:10,040
This helps to maintain consistency,

21
00:01:10,040 --> 00:01:12,830
in the way everything is
spaced throughout a site.

22
00:01:12,830 --> 00:01:17,380
The widths of our columns need to
be defined using a relative width.

23
00:01:17,380 --> 00:01:19,860
Rather then a fixed unit like pixels.

24
00:01:19,860 --> 00:01:21,650
That way our columns, and

25
00:01:21,650 --> 00:01:26,270
therefore our content, will be able to
scale with the width of the viewport.

26
00:01:26,270 --> 00:01:28,590
There is a wealth of CSS
frameworks out there.

27
00:01:28,590 --> 00:01:33,490
And the responsive grid is possibly
the most common feature among them.

28
00:01:33,490 --> 00:01:36,010
Let's head back over to
the Skelton website and

29
00:01:36,010 --> 00:01:38,180
check out what it has to
say about their grid.

30
00:01:40,510 --> 00:01:45,150
So here we can se that everything should
be wrapped in an element, likely a div or

31
00:01:45,150 --> 00:01:48,670
a section, which has the container class.

32
00:01:48,670 --> 00:01:52,000
From there,
content is broken up into rows.

33
00:01:52,000 --> 00:01:56,730
Again, there's a class to go along with
this sort of inner container element.

34
00:01:56,730 --> 00:01:59,710
Each row gets broken up
into twelve columns, but

35
00:01:59,710 --> 00:02:04,760
the combination of those columns is
up to the developer of the site.

36
00:02:04,760 --> 00:02:08,498
The available class names make
it easy to write out in English,

37
00:02:08,498 --> 00:02:10,550
how much space should be taken up.

38
00:02:10,550 --> 00:02:14,020
But the total should always add up to 12.

39
00:02:14,020 --> 00:02:18,510
Skeleton comes with a little demo site,
that we can play around with.

40
00:02:20,710 --> 00:02:22,454
Using the developer tools on it,

41
00:02:22,454 --> 00:02:25,390
reveals how we might use those
grade classes in action.