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