Responsive Techniques

At this point in the evolution of the web, 0:00 it's widely agreed that we need to build for a vast array of screen sizes. 0:02 There's simply no getting around it. 0:07 We've got phones, and tablets, and Laptops, and desktops, 0:10 and giant conference room monitors, that we have to account for. 0:13 There are so many different sizes a user screen might be, 0:18 that there's no use in trying to design for each individually. 0:21 What we can do instead is design around our content. 0:25 We can make our work beautiful and easy to use, 0:29 no matter the size of the screen it's viewed on. 0:32 Responsive web design could be an entire course in and of itself. 0:35 In fact, Treehouse has several courses that discuss responsive 0:39 techniques in detail. 0:43 I'll leave links to some of them in the teacher's notes. 0:44 For now, we'll touch on just a few really important points here, 0:47 that should be enough to get you started. 0:51 An integral part of a responsive layout is a flexible grid. 0:55 Grids are broken up into columns, usually twelve. 0:59 And our content then fills as many of those columns as we need it to. 1:03 This helps to maintain consistency, 1:08 in the way everything is spaced throughout a site. 1:10 The widths of our columns need to be defined using a relative width. 1:12 Rather then a fixed unit like pixels. 1:17 That way our columns, and 1:19 therefore our content, will be able to scale with the width of the viewport. 1:21 There is a wealth of CSS frameworks out there. 1:26 And the responsive grid is possibly the most common feature among them. 1:28 Let's head back over to the Skelton website and 1:33 check out what it has to say about their grid. 1:36 So here we can se that everything should be wrapped in an element, likely a div or 1:40 a section, which has the container class. 1:45 From there, content is broken up into rows. 1:48 Again, there's a class to go along with this sort of inner container element. 1:52 Each row gets broken up into twelve columns, but 1:56 the combination of those columns is up to the developer of the site. 1:59 The available class names make it easy to write out in English, 2:04 how much space should be taken up. 2:08 But the total should always add up to 12. 2:10 Skeleton comes with a little demo site, that we can play around with. 2:14 Using the developer tools on it, 2:20 reveals how we might use those grade classes in action. 2:22