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
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.