Using Flexbox Layout

[00:00:00]
>> Jen Kramer: So we've completed part two here, and we are moving on to part three, making our design responsive. And I'm gonna give you two screenshots here for making this responsive, you'll see that we have a vertical layout here, everything is centered. We have our front end developer h2, our h1, our paragraph, everything centered, our icons are centered, and, look at that, we're only gonna show part of the picture here, okay?

[00:00:30]
Rather than the whole thing. And then when we go to desktop, we wanna have all of that stuff, we want it left aligned, and we want the picture next to it, so that's where we're heading next. And once again, I've given you links to the beginning and ending code pens down here, so we ready to set this up?

[00:00:48]
Okay, so as developers who know all about responsive design, which of these designs do we work on first do we go mobile first, or do we go to the desktop?
>> Speaker 2: Some people wants mobile first.
>> Jen Kramer: Many people start with mobile first, right? And then we are gonna use media queries to change the design and have this work for desktop, so let us start with that mobile layout then.

[00:01:15]
All right, so the first thing is, we've got all of our text everything is all smashed onto the edge of our screen here. So one of the things that we can do to our design, which we don't currently have, we just have this basic HTML that's here. It's always good to kind of wrap things up in some kind of wrapper on this page, perhaps we want a maximum width of 1200 pixels centered on the screen.

[00:01:41]
And we can do that by adding a div with a class of wrapper here to the top of our code. By the way, for those of you who are not necessarily familiar with CodePen, right here in the little drop down icon at the top the HTML here. There is the option to format your HTML, you can also analyze your HTML, this is gonna tell me that I'm missing a slash div because I haven't put it in yet.

[00:02:09]
So if we scroll all the way down here into the bottom.
>> Jen Kramer: Just after my image, I put in a /div, you can then check our HTML analyze it tells me I don't have any errors, which is great. And then in my CSS somewhere, I usually like to put it up here towards the top.

[00:02:33]
I'm gonna add my wrapper class and I'm going to say a max width Of 1200 pixels, and I'm going to say my margin is zero auto. Zero auto, what does that mean, margin zero auto anyone?
>> Speaker 2: You try to put everything at the same sides up and down.

[00:03:02]
>> Jen Kramer: Yes, so zero at the top and the bottom and then quote auto on the left and the right. So, as we make this bigger, I'm only at 1075 here, so, Although my code, for purposes of having written everything I wrote this to 1200 pixels, my screen size here is not gonna allow me to demonstrate that, so I'm actually just gonna back this off here.

[00:03:28]
So let's say I back this off to like 900 pixels, and then you'll actually be able to see it. Okay, so that will, here's all of our text, it's currently stretching all the way across the page and you can see that we have a little bit of space that will develop here.

[00:03:44]
And on your screens at home, which are much larger than mine, you'll see that you'll eventually wind up with our text centered in space. Although not centered in terms of centering the text, but the big block centered in space with that margin auto. Okay, and then the other thing I'll add is padding of 1rem, and what that will do is, even if we're not at a large screen dimension, we'll get the text off the edge of the browser window here.

[00:04:19]
>> Jen Kramer: Okay, also to my HTML, I wanna add some additional markup here, because inside of my wrapper, now I have all of these HTML elements hanging out here in space. This is actually one huge grouping of things, so what HTML element might be reasonable to use to group all of this stuff on the page?

[00:04:42]
And yes, div is always a possibility, but we could actually choose something a little bit more semantic, anyone have an idea of what element we might use to group all of our HTML elements here? Yes.
>> Speaker 3: Would section be an option?
>> Jen Kramer: Section is certainly an option, section would be one option, it's just sort of all of this is related information we could use section, you have an idea?

[00:05:04]
>> Speaker 4: You can use div.
>> Jen Kramer: You absolutely can use div, div is very generic, it doesn't communicate anything meaningful about this HTML and its relationship to each other, but they're very useful for styling. That's why we used it for the wrapper we're not we're just using it to hold that wrapper class, we're not actually community communicating anything about the HTML.

[00:05:23]
So one of the things that we could do here would be to give this an article element, what article says is that this content could stand alone, this could be your whole web page, right? You don't have to have anything more than this, if you just wanna say, hi, I'm [INAUDIBLE] so this is about me, this could be your whole web page.

[00:05:42]
So I'm gonna use the article element and I'm gonna give this a class of main article.
>> Jen Kramer: And then I'll close this down here at the bottom, just before my /div, which was just for the wrapper.
>> Jen Kramer: Okay? We'll save that and I will format this. One of the wonderful things about CodePen that's also true of VS code are these little triangles that are over here next to your HTML.

[00:06:19]
I'm always telling my students to click on these and flatten things up so you can see your code, your HTML and the relationships between what's going on here a little bit better. Because when we start talking about flexbox and grid, remember it's all about parents and children. If you want to hear me talk about this, ad nauseam, check out my course on the ultimate grid, the ultimate Ultimate grid course right here at Front End Masters.

[00:06:42]
I talk all about parents and children and how this applies to our various types of layout with grid and with Flexbox. So here inside of our article now, we have a whole bunch of children, h2 is a child of article, h1 is a child of article, paragraphs, a child of article, etc.

[00:07:04]
We now need to group all of those together, because ultimately I'm going to put my text and my picture side by side. So I need one element to wrap around all of that text in the SVGs and the list all of that, and then they have me image as my other item.

[00:07:21]
So what i'm going to do here is I'm going to add a div because here I'm not communicating anything about this text, I just need a grouping element. So I'm gonna use div, I'm gonna give it a class of text cuz I'm super creative in my naming, and then,
>> Jen Kramer: Down here at the bottom, just before my image, I'm going to say /text or sorry, sorry, /div.

[00:07:53]
>> Jen Kramer: And we'll clean this up with our formatting, and now if you see here, I have, my wrapper goes all the way around everything, the article goes around this particular part of the content. Remember, we'll eventually add our projects, we'll eventually add a footer to all of this.

[00:08:12]
And then inside of that article we have two children, we have a div with a class of text, and we have an image, make sense? This is gonna be important for our layout, that's why we're putting all of these containers in place. Now that I have this HTML structure in place, let's go to that mobile formatting, so here in my CSS, just remind us, this is what we're trying to get it to look like, okay?

[00:08:37]
We need all of our text here in the middle, we also need to align our image in the middle, so what I'll do here,
>> Jen Kramer: Scroll on through my CSS here about me layout styling, always add a little comment here and there. And I'm going to say my main article, that was the class that we use to identify the article.

[00:09:08]
>> Jen Kramer: I am going to,
>> Jen Kramer: Display grid. Okay, so grid-based layout always what we wanna reach for as a default when laying out our web pages. In my mobile version, how many columns do I have in my grid-based layout?
>> Jen Kramer: How many columns do I have?
>> Speaker 5: Just one.

[00:09:32]
>> Jen Kramer: Just one, only one column. And I can do this like grid template columns, 1fr, fr being fraction, so take up the fraction of the page, one whole fraction. The gap will come in handy, gap of 2rem, that should give us then a gap in between my social icons and the image itself, which is great, that is a very helpful thing.

[00:10:02]
And then I can say text align center. Once again. This is an inherited property, so by putting it at the top of my main article, everything in terms of text will center here on the page. My social icon list did not center, my image did not center, so let's address that.

[00:10:23]
So for my icons, we actually have the styling up here, I originally said flex end for align items to this will just add a justify content center, and that will center the social media bar there in the center. And then finally for the image itself dot main article image, so the image inside of main article, we can say margin of zero auto, right?

[00:11:03]
And that will center the image on the page, that's all you need, okay?
>> Jen Kramer: So we're really close now we have our mobile layout for the most part, right? The thing that we're missing now is, what about making this image smaller? Cuz we're just gonna show her head here on mobile for whatever reason.

[00:11:23]
>> Speaker 6: If we remove the flex end before they justify it,
>> Jen Kramer: Yeah.
>> Speaker 6: I think it should still remain the same, right?
>> Jen Kramer: Actually it is. The goal of that is to, I may have the wrong property.
>> Speaker 6: I think initially before you had the justify content, you trying to flex it so that it doesn't, [INAUDIBLE]

[00:11:45]
>> Jen Kramer: Okay, fair, well, we can take that out. I think what I was going for is trying to align all the icons on the bottom. Yeah, I probably have the wrong property. Let's talk about this image down at this point. Okay, so we have this lovely, big, long image, but it's too big for bubble, we just wanna show the head of the person here.

[00:12:06]
So there's a bunch of ways we could do this, okay? And it depends kind of on the file size, this is a very lean website in terms of its overall file size, it's gonna load like that because it's only HTML and CSS. So generally speaking, the size of these images matters less to us than it might in your average web application, where you're always looking for ways to shave sizes off of your files.

[00:12:30]
We could do this with two different pictures, we could use our picture element, I talk about this also in the ultimate grid course, so depending on the size of the screen, we could load in different pictures. Today we have some other options that are available to us because there are some new properties called object fit and object position that we can apply to our image that will just show us a portion of this image.

[00:12:54]
So the file size of the image remains the same overall, but how much we're going to show is going to change. So I'm gonna show you this little trick, just as something a different approach to this, we can say that we want our object fit will be cover, this may not change anything immediately.

[00:13:16]
An object position will be top, and then we'll change our height to like 175 pixels and our width to 300 pixels. So what that will do is just basically crop our image visually, so we're showing not the entire image, we're only showing the top 175 pixels high, and we're setting the width to 300 pixels wide.

[00:13:45]
And then some good things to add here again, are overflow,
>> Jen Kramer: Overflow hidden, just in case, we don't wanna show any of that extra image, so we're going to hide it, by using the overflow property.
>> Jen Kramer: Okay? So at this point, we should have something approximating a mobile design.

[00:14:09]
If you're working in CodePen for the first time, you'll notice this tiny number down here at the bottom, which will tell you exactly how wide the screen that you're looking at is, right? So you can pick a mobile dimension here and do a quick sort of visual check, I'm going to put mine around 450 pixels that looks reasonable for a mobile phone display, right?

[00:14:32]
Any questions at that at this point.
>> Speaker 7: If you use a property value more than once, is it okay to add it to the root?
>> Jen Kramer: Yes, you can absolutely add anything you want to your CSS variables. In general, because I'm teaching, I tend to keep basic things that I either use a lot, like eventually these corners or my base font size that I'm gonna manipulate through calc.

[00:14:57]
And of course, the colors that we repeat over and over again, I tend not to put a ton of stuff here into my variables, because I think students get confused. We forget all of the variables that we have up there in the real coding world, where you're actually writing this for real, there are probably some more things here in what I'm doing that you would extract and create as a variable instead.

[00:15:19]
But to keep my code readable and understandable for the students, I'm not doing that as aggressively as I might in a real application.