Responsive Projects Layout

[00:00:00]
>> All right, so now we have the last part of this, which is the making this responsive piece. All right and the way we're gonna break this up was we're gonna break it into two parts. So first of all, we're simply going to make this go side by side.

[00:00:16]
We have an image and we have our text. That's all we need to do, with the image next to the text. And so to do that, there's a lot of different methodologies out there for putting two things side by side like this. One methodology would be to use Flexbox, and that would work just fine in this particular situation.

[00:00:38]
The other approach is called CSS Grid, and this is an even newer technology for doing layouts than Flexbox. It seems to me that in a lot of coding boot camps, we spend a lot of time on Flexbox, which is often leveraged by Bootstrap and Tailwind. And lots of other responsive design frameworks make heavy use of Flexbox, and Grid's sort of this afterthought.

[00:01:01]
Now you can also use Grid, [LAUGH] and we don't really differentiate well between these two layout methodologies. But I will tell you this right now, one of the things that Grid does that Flexbox does not do is Grid can overlap two cells on top of each other,.Flexbox cannot do that.

[00:01:22]
The best Flexbox can do is put two cells next to each other, but they will never overlap. Given that we are headed in this direction of eventually overlapping these two particular items, we are going to use Grid for our layout because then we can overlap these two items.

[00:01:39]
And we can do that very, very efficiently with Grid. So, if you don't know Grid, that's okay, I will sort of talk you through the process. And it's covered extensively in my course here at Front End Masters on Flexbox and on Grid. So the first thing that we need to do before we do anything else, is we need to manage our parents and our children when it comes to our HTML.

[00:02:04]
And because the way these layouts are done, we're going to have some kind of parent, where we're going to declare display Grid. Here we're gonna declare, display Grid. We've previously been doing display Flex, now we're going to do display gGrid. Then we need to have, as children of that particular element, only two items.

[00:02:28]
We need to have all of our text, that's one item, and our image, that's the second item, that way we can manipulate those things in space. So given the fact that we have lots of text, we have headings and we have paragraphs, and we have lists and all kinds of things, we're gonna need some sort of element to group all of that text together.

[00:02:47]
So we have one thing that we can move in space with all that text as a unit. And then we have the image, that's the other unit that we're going to move in space. So let's just take a quick peek at what we're doing here. There's our image inside of the article, so we'll have our article become our parent, and then what we need to do is wrap around all of this text, we need to wrap a div around it and give it a class.

[00:03:12]
So then what we'll have is the article and its two children, the image and the text. So the way to set that up is as follows. Right here inside of the HTML to start with, right after the article, we'll say div with a class of text. And you can indent everything accordingly, And then slash div.

[00:03:47]
Okay, so just to one of the things you can do here inside of code pan is you can collapse bits of code. So I'm gonna do that now just so this looks a little bit clearer to you. So you have your article, there's your div with your class of text, all the text is inside of that div.

[00:04:03]
And then after that we have our image, okay? So that's the first thing to do. Once that's in place, then we can jump into our CSS and write some code for this. So what we're gonna say here then Is at media, Min width, 550 pixels. So basically, if the screen is 550 pixels wide or wider, then these are the styles that are gonna take priority.

[00:04:37]
What we have here right now, this is awesome, that is what we wanna see on a mobile device, phone, a phone type of screen. This is what we're going to see, now we're gonna write these styles just for the desktop. And here we're going to say article, And we're going to say display Grid.

[00:05:00]
Okay, nothing will happen, that's okay. All right, the thing about Grid, if you've not worked with it before, Grid not only works in one dimension like Flexbox, where you have a whole series of boxes. Grid works in two dimensions, we have columns and we have rows. So what I want to have is I wanna have my two items side by side.

[00:05:22]
So I wanna have one column that has the image, one column that has the text, and I want those side by side and they're basically about the same size. So the way that I do that is I say Grid, hyphen template, hyphen columns, one fr one fr. Now, that's pretty weird-looking notation, what does that mean?

[00:05:42]
So what that means is we're going to have two columns. Hello Grid, we're gonna have two columns, and I want them to be one fraction of the screen-wide each. Okay, so you do the math, Grid, I don't care, the screen is two fractions wide, and each item gets one of those fractions.

[00:06:02]
Now as you can see here we immediately have a problem, and that is that this image is taking up most of that width of the screen, why isn't it scaling? The reason why is up here in our generic styles, so I'm gonna go up here around line 56, 57.

[00:06:23]
Our images are currently displaying at the widths that they are natively assigned. That's how big the images, and so that's how big it is on the screen. We are gonna change that, we're gonna say image has a width of 100%. And this is a small hack that will allow your image to scale on the screen.

[00:06:44]
So it will become larger, it will become smaller depending on where it is in space. And so now that I've done that, now those two things are a little bit more evenly sized, okay? So very fake responsive images. All right, scroll back on down to my other styles here.

[00:07:09]
So continuing on a back around line 244, continuing on with my article style here, we can also give this a regular old gap. One rung and so that will give us the space in between the image and the text. And one of the things that you might notice about this is that we have these in the wrong order.

[00:07:31]
What we wanna have is, we wanna have the image on the left and the text on the right. So there's two solutions to this problem. One would be to switch the order in the HTML. But the problem with that is if we switch the order of the HTML, what will happen is that you will encounter the picture first followed by the text.

[00:07:50]
And what I'd like people to do is see the text first and then the image on my mobile device. So that's not gonna be appropriate solution here. Instead, what I'm going to do is I'm gonna make use of the order property, And we can put that on text, my class of text.

[00:08:14]
And we'll say order 2, okay, so that just flips those right over. So now we have the image on the left and the text on the right because I said order 2. So by default the image doesn't have an order property assigned to it, so it will come first.

[00:08:33]
And then lastly, I can say text align right. Because that's an inherited property, that'll cascade through every all of the text that's there on the right side of the screen, and everything will automatically shift right. Pretty awesome, except for that HTML, CSS and SVG, which is still over on the left-hand side.

[00:08:57]
Why is that? Because that was our list that we use Flexbox to display. And remember that we had that set to have our justify content of Flex Start. And that's exactly what it's still doing. It's at the start of that particular row. So what we'll need to do in our media query then is say here for projects UL, our justify content will be Flex and just go to the end of the row instead of the start of it.

[00:09:36]
We're almost there, isn't this exciting? Projects look amazing. It's beautiful, the colors are beautiful, the spacing is good, you can do this.