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.