Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Introduction to using Bootstrap
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Alright, let's start doing some design with Bootstrap. Now over here in our repository you can see we now have a chapter 7, and it has a final
0:08
and a start set of code. Well HTML, let's, let's not stretch it too far. Of course, these are the same now we're going to start
0:15
with final here, but we're going to get it going we're going to involve it and it'll be what we write at the end when we check it in.
0:23
So let's go ahead and open this in PyCharm now you don't really need PyCharm I mean, it is just basic HTML.
0:29
But it's a nice editor for that, as we'll see. So over here, let's just start with something I would consider kind of scary.
0:37
As a designer, not as a developer, let's say. But I open this up and I have this truly bare empty, unstyled HTML file.
0:47
And if somebody says, Michael, take this file and make it look amazing and put a cool layout on it, and stuff.
0:52
I could do it now but for a long period of time that would have been like, Whoa, I have no idea where to get started on this.
0:58
So this is, as you can see here just a pure, plain HTML file, right? It's got a head, just a title and a few basic elements here
1:07
some lorem ipsum, some empty links, stuff like that, right? So we have this and let's go ahead and make a duplicate of it just so we can compare.
1:15
And what we want to do is we want to install Bootstrap into it and there's basically two ways to do that. One, we could link to a CDN.
1:22
There's some benefits to that. I'm not a huge fan of using CDNs because if I want to do any development offline well, it's not there, right?
1:30
I've got to have access to the CDN. Say you're in a plane or a coffee shop or something like that.
1:35
Also, you're now depending on something external to you you could just as well include this in your site.
1:41
So I prefer to use like npm to install Bootstrap locally. But just to keep things simple, we're going to link to it.
1:49
So we can just go grab, install Bootstrap CDN. Coming down here and we can just copy we only need the CSS at the moment, we can use 4.3.1.
1:58
That's the latest at the moment of the recording. We could use bring in the JavaScript stuff as well
2:04
which is down here but we're just not going to need it for this example so we're not going to talk about it. So it's installed, do a little wrap here.
2:14
It's got some integrity on it you can use that or not use it, it's up to you. But here's the important part, we've got a style sheet
2:21
that links to the latest Bootstrap min. Now by dropping this in here a couple of cool things happen. We come over here and if I just refresh this page
2:29
fix your eyes on it, how's it going to look now? So much better. Yeah, sure, the body could use a little padding. But if you just go back and forth
2:40
which one of those feels modern and clean with a little more space a little more airy, a little more white space, right?
2:47
Look how tight the letters are together and stuff over here. So Bootstrap brings in a bunch of features but it automatically apply some fonts
2:55
and some other settings here. So this is looking pretty good. It's already just the act of putting Bootstrap here
3:01
has made our site a little bit better. You notice the hyperlinks are no longer treated like documents, you've read this document
3:07
don't go back to it, right? Like when how old is that philosophy? But no, no, there it is. Okay, so this looks pretty good.
3:15
The other thing that this does, adding in Bootstrap or many of these front end design frameworks is it includes what's called an Reset CSS
3:24
you might have heard that designing for the web is or can be hard and why is that? Usually the difficulty with designing in the web
3:31
is not that working with HTML and browsers is hard. But they're inconsistent. How does that looking Edge versus Firefox versus Chrome?
3:40
Chrome was getting to be a problem. It's really, has some very some sites have a lot of peculiarities that depend upon Chrome.
3:47
The problem is that if you don't explicitly set a style on, say, hyperlinks, it's up to the browser to decide what style it's going to have, right?
3:56
And if the browsers say Firefox and Chrome, for example decide that the padding on a button should be slightly different
4:04
well, then the layout's going to look different and the lineup everything's going to be a little bit different.
4:07
And you're going to have to battle that inconsistency. So how does Reset CSS fix this and Reset CSS sets every possible property
4:15
of every possible element, to something. Usually what the default of the browser would have been but by setting it explicitly
4:23
the browsers no longer guess. And that means if they differ in what they assumed the default value is, well, that goes away
4:29
because it's all now explicitly set to be the same. It doesn't solve all the problems of cross-browser different multi-browser support
4:36
but it definitely solves some of the annoying ones that you might have run into. Okay, so we've got a better site here. It looks better, obviously.
4:44
But it's also easier to design for the web now because it's had this Reset CSS that comes along with Bootstrap, applied to it.