Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Bootstrap and frontend CSS frameworks
Lecture: Concept: Grid layout
0:00 Let's talk about the grid layout concepts
0:02 really quick in review here.
0:04 So we saw this grid layout with some very egregious styles
0:09 to make the grid elements in the borders and stuff
0:11 stand out super strong.
0:12 As you saw on the training site
0:14 none of this actually shows up unless you want it to.
0:16 Right, it's more about controlling your content like here
0:19 as a teaching tool
0:20 gray with grape order is what we get.
0:22 And what we do is we define various rows
0:25 each row has 12 slices and those can be broken into:
0:30 three elements of four
0:31 or 12 elements of one
0:33 or two elements of six as you can see.
0:35 We also specify the size:
0:36 small, medium, large, extra large things like that.
0:40 And in HTML it's super easy.
0:41 We have a container - the container has rows.
0:43 Each row has divs of classes of column
0:47 minimum grid size
0:49 and then the number of columns each one of these represents
0:51 so call medium eight.
0:53 So here you can see there's column medium eight
0:56 and there's column medium four.
0:59 I also said I'd give you the exact numbers
1:00 for what define small, medium and so on.
1:03 Things that are less than 576 pixels
1:06 are defined to be extra small
1:08 between that 576
1:10 up to 768 is small
1:13 then medium starts there and large at 992
1:16 and beyond 1200 that's extra large -
1:20 definitely call that an extra large display.
1:22 So, here's the actual numbers
1:24 that are used to define when these grids break
1:27 from grid tabula style
1:29 into horizontal slices stacked vertically.
1:32 That's it. Totally recommend using the grid layout.
1:34 It's very easy and very very helpful
1:37 especially if you're going to support
1:39 things like mobile devices
1:40 and why wouldn't you support mobile devices right?