Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Adding to the grid
0:00 So we saw this little grid layout HTML in action here. We've got our grid layout, and now let's go and see how we define this grid layout itself.
0:13 So maybe we'll do a separate container here. Do an h2 and in PyCharm you hit tab and it'll expand stuff, that's great. So we'll call this new section
0:25 This can be starter section. So down here, the way this works is you need to have a div that is a container
0:33 and then for each row, you have a div that is a class row. Then you break your piece among these divs by partitioning the 12.
0:43 So here, 8 and 4. 4, 4, and 4. 6 and 6, so on. PyCharm has a cool zen coding feature that lets you write stuff like this more quickly.
0:53 So watch, I'll do div. Then how do you say the class in CSS? You would say, ".container" right? Then you say, "immediately contains" in CSS like this.
1:02 That's a div.row. Then what if we want to have three divs that have this class right there? We can come down here and say, "div dot that times three."
1:16 Now if I hit tab watch, boom. It's pretty awesome. So div with the container, div with a row, three things. So this will be, thing 1 thing 2, thing 3.
1:34 Now if we open this up we got thing one, thing two, and thing three. Remember these are medium, so they're going to break
1:39 at about medium size screen there. Okay, so pretty awesome. We want one more row, so we could come here div.row and maybe want div.
1:54 That multiple always needs to be 12, right? So we'll have let's say 6 little horizontal slices, like that.
2:01 Now if we look at it, you can see there's those slices. By the way, I put a CSS style in this page to make it have these little gray borders
2:08 so that they stand out. If you didn't add on that extra style and you just run it like this you would not see those pieces stand out nearly as clearly.
2:20 But the grid is still there, right? Notice the behaviors happening is just super hard to see so I of course put that in here
2:28 so it stands out in a really obvious way for you. Okay, that's really all there is to the grid. You can pretty easily use those to design the stuff
2:38 so we come look here. You can see we have a container, we have a row and then we have a column md 4. md 4, md 4, that's how we get our thirds
2:49 right there on that page; super easy. And of course, the responsive design bit just falls right into place there.
2:55 Oh, last thing on the image is worth pointing out here since I don't think we're going to talk about it anywhere else
3:01 these images have the class img and img-responsive. Those two things are what are in place to make them actually change size
3:12 to match whatever container they're in, okay? So, img and img-responsive.