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? 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.