Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Bootstrap themes
0:00 Now it's time for the grand finale. And we've seen a few of the building blocks of Bootstrap and I told you that Bootstrap was the most popular
0:08 and that had benefits and here they are. So the idea is we can start with this basic page here Yuck! You know it's completely un-styled
0:20 we can just drop Bootstrap in there and that actually is a really nice improvement. However, this is still mostly a blank canvas
0:29 and if you're new to design, this is really hard. It's like, what do I do now? I've seen some great landing pages and some other designs
0:37 but it's a long ways from just making the fonts look better. So what we can do is we can apply a Bootstrap theme to this
0:44 and go from basic to really, really awesome with almost no work on our part. You need to understand the grid, a few other basic concepts
0:53 and just put your content in there, put it into a layout template Chameleon and you're off and running. So where do these themes come from?
1:01 Let me just take you on a tour of some places that are pretty good for finding these themes and where you can get them.
1:18 And this has a list of all sorts of popular ones. This one should look familiar, right? This one's nice down here, this one is really cool.
1:27 So I pulled up some of these. Here is this one that I showed you on the animation previously. That looks super nice, doesn't it?
1:37 Come in here, it's got, you know, here's your button. It's got your elements broken in to pieces here
1:44 it's got these nice designs where you hover over them. I like these little animations as stuff comes in. So I actually use this theme for something.
1:55 I used it for freemongodbcourse.com So freemongodbcourse.com is just like a special dedicated page for my free MongoDB course.
2:05 No surprise there, but look at this. Alright so, new background image, similar button. Come in, here's your four elements in a Bootstrap grid
2:13 you know split it into three's. Come down here, you've got this little call to action little video, these things you hover over.
2:22 It was really easy for me to take that theme and make this page. Like a day, maybe. So, really, really nice easy way to make your stuff stand out.
2:35 So you can grab this and go and download it. But all this stuff that's right here, you just go and download it and adapt it to your page.
2:46 Alright let's look at some more. Stylish portfolio, this is a really nice looking one. Alright, you can see some of the similarities coming along
2:53 but these background images that are really bold are awesome, by the way if you need awesome and bold background images, Unsplash is an amazing site
3:02 that gives away free, hundred percent royalty free credit-free, do-whatever-you-want-with-'em images. So you come down here and find some great ones
3:13 and you want stuff to do with servers, right some web servers, some actual servers, but here they are you can grab 'em, download 'em, beautiful.
3:20 So if you need bold pictures, Unsplash. Another thing you might need is some kind of admin dashboard, most sites won't need this
3:29 but if you're building some sort of dashboard application there's some really good stuff, like look how cool this is.
3:34 See these little navigational cards, these smart interactive graphs that you can interact with here. So we can go and look at the different charts
3:44 we can look at tables, we can say I want to go to the cards. Here's all the different cards, all kinds of stuff.
3:51 And you can even have, example of a really pretty login page. Things like that. So this is a theme that you can get
3:59 over here, here's another super simple one. You might think, Michael there's no theme here but actually there's a cool little side
4:06 hidden sort of a minimalist one. WrapBootstrap is another place that I like. WrapBootstrap mostly has paid themes
4:16 but when I say paid, I don't mean an arm and a leg paid. Look at this $35, $25, $28, $20... $18
4:26 If you can go from zero to nearly fully-designed awesome site for $18, you're doing well. So, here's a few I chose out of that site.
4:35 Check out this dashboard. Holy moly this is cool. So we can go over here and get all sorts of cool graph stuff, again if you're building
4:43 dashboard-y type stuff, come down here and it'll give you graphs and things about countries. Let's see there's just tons and tons of widgets.
4:53 They've got this sort of Outlook email view. I love it. Come over here to tables, let's see, forms. Want to have a wizard, look at that little wizard.
5:03 That's beautiful. It's got its own grid its own buttons, and so on. So again, if you're building some kind of dashboard-based
5:10 thing, this is really quite amazing. Here's another one that I like this has lots of little animations that fly in.
5:20 You can see the grid stuff at work again here. All the stuff fades in as you go down really, really wonderful.
5:30 So that's it, that's just a few of the themes I went through on StartBootstrap and WrapBootstrap and pulled 'em out because they stood out to me
5:36 and here again is an example of how I took one of them and sort of adapted it for something that was pretty simple
5:44 but needed to be well-done on design. We're not going to go into applying these themes we're just going to design some stuff from scratch based
5:54 on our starter projects that we already have. But, once you become familiar working with the templates and Bootstrap, you should be able
6:03 to integrate these pretty easily.