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