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.