Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Adding to the grid
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.