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