Using Responsive Frameworks

Quick reference

• 00:05 Okay, so I've given you a very quick introduction to responsive design.
• 00:08 We went real quick over all of this stuff.
• 00:10 And, like I said, you could spend a lot of time learning the ins and
• 00:13 out of all of this stuff.
• 00:14 And it's really beyond the scope of this course to get into any more details.
• 00:17 But before we end the course, I wanna talk about one more thing.
• 00:20 And I wanna start to talk about that in this video, and
• 00:23 that is using different frameworks for responsive designs.
• 00:26 Creating your own responsive design is tough, right?
• 00:30 It's pretty hard.
• 00:30 It didn't seem too bad in the last couple of videos but there's a lot going on here.
• 00:34 Creating your own grid, setting up images to do all the different things.
• 00:38 It's really kind of hard.
• 00:39 And these days, you just don't have to do it.
• 00:41 You can use a framework that somebody else has already built and already tested.
• 00:45 And that's what I always do.
• 00:46 I never do my own responsive stuff anymore, I just use a framework.
• 00:49 And I recommend that you do that at least until you get a lot more experience in
• 00:52 this to try and do it yourself.
• 00:53 So that begs the question, what framework should you use?
• 00:57 And, like I said, there's a bunch of them out there, but by and
• 00:59 far the most popular one is called Bootstrap, and it's at getbootstrap.com.
• 01:04 And you may have heard of this, you probably have heard of this.
• 01:06 Bootstrap, it was originally built by some guys at Twitter.
• 01:10 And it was sort of a pet project they were doing in their free time and
• 01:13 it became very popular.
• 01:15 So they spun it out of Twitter and I think those guys quit.
• 01:17 I think they quit Twitter and I think they just work on Bootstrap full time.
• 01:20 So basically what this is, you can come to getbootstrap, and
• 01:23 just go the the Getting Started section.
• 01:25 And you can sort of read through here and learn how to get started to use it.
• 01:29 I'll show you in the next episode how to set it all up.
• 01:31 But basically you just download some files,
• 01:34 you upload those files into your directory structure here.
• 01:38 And then it's just as easy as using different things.
• 01:42 So, what can you do?
• 01:43 What different things?
• 01:44 Well, if we go up to Components, you can see,
• 01:46 just start to scroll through this list, all the different things you can do.
• 01:49 So navbars, for instance.
• 01:51 We have this header thing that isn't looking very good.
• 01:54 Well, what about this one right here?
• 01:57 Dropdown boxes, search things.
• 01:59 To use this navbar, all you have to do once you've installed Bootstrap,
• 02:02 is click copy and what that does is it copies all of this stuff and you just
• 02:06 bring it over to your page or Ctrl+V and paste it all in, and boom, now it works.
• 02:11 Now, you may have to tweak it a little bit.
• 02:13 Obviously, you will if you want.
• 02:14 You don't want it to say Brand, you wanted to say something else, you have to
• 02:18 customize each dropdowns in these links to point wherever you want them to.
• 02:21 But it's just that easy, if you want to do forms, there's forms.
• 02:25 If you want to do pagination, we talked about earlier, that's really cool looking
• 02:29 pagination, it looks a lot better than the stuff we did earlier, right?
• 02:32 All you've to do is copy this and paste.
• 02:34 Labels, thumbnails, just look in there.
• 02:37 We sorta did this ourselves when we put borders around our images,
• 02:40 but these look better.
• 02:41 And if you come back here to the very top.
• 02:44 You can also click on CSS, there's other stuff here,
• 02:46 there's more buttons, all these cool looking buttons and stuff.
• 02:49 But if you come back here, click on the CSS one, you can come down here and
• 02:52 you can see it's already mobile ready.
• 02:55 It's already got the view port that you can use.
• 02:57 And it's got it's own grid system and here you can read about their grid system,
• 03:01 here it says 12 columns just like what we did with our 12 columns.
• 03:05 And you can see here's the media stuff that we talked
• 03:07 about in the last couple of videos.
• 03:09 And here's their column system, you can they've got it labeled as col-md-1,
• 03:14 2, 3, 4,5.
• 03:15 We did ours, col-1, col-2, whatever, but it's very similar.
• 03:18 And you can see fluid container.
• 03:20 You can read about examples from mobile.
• 03:23 Just all kinds of great stuff right out of the box, very, very easy to install, very,
• 03:27 very easy to use.
• 03:29 Mobile ready, by default.
• 03:31 You don't even have to do anything and its just, it looks great on cellphones and
• 03:34 they've got all the media queries, right?
• 03:37 They've got all the different permutations for all kinds of different screens and
• 03:41 all kinds of stuff.
• 03:43 So in the next video, I'm gonna show you how to set this up.
• 03:45 And in the video after that,
• 03:46 I'm gonna show you how to use, basic usage which is very, very easy.
• 03:50 In the video after that, I'm gonna show you how to actually modify Bootstrap to
• 03:54 make it look exactly how you want.
• 03:56 Since you now know basic CSS from taking this course,
• 03:59 it's very easy to modify this with your own CSS and tweak things here and
• 04:03 there to make it look just how you want it but at the same time still getting
• 04:08 the professionalism of the underlying framework.
• 04:11 So very exciting, very fun.
• 04:13 I really like using Bootstrap.
• 04:15 I hope that comes across in these videos and
• 04:16 I hope you get excited cuz this is really cool.

Lesson notes are only available for subscribers.