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