Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Grid layout demo

Login or purchase this course to watch this video and the rest of the course contents.
0:03 Here you see a grid of gray squares, so what do these gray squares mean?
0:08 Well, they are supposed to have content but I decided to make just squares
0:11 so you could very clearly see the grid actually come out of the page,
0:15 imagine there is text, or there is pictures, or something much more complicated
0:20 like some hierarchy of a thing, containing a div,
0:23 containing an image and whatnot.
0:25 We have different CSS classes on the screen here,
0:28 you see I have column md, so md stands for medium,
0:33 down here we have some column lg, that stands for large.
0:36 And down here we have small. What do those mean?
0:39 Well, medium means I would like this grid to retain its grid capabilities,
0:46 or continue to look like a table on medium screens and above.
0:51 That means I would like you to remain like a grid, on small screens, and above.
0:56 But if it gets smaller than what small is defined to be,
1:00 we'll see that later when we get to the concept, if it gets smaller than that,
1:03 then I want you to break and turn it to like vertical stacked set of rows.
1:08 So, this section here, this should last and retain its grid shape for quite a while,
1:15 these right here will retain their grid shape until maybe about
1:20 if I shrink it about to this bar, much more than it will probably wrap it,
1:24 it will break down its table form, same with this.
1:27 We could also control how much of a percentage of the grid things take up.
1:32 For whatever reason they use twelve elements, so here you can see
1:36 we have twelve column large ones, this adds a twelve, this adds a twelve,
1:42 and you basically get then ratio of the screen for each segment that you define.
1:48 So are you ready to see it in action? Let's see what happens when I resize this.
1:51 Alright, so if I get bigger, nothing happens and it gets smaller,
1:54 pretty soon the bottom one will break first,
1:57 because I said I only wanted to have this grid layout on very large screens,
2:02 but any moment now, it's going to break, there you go, now these,
2:06 all of the sudden become wrapped on top of each other.
2:10 But the small ones and the medium ones,
2:12 they still retain their grid form because they are supposed to be grid-like longer,
2:16 on smaller screens, let's say.
2:18 So, now the medium ones are going to break, and there they go,
2:22 and you can see the small ones are still there, but eventually,
2:25 if I make it skinny enough to small ones, themselves break as well.
2:29 And, it turns into basically a bunch of vertical slices.
2:33 And as we put it back, things start to reappear and then eventually,
2:37 we can get our grid layout back.
2:39 So it's really easy to put stuff into these grid cells, as we'll see,
2:42 but this is how these various pieces work,
2:45 we also have extra small, there might also be an extra large,
2:48 we'll see when we get to the concept, all the various CSS classes,
2:51 the exact pixel size, and what that means and so on.
2:55 Let's look at the code to make this work.
2:57 So for all the demos in this CSS section,
3:00 except for the final bit where we design the whole front page,
3:03 I've created this bootstrap-example-snipped folder and put a bunch of straight HTML,
3:07 we have one image we are working with,
3:10 and we are just using Bootstrap straight off the CDN.
3:13 So these are basically empty HTML pages
3:16 except for the fact that they have Bootstrap
3:20 and then we put this grid stuff or various things like buttons
3:23 and the other ones, or dialogues and so on.
3:26 And you also don't need PyCharm to open them,
3:28 you can just double click them and view them right off the file system most likely.
3:31 Alright, so here you can see we have the grid pieces,
3:34 you can see these same CSS classes,
3:37 notice I put that as text and as the class so it's really clear what is going on there.
3:41 Now it always goes like this, we have some section that is called a container,
3:46 and it contains a number of rows,
3:49 so here you can see a row, here is a row, here is a row,
3:52 and within each row, you can break it up into 12 segments;
3:57 in this case, we've broken it up into 12 segments two ways,
4:01 we said we'd like this first one to take eight twelfths, or two thirds,
4:05 and this one to take four twelfths, so one third.
4:09 Because we said medium, we wanted to retain its grid style
4:13 or its tabular behavior on screens larger, medium or larger basically.
4:18 Here we said let's break it up into three pieces of equal size, four, four, four,
4:23 again, that's twelve, and here, we are breaking up into two pieces, six and six,
4:28 but we want them to remain grid like, longer,
4:31 even on small but not extra small screens.
4:35 And then, at the bottom, we have our twelve cell piece,
4:39 pieces of one but they fall apart very quickly when the screen gets small
4:45 because this only works on large and above screens.
4:48 It's easy to get this grid stuff somewhat complicated
4:53 and I feel like people will sometimes make it more complicated than it needs to be,
4:57 for example, you can have offsets and polls,
5:00 and all sorts of funky stuff going on with these cells,
5:04 like, I could have just the second one here but I could tell
5:09 that it's offset by three cells and so on.
5:13 But the simple form what you see on the screen here
5:16 and which is pretty much good enough all of the time
5:19 if you want to just keep it simple,
5:21 the simple form here is pretty easy to understand
5:24 and it's super helpful to design your website using the grid system from Bootstrap
5:29 and it's even more important these days,
5:32 I haven't mentioned this yet but Google ranks your page higher
5:36 if it's mobile-friendly for mobile searches.
5:39 So if somebody is on their phone, or their tablet, and they search,
5:43 if you have a responsive website, there is a better chance
5:47 that your website will be listed higher for those search results.
5:50 And with the grid, it's really easy to do, so be sure to check that,
5:54 you can actually look at the Google Webmaster Tools tools,
5:57 you can sign up for those, register your site with them
6:01 and see whether or not Google thinks your site is responsive and mobile-friendly.