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