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.