Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Adding to the grid
Login or
purchase this course
to watch this video and the rest of the course contents.
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.