Building Data-Driven Web Apps with Pyramid 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
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.