Building data-driven web apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Intro to grid layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's start explaining Bootstrap
0:01
by looking into one of its most
0:03
powerful and useful features.
0:06
We're going to look at its grid layout system.
0:09
This is something people often get wrong
0:11
when they're doing web development, and Bootstrap
0:14
makes super easy for you.
0:15
So, that's a really nice place to be.
0:19
Something easy that used to be really hard.
0:21
Alright, so here is the Talk Python Training website
0:24
circa 2018.
0:26
Probably still looks like this, but maybe it's
0:29
changed at some point when you're watching.
0:30
But the principle is the same, I'm sure.
0:33
Here is how things look on a standard laptop
0:36
or desktop browser.
0:37
Alright, so you scroll down.
0:39
This is in the middle.
0:41
We've got this part broken into thirds
0:43
with an image and then below it, details about it.
0:47
Here we have these sort of three...
0:49
What, what's the value proposition?
0:51
You can learn online.
0:52
You don't have to get a subscription, those sorts of things.
0:55
These are broken up into thirds as well.
0:57
Here's a part that, maybe it's hard to tell, but it's
1:00
broken up into halves.
1:02
There's this half and that half.
1:04
The student testimonials, again, halves here
1:07
halves here, and so on.
1:10
So this is how it looks on a desktop, but
1:13
what if we make it skinnier?
1:14
The top part, not so interesting, so I'll pull up
1:17
one of these thirds.
1:20
So we make it smaller.
1:21
Notice the images automatically get smaller.
1:25
That's not technically the grid layout, but
1:26
that's inter played with Bootstrap and the grid layout.
1:29
A little bit smaller and eventually it says
1:31
you know, this is too small to make sense
1:33
as a grid, so maybe you're on some kind of phone.
1:36
So now, if we go to the site
1:37
maybe that's even a little skinny for a phone.
1:40
Now we're on the site.
1:41
Here's maybe how it looks on as standard iPhone
1:43
or Android or something like that.
1:45
Notice how these wrap super nicely, and they break
1:48
instead of being broken into horizontal slices
1:51
they wrap, basically become more sort of vertically
1:56
stacked elements, and that happens throughout the site.
1:58
And this happens incredibly easy for us using
2:02
the Bootstrap grid, so we'll talk about how that works.
2:04
Also, we're not going to cover it in the course
2:07
but it's an easy feature.
2:08
Notice up here we've got this navigation
2:11
and as you get smaller, it's going to run out of space
2:13
for, say, pricing and business and podcasts
2:17
and eventually, notice some of the elements
2:19
went away because instead of totally breaking that
2:22
we say, you're only allowed to how the extra
2:25
sort of secondary items in the Nav when there's
2:29
enough room, and if it gets too small, then put them-
2:31
You know, take them away, put them back like that.
2:33
If it gets really small, then there's no room for the
2:35
Nav, so make that a dropdown menu.
2:37
So all sorts of cool stuff for Bootstrap.
2:40
Somewhat on the same principle, but the
2:42
main thing we're going to focus right now is this grid layout.
