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.
0:05
We've got our grid layout, and now let's go and see
0:08
how we define this grid layout itself.
0:12
So maybe we'll do a separate container here.
0:15
Do an h2 and in PyCharm you hit tab and
0:17
it'll expand stuff, that's great.
0:19
So we'll call this new section
0:24
This can be starter section.
0:27
So down here, the way this works
0:29
is you need to have a div that is a container
0:32
and then for each row, you have a div that is a class row.
0:36
Then you break your piece among these divs
0:39
by partitioning the 12.
0:42
So here, 8 and 4. 4, 4, and 4.
0:45
6 and 6, so on.
0:46
PyCharm has a cool zen coding feature
0:49
that lets you write stuff like this more quickly.
0:52
So watch, I'll do div.
0:53
Then how do you say the class in CSS?
0:55
You would say, ".container" right?
0:57
Then you say, "immediately contains" in CSS like this.
1:01
That's a div.row.
1:04
Then what if we want to have three divs
1:07
that have this class right there?
1:12
We can come down here and say, "div dot that times three."
1:15
Now if I hit tab watch, boom.
1:18
It's pretty awesome. So div with the container, div with a row, three things.
1:23
So this will be, thing 1
1:29
thing 2, thing 3.
1:33
Now if we open this up
1:34
we got thing one, thing two, and thing three.
1:36
Remember these are medium, so they're going to break
1:38
at about medium size screen there.
1:42
Okay, so pretty awesome.
1:45
We want one more row, so we could come here div.row
1:49
and maybe want div.
1:53
That multiple always needs to be 12, right?
1:55
So we'll have
1:56
let's say 6 little horizontal slices, like that.
2:00
Now if we look at it, you can see there's those slices.
2:03
By the way, I put a CSS style in this page
2:05
to make it have these little gray borders
2:07
so that they stand out.
2:08
If you didn't add on that extra style
2:15
and you just run it like this
2:16
you would not see those pieces stand out nearly as clearly.
2:19
But the grid is still there, right?
2:21
Notice the behaviors happening is just super hard to see
2:25
so I of course put that in here
2:27
so it stands out in a really obvious way for you.
2:31
Okay, that's really all there is to the grid.
2:34
You can pretty easily use those to design the stuff
2:37
so we come look here.
2:39
You can see we have a container, we have a row
2:42
and then we have a column md 4.
2:45
md 4, md 4, that's how we get our thirds
2:48
right there on that page; super easy.
2:51
And of course, the responsive design bit
2:52
just falls right into place there.
2:54
Oh, last thing on the image is worth pointing out here
2:58
since I don't think we're going to talk about it anywhere else
3:00
these images have the class img and img-responsive.
3:06
Those two things are what are in place
3:09
to make them actually change size
3:11
to match whatever container they're in, okay?
3:15
So, img and img-responsive.
