Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Grid layout in action

Login or purchase this course to watch this video and the rest of the course contents.
0:00 So let's come over here and we're going to go back to our grid_layouts.html here. Now the grid_layouts.html looks like this.
0:09 Let's actually just open it up and have a look; looks like this. Now notice these things are wrapped but as I make it a little bit larger
0:16 now they're horizontal. A little bit more, they're vertical, horizontal and so on. And out here, we have these lg. If I make it completely wide
0:25 those will be horizontal instead of vertical. So what's going on here? The way Bootstrap works is it uses 12 slices vertical slices of the screen.
0:37 Whatever this overall gray box is contained within it's going to break that up into 12 slices. Why 12, I don't know. 10 seems reasonable.
0:49 Maybe 10 was not enough. I guess because thirds is a lot easier on 12 but you have basically 12 little slices to work with.
0:58 What we can do is we can say "This part right here I would like to be 8 of the 12, or 2/3. This one will be 4/12 or just 1/3."
1:07 The other thing that we put in here is this md for medium, sm for small, and lg. We've already seen this ability when it gets too small
1:17 it'll no longer be horizontal. It'll wrap and vertically stack. The sm, md, lg talks about how soon that should happen.
1:26 Large, lg, says, "I want it to be this horizontal slice but only on large screens." As this gets just a little bit smaller
1:34 the large are going to wrap, but medium and small they're like this is at least a medium width screen
1:41 so it's fine. Go a little more, and eventually the mediums will snap. Boom, they're they go. We're still left with the small bits
1:48 and eventually if it gets sufficiently small, we get that. One thing that's nice to play with is some of the responsive design tools.
1:58 This overall is more broadly classified as responsive design. What we've seen so far over in Firefox or Chrome.
2:04 We saw the responsive grid features here but let's imagine we want to test this on different devices. We can come over here and right click
2:12 and say inspect element and click on that little thing right there. Or we could just hit command option m. Take your pick.
2:22 Now we have what you might think of as a little embedded phone type of thing here. Notice I can scroll in it
2:28 and everything's looking really quite good. Got a little menu, you can turn it sideways see how things would look as if it were sideways and so on.
2:36 Let's put it vertical. How does this look on an iPhone 6 Plus? A little wider screen, okay that's good. How about on a Google Nexus 7?
2:47 That's wider, right? That's nice, so what else? Samsung Galaxy 7 looks like this. That's really nice isn't it
2:56 so this is a great little tool for testing your design on different devices when you're working with these responsive grids.
3:05 Instead of always trying to resize your browser you're like, how exactly would it look on this particular device? Well, you can go pick it right there.

Talk Python's Mastodon Michael Kennedy's Mastodon