Building data-driven web apps with Flask 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
Before we get into the grid layout
0:01
and working with it in Bootstrap
0:03
I think it's good to see it in action.
0:05
And what better place to see it in action
0:07
than the Talk Python Training site.
0:08
So here's Talk Python Training, circa 2019.
0:13
And let's look at a couple of things.
0:15
So you can see here, some interesting grid stuff happening.
0:17
It's kind of like a table, with three columns.
0:20
But it's not a table.
0:21
Tables are bad ideas in web design
0:24
unless you actually have tabular data.
0:26
So here's something that looks like
0:27
a table with three columns
0:29
but actually is a grid layout.
0:31
Here you can see some of the selling points of the courses
0:34
learn online, lifetime access and so on.
0:36
That's also this sort of three column thing going on.
0:40
If we change the size of our viewport here
0:42
then as we shrink this, you'll see that eventually
0:44
it will get small enough and that happens pretty soon
0:47
maybe too soon, but that's okay.
0:49
Eventually the layout will decide
0:51
this is too compact to be columns
0:54
and it should instead break into three vertical slices.
0:57
So as we shrink this here, you'll see
1:00
it's done that already.
1:01
As you get it smaller, the images actually shrink.
1:04
Something like this.
1:05
So now, we're in this phone mode here
1:07
where these no longer are columns
1:10
but have been wrapped into sort of vertical slices.
1:12
The same thing happens down here.
1:14
Right now it's like this, but eventually
1:15
as it gets a little bit bigger
1:17
trying to keep it in line here
1:21
It's big enough it decides
1:22
oh we have room to put these side by side.
1:24
So that's the grid layout in action right there.
1:28
Now another thing that's pretty interesting
1:30
although I did just notice at just the right resolution
1:32
there's a little bit of a glitch.
1:33
Up here, notice that we've got a bunch of stuff.
1:36
We make it full size, we've got course, apps
1:38
pricing, business, and so on.
1:40
But as it gets smaller, we might not have room
1:43
for all of these things, so we also have some responsive design going on here.
1:45
Notice that the podcast goes away
1:48
as soon as we start to run out of space.
1:50
My resolution is pretty small
1:51
so that happens pretty quick
1:52
even though it's wide on my screen.
1:55
So if I keep going smaller and smaller
1:56
there's that little glitch
1:57
and before it gets totally small
2:00
it decides eventually, hey there's not enough room here
2:02
so we're going to turn that to this drop down menu, like so.
2:05
Now, that is a Bootstrap responsive layout thing
2:08
nothing to do with the grid.
2:09
Also, you might have noticed down here
2:11
as we change the size of these things
2:14
the actual images themselves were changing size.
2:17
Also not part of the grid layout
2:18
but Bootstrap's interaction with the grid layout.
2:22
So, if we look at this, for example
2:26
you can see this has the two classes
2:28
image and image-responsive.
2:31
That tells Bootstrap it should basically
2:33
take up as much space as it can in the container
2:35
and it'll be shrunk down as it interacts with the grid.
2:38
Right, so you can see as it gets bigger and smaller
2:41
that's the responsive bit.
2:43
Okay, so this is the grid layout.
2:44
It's really, really nice for putting together sites
2:47
that look good on desktops, but also on mobile browsers
2:50
and various resolutions.
