Building Data-Driven Web Apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Intro to grid layout
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.