Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Introduction to using Bootstrap

Learn more about this course
Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's begin our exploration of Bootstrap by installing it
0:03 and just seeing what effect that has.
0:04 It's actually kind of remarkable.
0:06 So if we come over here, we now have
0:09 a Chapter 7 Bootstrap, and again
0:11 we have the starter and the final code.
0:13 The starter code is what we're starting with
0:15 and then the final code actually, is a copy
0:17 of starter right now, but will, of course
0:19 evolve into whatever we do during this part.
0:22 So we're going to break this into two sections.
0:24 We're going to play with basic HTML, CSS, things like that.
0:29 So we're going to do a little bit of bare HTML
0:31 some stuff with grids, and so on
0:33 and then we're going to go back to PyCharm, back to Pyramid
0:36 and apply that in a major way to our web app.
0:40 So, let's begin at looking at what I consider
0:42 kind of a scary page.
0:44 Not scary in the sense that the HTML is complicated.
0:47 In fact, it's as simple as it can be.
0:50 We have head, we have a title, we have a body
0:52 we have an h1, and a couple of paragraphs.
0:54 That's simple, right?
0:56 It's scary in the sense that
0:58 it's a blank slate to start from and design.
1:01 Everything has to be done.
1:02 You have to figure out the line spacing, the fonts
1:05 the colors, the color balance
1:07 the background colors, everything.
1:11 Everything you want to do, layout systems, right?
1:14 If you're going to do some some kind of grid layout.
1:16 Don't use tables by the way, that's not so good
1:18 unless it's tabular data of course.
1:20 But, to me, this looks, anyway it's hard to read
1:23 it's kind of icky. So we can do one super simple thing to get started here
1:27 that's going to make it nicer.
1:28 So let's just open this in PyCharm.
1:32 Remember file open directory on the other OS's.
1:37 Alright, here we are inside PyCharm.
1:39 As you can see from what view source was
1:41 yeah it's a simple little html page.
1:44 But what we can do is we can simply add a reference
1:48 import through style sheet Bootstrap.
1:52 So, for the moment, I'm going to use the Bootstrap CDN
1:55 I prefer to install it locally, but let's just drop
1:58 this one in here and we're using Bootstrap 3
2:03 Bootstrap 4 has been released at this point
2:05 but all the templates that Pyramid uses
2:07 and all the Cookiecutter stuff even outside
2:10 of what Pyramid does uses
2:11 to generate these sites is in Bootstrap 3.
2:14 So, here's the trade off I'm making
2:17 we could use Bootstrap 4 and talk about that
2:19 but that would mean every, well not every bit
2:22 much of the existing website would stop working
2:25 the navigation and what not, so we'd have to unravel that.
2:31 And this way, we can just build on what
2:32 the scaffolding is generating for us.
2:34 I decided less effort, less confusion, let's just
2:38 go with Bootstrap 3 for now.
2:39 If you want to upgrade to 4, that's fine
2:41 they're incompatible, so just be aware.
2:43 A lot of things about them operate differently.
2:46 It matters whether this is 3 or 4
2:48 but we're going to use 3 for now.
2:51 Alright, with this simple change, let's go back here
2:54 and I'm going to duplicate this tab
2:56 so that we have them side-by-side.
2:59 Check this out, look how much nicer
3:01 and more legible that is.
3:04 Old, new, old, new.
3:09 Bootstrap has default values for fonts, spacing, padding
3:13 colors, notice even the color of the fonts, it's a little
3:16 bit different and it's just, it's just nicer.
3:19 So just the act of putting Bootstrap here
3:21 makes our site look better.
3:23 It also has another really important purpose.
3:25 Bootstrap functions as what's called a reset CSS.
3:29 You may have heard that it's hard to write
3:32 code for the web because on different browsers
3:35 things appear differently.
3:36 Now, sometimes that's just true incompatibilities
3:39 in the browser, but a lot of times that is
3:41 browsers making different assumptions about what a
3:45 non-styled element should do.
3:48 What should the padding be on a non-styled text input?
3:51 I don't know.
3:52 But if you don't explicitly set it, it's up to the
3:54 browser to go, "I think it's this."
3:57 And sometimes those assumptions or those defaults are
4:00 different or incompatible and that can be really annoying.
4:04 So what reset CSS's do is they explicitly set every possible
4:09 style of every possible element.
4:12 That means browsers no longer get to guess
4:14 and there's more consistency.
4:15 So you get that sort of easier to design for the web
4:18 also by dropping Bootstrap in here.
4:21 That's how we get started, nice and easy.
4:23 And it's already having a positive effect
4:25 on what we're doing.