Building Data-Driven Web Apps with Flask 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
Let's open up that grid HTML file over here in PyCharm.
0:03
We're going to dig in real quick
0:05
and just see what it's like
0:06
to actually write this grid layout.
0:08
It's super easy to work with.
0:10
So the way it works is
0:11
we have a div here that is a container.
0:14
Within the container we have a bunch of rows.
0:17
Within each row we have some other elements
0:20
some other divs that are broken into columns.
0:24
Now, the rule with the grid layout
0:26
is that you have to have 12 columns per line.
0:30
Either it's 12 across, or it's all broken vertically
0:33
as you saw, right, when it gets too small.
0:35
So here, for example, we have one that's eight
0:38
and one that's four, and that adds to 12.
0:40
Here we have 12 that are one
0:42
and if we open up this one here
0:44
you can see we have three that are four.
0:46
All of those combine to being 12 total segments.
0:51
So that's pretty much it, it's really, really simple
0:53
and then just put your content in here.
0:56
And the content we had was just
0:57
the class name for each section
0:59
so that it was really easy to show you
1:01
and you can play with it, and so on.
1:03
Let's go through this and add one more real quick.
1:05
Come over here and add a little header for each part.
1:08
We're going to save the old section and generate a new one.
1:11
Original section.
1:12
Now here we'll just have another one.
1:14
Just hit Tab to expand that.
1:16
So we can do section.
1:18
So the way we're going to do it is we're going to have a div
1:20
which has a class container
1:21
containing multiple, potentially multiple, rows
1:24
in each one of those rows, some number
1:27
of these columns that add up to 12.
1:30
Now, they could be uneven
1:32
or they could be totally even, like this.
1:35
Now, PyCharm has this really cool feature
1:37
called Emmet, or Zen Coding
1:39
or we can use CSS-style shorthand to generate this stuff.
1:43
Sometimes its helpful, sometimes it doesn't help so much.
1:46
But if I had a div and I wanted to say
1:48
this has a a class container, in CSS I would say .container
1:52
and then if I wanted to say it immediately contains
1:54
I'd say arrow, and I'd say a div was class row
1:57
and then it immediately contains a div
2:00
let's say col, medium, four
2:04
and I want three of those, so you can say times three.
2:07
If you hit Tab, check this out. Sweet, right?
2:10
Thing one, thing two, it even
2:13
navs you through the little section there.
2:16
So let's go ahead and see what this looks like now.
2:19
So now we have our new section.
2:21
Thing one, thing two and thing three
2:22
and because we chose medium, it's going to
2:24
wrap when it gets down to medium sized stuff.
2:27
Let's add one more bit here
2:28
just to show you what we can do.
2:30
We'll have a row, and this time
2:31
we'll have some small sections.
2:38
Let's have one, just put one, four
2:43
and then what do we need for the balance?
2:44
Seven. Here we go, one, four and seven
2:50
and you can see how we can break this out
2:51
and make it a little smaller.
2:52
Because it's small, it hangs onto its grid
2:54
a little bit longer, and then it breaks out.
2:56
So there you have it.
2:57
Super easy to use this, right?
2:59
If you can just drop in a container with some rows
3:02
and then add the column values
3:04
and of course in PyCharm
3:06
you get sweet auto complete on that.
3:08
A little rmg, you can flip through
3:09
those extra large, small, and so on.
3:12
That's all there is to this grid layout.
3:14
Pretty easy to implement, you don't need
3:16
any Java Script, it's pure CSS
3:18
and it really makes laying out your page in interesting
3:21
and yet mobile friendly ways, really nice and easy.