Building Data-Driven Web Apps with Pyramid and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Grid layout
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
Let's quickly review the concepts around this grid.
0:03
We've seen this little section
0:06
from our Temple HTML that we've worked on.
0:08
We've got columns that live within rows
0:12
and the idea is the columns are broken up into 12 elements.
0:16
And we can have columns that are one wide
0:18
or 12 wide or anywhere in between
0:20
as long as that's an integer.
0:21
So the top, we said we wanted a 2/3 to 1/3 split
0:24
so that's column 8, column 4.
0:26
The bottom, we want 12 little bits
0:28
so column 1, 1, 1, ... and so on.
0:30
The other distinction here is we have sm, md, lg.
0:34
But the idea is that tells the layout how soon
0:37
to go from horizontal to vertical partitioning.
0:41
And we saw in the html, we have a div that is a container
0:43
a div that is a row, and then divs
0:46
that have col-<sizing>-<partitio>
0:49
so col-md-8 column-md-4 and so on.
0:55
Then you have as many rows as you want
0:57
in this case four, within that container.
1:00
And bootstrap just handles the rest.
1:02
So this col-md-8 goes right there
1:05
col-md-4 goes right there
1:06
it makes it 2/3, 1/3.
1:09
And if you're wondering about the sizes
1:11
sm, md, lg and so on.
1:12
Here's the exact pixel definition
1:14
of sm, md, lg, xs, xl.
1:18
So xs is less than 576 pixels
1:22
sm is larger than that up to md
1:25
which is 768, 992, and 1200 or larger.
1:29
That's a really large, large, extra large.
1:32
So this is where that breakdown happens
1:34
when you use these specifiers.
