Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Bootstrap themes
Login or
purchase this course
to watch this video and the rest of the course contents.
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:08
Mostly they're open source and you just download 'em. CSS, HTML, Javascript. So over here, one place to start is Start Bootstrap at startbootstrap.com.
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.