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 by looking into one of its most powerful and useful features. We're going to look at its grid layout system.
0:10 This is something people often get wrong when they're doing web development, and Bootstrap makes super easy for you.
0:16 So, that's a really nice place to be. Something easy that used to be really hard. Alright, so here is the Talk Python Training website circa 2018.
0:27 Probably still looks like this, but maybe it's changed at some point when you're watching. But the principle is the same, I'm sure.
0:34 Here is how things look on a standard laptop or desktop browser. Alright, so you scroll down. This is in the middle.
0:42 We've got this part broken into thirds with an image and then below it, details about it. Here we have these sort of three...
0:50 What, what's the value proposition? You can learn online. You don't have to get a subscription, those sorts of things.
0:56 These are broken up into thirds as well. Here's a part that, maybe it's hard to tell, but it's broken up into halves. There's this half and that half.
1:05 The student testimonials, again, halves here halves here, and so on. So this is how it looks on a desktop, but what if we make it skinnier?
1:15 The top part, not so interesting, so I'll pull up one of these thirds. So we make it smaller. Notice the images automatically get smaller.
1:26 That's not technically the grid layout, but that's inter played with Bootstrap and the grid layout. A little bit smaller and eventually it says
1:32 you know, this is too small to make sense as a grid, so maybe you're on some kind of phone. So now, if we go to the site
1:38 maybe that's even a little skinny for a phone. Now we're on the site. Here's maybe how it looks on as standard iPhone
1:44 or Android or something like that. Notice how these wrap super nicely, and they break instead of being broken into horizontal slices
1:52 they wrap, basically become more sort of vertically stacked elements, and that happens throughout the site.
1:59 And this happens incredibly easy for us using the Bootstrap grid, so we'll talk about how that works. Also, we're not going to cover it in the course
2:08 but it's an easy feature. Notice up here we've got this navigation and as you get smaller, it's going to run out of space
2:14 for, say, pricing and business and podcasts and eventually, notice some of the elements went away because instead of totally breaking that
2:23 we say, you're only allowed to how the extra sort of secondary items in the Nav when there's enough room, and if it gets too small, then put them-
2:32 You know, take them away, put them back like that. If it gets really small, then there's no room for the Nav, so make that a dropdown menu.
2:38 So all sorts of cool stuff for Bootstrap. Somewhat on the same principle, but the main thing we're going to focus right now is this grid layout.

Talk Python's Mastodon Michael Kennedy's Mastodon