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