The web site of jiawp

CSS Flexbox Fundamentals

CSS Flexbox Fundamentals Setting up Our Flexbox Playground Alright, hello and welcome to this lesson where we're going to begin learning all about the fundamentals of Flexbox, alright? So we're just going to very quickly prepare a simple HTML document along with some CSS in this lesson specifically. Now I want you to open up the project files and open up the 02 begin zip file, and inside of it, you'll find these folders. You'll find CSS, which has just a few CSS files. One is custom.css, which is completely blank, and we'll be working in here. The other two are for foundation, which is a responsive front-end framework that I like to use. We really don't have to do anything in these. Next, we have images, which is by default something I always include. There's no images for this particular project that we're going to be going through for the next two lessons. And then a JavaScript file again, or folder rather. Again, there's nothing in here that we need to worry about. Alright, so in index.html, we have some just very basic HTML just to get everything running so we don't have to type out all of the redundant and all the necessary coding. But we're going to be working within the body tag right here. At the bottom, we have just some necessary scripts for the foundation front-end framework, and so let's go ahead and get started. So basically, we're just going to do something very, very simple. We're just going to put in div id equals container. And then inside of it, we're going to have ul id equals flex-container and close that. And then inside of it, we're going to have some list items. Alright, so we have one in the center for the first list item, and we're just going to copy that and then paste it five more times to have a total of six. Alright, so let's go in here and just change this, 2, 3, 4, 5 and 6. And the purpose of this, of course, is just to let us know what's happening to these when we apply the different Flexbox properties and values. And that's all the HTML is, very simple. Again, we're not doing anything too complex here. And this is just going to help us kind of get familiarized with Flexbox, alright? So that's the HTML. Let's switch over to the custom.css. Okay so the first thing I want to put in here is just, I kind of always included it, is just a html and comma, body, height 100%. And then now we can also come in here and specify our ul flex container. Now one second here. ID is flex-container, that's what we want to reference. So I'm just going to put in ul and flex-container. And inside of here, list style type, none. That will get rid of the default bullet points. Margin, 0; and padding, 0, to get rid of any default margin and padding. And then we're going to put in the li, so we'll just go to put in ul li for the list items specifically. And we're going to give them each a height initially here of 150 pixels. I'm going to put padding-top, 45 pixels. Color, oops, let me fix that. Alright, then color is going to be white. Font weight is bold and font size, something a little bit big so we can see it, 2.2em. And then text-align, center. And then finally, we're going to reference our specific li or list items right here by going ul li, first-child rather. And inside of here, we're just going to put in background and oops, fix that, background, and we're going to put in a specific color code, c2d775. And then I'm going to copy this here real quickly and paste it five more times. So one, two, three, four, five, okay? And I'm going to change the very last one simply to last child. And then these over here in the middle, I'm going to put nth-child, 2, that reference to the second li. And real quickly, I will just replace these, 3 and 4 and 5. And then finally, we'll change these to 00 and 7278. And this one over here is going to be C7b600. This will be a90077. 00a378, and then finally, 00ea72, and save it. So I'm just going to right click and open this and I already have it open in the browser so I'm just going to get that up. And this is basically what you should have going so far. Currently, these are not Flexbox-based containers or items, so this is what it is just by default with the standard HTML and CSS, alright? So in the next lesson, we're going to go ahead and get started by experimenting with actual Flexbox properties and values, alright?

Creating Your First Flexbox Container Alright, hello and welcome to this lesson where we're going to begin experimenting and using Flexbox. Okay, so as we saw here in our very basic example, we have just a basic unordered list here, although technically it is ordered because we added numbers in it, but it's still using the ul element, nothing too fancy about it, everything is kind of just extending, you know, they're on top of each other, very simple. Now if we want to take this and convert this into a Flexbox sort of container, this is what we have to do. We have to simply come to the container. As we could see, we're using the ul as the container for our Flexbox. And then inside of it, we have all of the child elements. So what we want to do is on this container, simply put display flex. That is it. So let's go back to our browser and refresh. So this is what it automatically does by default. It displays any of the child elements in a row as opposed to a column. Now there's a lot of other different properties that gives a lot of control, so let's begin experimenting with those. But yes, technically, you have a Flexbox container right here already to go. And the next thing we want to do is let's say, for example, looking at this, this is horrendous obviously, you know. What is this, right? So my immediate knee-jerk reaction is to say well, you know what, I want these to extend all the way out 100% for all six of these items, or however many there are, whether it be 20 or two or three, whatever. So the way you do that, and this is a Flexbox-specific sort of property is to add flex-grow. And we're going to add this on all of the child elements, which is ul li. So let's go ahead just at the top or anywhere really. Flex-grow, 1. Save it and refresh. There we go, very simple. Let's go ahead and experiment with different viewport widths here, and we can see it just stays all the same way or across in terms of proportions and staying on the same row in the wrapping, alright? So basically, what grow does is simply allows you to specify in terms of proportionality, depending on how many you have, it will take all the child elements and give them all an equal ratio of one towards each other. So they're all going to be the same width. Alright, so what if you want to kind of control one of the six specific child elements and give it more width? Well, the way you do that is simply to add a flex-grow, let's say for the third one. Flex-grow, we'll add two. So what's going to happen then? Alright, so the third one that we added, we specified two, and now it's going to take up twice as much, and each of these are going to, depending on the size and the width of the viewport, they're going to automatically adjust to fill out this whole row right here, which is great. Alright, so we can even do another one, let's say down on number five, flex-grow. We'll put in, say, 5. Very, very cool. And again, it works at any size. Okay, so the next property that we'll cover is called order. So the order property allows you to specify the order in which the items are displayed in the Flexbox container. Now by default, if this order is left unspecified, the order is simply dictated by the order you have here in the HTML. So naturally, 1, 2, 3, 4, 5, 6. So let's go ahead and experiment with the order property. So if we just put in, say for example order 2 and save, we'll see that now, the number 1 gets shifted all the way over here. Now let's go ahead and just add some other ones here. So order 1 for the number 2, so this should show up first. We'll add at the end of flex grow, order 5 for number 3, order 6 for number 4, order 3 and then order 4 down here for number 6. Now if we save it, we'll see we can very easily, through the order property, control exactly where these show up, alright? So I'm going to back up a few times, hitting Control Z, just to get rid of all of the orders that we just added. Alright, and save that and through the next lesson, we're going to continue on learning more about all these properties that will allow us to control in many more different ways these Flexbox items. Alright, I'll see you then. Alright, hello and welcome to this lesson

Controlling Flexbox Items where we're going to continue on experimenting with Flexbox. Okay, so we just experimented with the order property, which allows us to control exactly where each individual item shows up in the list. Now we can experiment with another one called flex direction, alright? So flex direction allows you to specify four different values that control how the items are laid out, both horizontally and vertically or in other words, in a row versus a column, alright? So we have flex-direction is the property name, and we come down here, flex-direction, and we specify row and save it to go back to our browser. We can see, it basically shows up exactly as it did before because row is the default value if flex direction is not specified, alright? So let's go ahead back here and we can change this next value, instead of row, to row reverse. So row-reverse. And as expected, when we refresh, it goes from the opposite. So 6, 5, 4, 3, 2, 1. Very simple, alright? So similarly, if we change it to flex-direction to column, and save, refresh, you can see, it behaves exactly as it did before we even added a Flexbox container, although it still is, in this sense, a Flexbox, but we're just simply organizing these in a very simple column fashion. Now just as with row-reverse, we also have column-reverse as well. So we save that and 6 will show up at the top, 6, 5, 4, 3, 2, 1. Very simple but very powerful and easy to use as well. So let's switch this back here just to flex-direction row. Or you could remove it because this acts exactly as the same if you didn't have it specified. And what we want to do now is experiment with another property called flex-wrap. Now this allows you to control if the Flexbox items stay on the same line, or in a row rather, or wrap to create multiple rows based on the viewport, alright? So the way we do this is very simple. Let's first add a width to our list item. So we put width, 100 pixels and save. And also, let's get rid of the flex-grow real quickly and save this. And we'll go back real quickly, we haven't added the flex wrap yet, but just to show you where we're at currently, everything fairly straightforward, nothing too exciting there. Now let's go ahead and add flex-wrap, no wrap. Just like that. And if we come back, we'll see this is the default behavior if you didn't leave it specified. So let's go ahead and change this just to delete the no dash. Let's go ahead and refresh and drag this in, and we'll see now it wraps. And the reason it starts to wrap right around here is based on the fact that we gave this right here a width of 100 pixels. So there's 600 pixels pixels across the whole container, and once it runs out of that room, it's going to automatically wrap based on the width. So as we start running out more, it'll take these and automatically position them perfectly, which is fantastic. Very awesome and easy-to-use, alright? So there are a few other values associated with flex wrap, so we can also specify wrap-reverse. Save that. So I'm not going to refresh it yet, just want to show you what this looks like. So we have 1, 2, 3, 4, 5, 6. Now with reverse added, we can refresh this and we can see the values change based on this wrap-reverse added right here. Okay, right, so let's go ahead and just take this back to wrap right there and save. And that's going to be a good spot to end this particular lesson and in the next lesson, we're going to finish up experimenting with some of the Flexbox very simple fundamentals. And after that, we'll get started on working on a Flexbox image gallery. So in the next lesson, we're going to get this all wrapped up, and I'll see you then.

Finishing Our Flexbox Playground Alright, hello and welcome to this lesson where we're going to continue and finish up experimenting with some of the Flexbox container properties and values. Alright, for this next property, I want to go ahead first and get rid of flex-grow. And we'll just save this and we'll go back to our browser and refresh. So when we remove flex-grow, it's basically, each item is going to be based on this width right here, which is 100 pixels for now, alright? So the next property that we're going to experiment with is the justify-content property, and you can control the position of the Flexbox items as a whole in relation to the Flexbox container. So what does that mean? Well, we look at here right now, just by default, they are left justified, alright? So let's go ahead and experiment by adding justified-content, flex-end. And save. And we could see, it aligns everything to the end, or the right of the Flexbox container, alright? Flex-start is the default behavior if it's not specified. We also have center, which of course, as you would imagine, will center everything. And there's also space between. So we put in space-between, and this will take all the space that's in between these items right here based on the width of the viewport and the width of the individual items, and it will separate everything as they need to be based on the width of the viewport, alright? So we have one more, and we also have space around. So we'll save that. Now notice, the space between his only between the actual items, not outside of them. But if we add space around and refresh, we could see it's around every single container, the very first and the very last item. Very simple. Alright, so we also have another property that we can experiment with and that's called align-items. So let's go ahead and get rid of justify content, and let's give the flex container a specific height of let's say 300 pixels. Oops, oh yeah, wrong location on the keyboard there. Height is 300 pixels. And we're going to add align-items, flex-start. Now let's save, come back here and refresh. Alright, so nothing too much happening here, very simple. Now let's change this from flex start to flex end. Now what just happened is we have the container here which is the Flexbox container as a whole, which is applied to the ul HTML element. And we gave it a height of 300. And so flex start, when it comes to align items, the align items property, refers to the top of it vertically when you go to flex. And it refers to the bottom, alright? So let's go ahead and change flex end to center. And you'll see, as expected, in terms of vertical, it goes in the center. So let's get rid of the height that's placed on these list items here, just completely get rid of that height of 150 pixels. And let's change center to stretch. So no more do we have a fixed height, it's going to automatically stretch. It's going to take this and make it stretch to the height of the flex container, which is 300 pixels. Perfect, just like that. And of course, you can always experiment with this and see what happens when you're on different viewport widths, alright? And let's change stretch to base-line, or not dash, sorry, that's all one word there, baseline. Come back here, and let's remember basically, the content is going to serve as the baseline. I need the content inside of the list items. And we'll see, it just basically goes to the height where the baseline or the end of the content is inside of each individual list item, alright? Now one final property we're going to experiment with is align-self, alright? So align self allows you to override the align-items property right here, so that if you want to control a specific item over here or over here, it'll allow us to do that and change it based on this over... The value right here is put forth by align items, alright? So let's go ahead and we'll just make this align-self, maybe just to the third one. And we'll change this to flex-end. And align self can have any of the same values that align items has. So it could be baseline, it could be flex end, flex start, et cetera, alright? So we have this one set at baseline. Let's go ahead and just, we'll add stretch. So let's save that. And we'll see all of them have the stretch value, and this one was just baseline, or yeah, flex end rather, sorry about that. And that's it, you can apply that to any of these that you wish and any different values and they will all work as needed. Alright, so that is basically it for the rundown here for Flexbox. There are quite a few different properties, but once you get yourself familiarized and by doing so, in actual real projects, you'll become a lot more familiarized with it and kind of understand it a little bit better. But basically, as you can see, it's very powerful and allows you to do a lot of things just with a few lines and a few properties that would've otherwise been a lot more work in the past without Flexbox, alright? So in the next lessons, we're going to go ahead and get started on just two different projects. The first project is going to be a Flexbox image gallery, alright? So I'll see you then.

Beginning the Mockup of Our First Project Alright, hello and welcome to this lesson where we're going to begin our first project, which is going to be a Flexbox image gallery. Alright, so basically, just go here in Photoshop to create a very quick mockup of how we want this gallery to look and to interact. So let's go to File, New, and we're going to put in, I'm just going to use something that fits 100% width with my current resolution because this image gallery is going to be fluid, as in it's going to extend the entire width of the browser basically. So it doesn't really matter what your width is, just give yourself enough room to work with. So I'm going to choose, let's see, 859. The height, I'm just going to put in 600 for now. Change that if necessary. I have us working with a print project before, so let's change to make sure that it's 72 for resolution and all is pretty much good here. So I'm going to hit OK. Hit Control one just to get us 100% and fill this in with a black background. And that's going to be the background we're going to use for the webpage. Alright, so for the next part, I want you to open up the 06 begin project zip file, and inside of it you will find six different thumbnail images. I've paused and I've open all six of those up. This is just what we're going to use to put in the thumbnail images. They're just basically free-to-use landscape photographs. Alright, so basically, for this particular width, it doesn't really matter, you know, exactly how we display each of the thumbnails. When we're in the browser at a certain viewport width, there will be four stacked up with two at the bottom. That's just based on our Flexbox properties that we're going to specify. So that's what we're going to design for here, okay? So basically, I'm going to take the rectangle tool and I'm going to left click just beginning here on the left side of the edge, just something I would say right around here for our width. And we can change these two based on how big all four of them (mumbles). It looks like this is a little bit too big, but that's not a big deal. Alright, so once you have that first rectangle here, let's go to thumb-1, Control A, Control C just to copy it, and Control Shift, N and use previous layer to create clipping mask and paste that in. So we can hit Control T just to get these a little bit smaller here, just to get a good idea of what these will look like. Alright, and let's go ahead and also, I'm going to put in a gradient over this. So let me go to create a new layer, Control Shift N and keep that clipping mask, I'll hit OK. We'll go ahead and take the gradient tool and we're going choose this one right here, this preset, which is black to transparent, okay? And we're just going to left click and drag up, hold Shift. There we go, something just like that, and we'll take the opacity down. The reason I'm doing this is because we're going to have a title for each one of these thumbnails, you know, based on some location or whatever you want to call it. And the reason we'll add this gradient is just because there's not enough contrast on some of these images so the text gets lost. So if I left click right around here and I just put in some type of strange name, Cultura, and by the way I'm using Raleway font and you can find that on Google. It's free to use, I'm going to choose regular and make this white. There we go. Maybe increase it just a little bit. Hold Control T and right around there. So if we didn't have this gradient layer, basically, you can't even see it. So that's why we have this. And we'll achieve this purely through CSS. Okay, so that's what the basic thumbnail is going to look like when you not hovered on it. So let's go ahead and I'm going take these and we're going to Control G just to group them up and then duplicate them. So right-click, duplicate group shows off the top of my screen there, and we'll just move this over holding Shift. And it's really up to you if you want to create... Right here is like a one-pixel margin between them, or if you just want them straight up against each other. There's no right or wrong way. So let me just copy these real quick, open this up. Select this layer to the one that the photograph is on, Control A, delete and then Control V to paste. And then if you want to scale it down, here we go. Okay. And we will have to resize these, but that's not to big of a deal. So let's take both of these groups and duplicate those. Move these over. There we go, you can use your keyboard arrow keys to adjust those. And then we can just hit Control T. I'm going to hold Alt and use my mouse scroll wheel to zoom out here just to get these roughly lined up where we want them. Yeah, that's fine. Okay, it doesn't have to be absolutely perfect, but that's good for now. And just real quickly, I'll take this. Come here to three, Control A, delete, Control V to paste, Control T, Shift Alt, scale down. Alright. And we'll take this one finally over here. Delete. Shift Alt, scale down. Okay, pretty good. So basically, this is where we're going to end this particular lesson. In the next lesson, we're going to do two more things. We're going to also show what it's going to look like when we have the other two, because there's six total thumbnails. So the other two will align evenly and be twice the size of each of one of these. And then also, the second thing, we're going to create what it's going to look like when we hover over these thumbnails, alright?

Finishing the Mockup Alright, hello and welcome to this lesson where we're going to continue on with our mockup here of our Flexbox image gallery. Okay, so basically, I'm going to hit Control one to get to 100%. We need to create just two more thumbnails here, which is going to be basically double the size of these individual thumbnails up here. And so let's go ahead, and I'll take our first group here and right-click and duplicate the group. And I'm just going to move it down holding Shift just underneath it, and I'm going to take, I'm going to expand it rather and we'll take the rectangle here and hit Control T, hold Shift and scale it up just to right around there. Alright? So let's go to thumbnail 5, Control A, Control C and then Control A and then delete, and Control V to paste in. And scale this roughly around the size that it will be. So I can move to hit Apply and then select our text layer and move this down here. Alright, pretty good right there. If you did get this off a little bit, it looks like I'm off by one pixel, you can always fix that. That's okay, that's not that big of a deal. And then we'll take this one again and we will duplicate it. Move it over. There we go. Open this up, select the photograph layer, Control A, delete and Control V to paste. Alright. Okay, so of course we can change the names if you wish, but I'm not going to bother with that really. So what we're going to do is now, what is it going to look like when we hover over these? Well, there's going to be basically just two different changes. One is there's going to be a magnifying glass icon that will show up in the middle. That's going to be vertically and horizontally centered. And then also, the opacity of the image, the photograph itself, is going to be scaled-down just about maybe around 20%. So they'll get slightly darker as you hover, okay? So let's go ahead and we'll use this one, the third one right here, to demonstrate you know, what the design is going to look like on hover. So I'm going to select it and it's Group 1 copy 2 for me. And the first thing off the bat is I could just take the photograph layer and just drop the opacity down, let's say right around 80% is fine. And then coming at the top layer of that group, we'll select it and then we're just going to zoom up just a little bit and get this centered up. And I'm going to create the icon here in Photoshop. You could do it with Illustrator if you wish, it's not really too big of a deal for our purpose. And I'm going to use the ellipse tool and we're going to come right here just almost in the center, maybe just off a little bit, left click, hold Shift and Alt. Something right around that size. And we'll go ahead, we'll get rid of the fill, and we'll definitely give it a stroke, although I don't want it red. We'll make it white. And we'll increase that size here, let's see. So we'll make it an even five points. Alright, that looks good. And I'm going to take the rounded rectangle tool. Make sure you have a large radius, just anything beyond 10 or 15 will work. And then we'll go ahead and just create a handle right around there. Try to make the width of it close to the width of this over here. Control T, and it will drag that, holding Shift at a perfect 45-degree angle. Select the move the tool, hit Apply, and we'll just move this here and try to get it pretty even if you can. That looks good right around there. Okay, so let's go ahead and get rid of this. And we'll hit Control one, and that's basically what it's going to look like. It probably might be worth taking down the opacity of this layer a little bit more. Maybe around 58% or so. That way, it's a little bit more noticeable that you're hovered over it. Okay, and so basically, even if you're hovered over one of these larger ones, this will still be centered and it will still have this opacity fade on the image. And that is basically it. So in the next lesson, we're going to go ahead and export this single asset. This is the only asset that we're going to need, aside from the thumbnails here, which we already have saved, and then begin on the HTML, alright?

Exporting Assets and Writing the HTML Alright, hello and welcome to this lesson where we're going to export just a single asset and begin writing the HTML. Alright, so first thing, let's go ahead and find the layer here for this. So you can always choose, with the move tool auto select and layer, you can just click on anything and it will automatically select the layer for you. And we can see that they're both shape layers, and so the first thing, we're going to select both of them, holding Control, left clicking and then right click and choose Rasterize Layers. And just a note real quickly, if you ever had the intention of wanting to manipulate or change the size of this, I would first, assuming it's not truly a vector, which it isn't and it's made entirely in Photoshop, I would first duplicate these layers, group them up and hide them. That way, you can always go back and make adjustments if need be. Otherwise, if we right-click and rasterize layers without doing that and we merge them, which is what we're going to do by hitting Control E, if you try to make a change afterwards, it's no longer a shape layer. And if you want to make it larger, this is what happens. Definitely a no, no, alright? So let's go ahead and with it merged there, Control A, Control C just to copy it, and then Control N and we'll hit OK. Just paste that in, and then we'll want to save this. I'm going to hit Control Shift Alt and S, and that will be a shortcut for save for web. And we're just going to choose PNG 24 with transparency enabled. Alright, hit Save and make sure before you do this that you open up the 08 begin project zip file. And if you want to save yours over mine, that's completely fine. Inside of the images folder in that zip file, you'll probably see a magnify.png already in here. If you want to use yours instead of mine, that's fine. Otherwise, you don't have to save it over it. So we're just going to call this magnify.png and save. Alright, so that's basically all we need to do on that front. So now, we're going to switch over to our code editor. I'm using Sublime Text, and in that same 08 begin zip file,you'll find these folders here. So we're just working with the images folder. We have that magnify.png along with six different thumbnails. And over here, we're using foundation, which is a responsive front-end framework. I always use it basically, and we have a blank custom.css, which is what we're going to be working in; and also the index.html, which just has some very basic starter HTML all ready to go for us. So basically, let's go ahead and start writing out the necessary HTML to make this a reality in the browser. Alright, so the HTML itself is very simple. All we're going to be using is just an unordered list and referencing the images here. We're going to have an extra div to make this magnifying glass work inside of the list items, and that's basically it, alright? So let's go ahead and get started. Alright, so I'm going to just put a div, id equals container. And inside of it, we'll start our ul. I'm going to do id equals flex-container because remember, every Flexbox element, in order to initiate it, you have a container and then you have the items inside of it. So our container is going to be this ul element right here. And then inside of it will be our child items essentially. So we're going to have li and then a href. I'll try to wrap everything in a anchor text. And div class equals magnify, and then we're going to put in span just for the text, the title of it. Close that, and then the image source equals images thumb-1.jpg. And close the a and the li element. Alright, so kind of lengthy but we're just going to take everything here, copy it and then paste it five more times so we have six total. Alright, I'll go ahead and make some other adjustments. See here, thumb 2, 3, 4, 5 and 6. And that's all our HTML is essentially for this very simple gallery that we're going to make, alright? So this is going to be a good spot to end this lesson. In the next lesson, we're going to get started with the CSS, alright? So I'll see you then.

Writing the CSS for Our Gallery Alright, hello and welcome to this lesson where we're going to begin our CSS to make our image gallery work here in the browser. So just to show what exactly this looks like as raw HTML with no CSS added to it, let's go ahead and open up the index.html. And I'm going to get this browser into place here. We'll move it, stretch it across rather. Not exactly anything close to what we want, obviously, okay? So let's go ahead and get started with the CSS. Okay, so the first thing, I'm going to put html comma body, and we're going to put height, 100%. And background, of course, is going to be three zeros for black. And then padding top, just give it a little bit of, the image gallery some space away from the top of the browser. We're going to put padding top 40 pixels, alright? So we'll save save that and already, got a decent change. Okay, so let's go ahead and reference the flex container. So ul flex container id, and we're going to put in just list style type, none to get rid of the bullet points. Margin, 0 and padding, 0 to get rid of any inherent padding and margins on the ul. Display, flex, very important, because it is our flex container. Flex wrap, we want it to wrap. And let's go ahead and save this, and we'll now see not much of a change yet. We have to apply the items here, the (mumbles) items, which is going to be ul li. So flex-grow, we're going to put in one, and that's going to be one of the main characteristics that's going to make this work, and let's also add width of 250 pixels approximately. So if we go back and now we refresh, oops, I don't think I saved that. Oops, I added an extra T, that's why it did not work. Okay, let's go ahead and refresh and now we'll see starting to look kind how we want it to and behave how we want it to essentially. So let's go ahead and come down. So let's go ahead and just work this a little bit more. I'm going to put in padding top, 45 pixels. I'm going to do color is white for the links. Font weight, bold. Font size, say 2.2em. We'll do text-align center. Margin 0, padding and 0. And position, relative. Save that. And real quickly, refresh, and we see not too much has changed. I'm also going to add ul li img to reference the actual photograph, and we're going to put in width 100%. Save. So if we refresh, we'll see it basically extends the images 100% as need be. This is basically the view that we designed for in the mock up. Alright, so now let's work with the text here. So let's come down and I'm going to reference the span. So it's going to be ul li a span, and position absolute, and that's what's going to allow us to position on top of the image. Color is going to be white. Bottom, seven pixels from the bottom so it's not sitting there. Left, 15 pixels. Font size, .6em. Z index, we're going to put in just 3 so it's higher. Font-family, Raleway, which we have included already in the index html, alright? So now, if we go back and refreshing, we'll see that it looks much more in line with our mockup. Now that issue still remains where we do not have the gradient that's implemented by the CSS because we haven't written that yet, alright? So also, obviously, we don't have any of the hover going as well. So this is going to be a pretty good spot to end this lesson, and we'll pick up by possibly finishing this off and making it work in the next lesson. Alright? So I'll see you then.

Adding the Gradient and the Hover Overlay Alright, hello and welcome to this lesson, where we're going to go ahead and finish up the Flexbox image gallery, alright? So let's go ahead and we're going to put in ul li, after. And this is going to allow us to integrate that gradient, alright? So I'm going to put in content, which is blank, and then position, absolute. Left, 0; top, 0. Width and height is going to be 100%, and display is inline block. Also, I want to change or add, rather, cursor, pointer. And the next part is for the actual gradient applied to the background property. There's a lot of different iterations and variations, especially for browser prefixes. So instead of just typing this all out by hand, which would take quite a while, we're going to use a resource online that's meant for CSS gradients. And as we can see, it's right here. Usually, I just go to Google, I type in CSS gradients and you have different, some of then, different tools that you can use. This one will work just fine. It gives you presets, much like Photoshop's interface does for gradients. And we could see right here, if we select this one, it's very similar to the black to transparent. Only problem is, is it's vertical, which we can change here to, let's see here... Okay, well, it is vertical, that's what we need, but it's the wrong direction basically. So the way we do that is just take these pickers and we just flip them. Oops, get rid of that one, push this one over. And now, that's in the correct orientation that we need it to be, alright? So basically, all we have to do is take this or just click copy, it's copied to the clipboard, we'll come down back to our CSS and then just paste it in at the bottom. Very, very simple. And as you can see, it just gives you all the different browser prefixes for this to work appropriately, alright? So let's get this organized here. And we'll save this. I'm going to switch back here, and there we go, perfect. Much, much easier to read these titles. Okay, so let's continue on. So we're going to reference the magnify class, which was a div that's added inside of the list items. And we're going to put in background, url, images, magnify.png, no repeat. Okay. We're going to specify position, absolute, so it can sit on top. Z index, 5. It's going to be on top of the ul after. And then also, we have width and height, which we don't know yet. So we have to go to, let's see here, Photoshop, find the very one at the end, Image, Image Size, 54 by 55, okay? Alright, and continuing on, let's see here. Opacity, by default, is going to be set at zero because it's only on hover. Margin left. Oops, one second, there we go, auto. And margin right, auto. Left is 0 and right is 0, and this is basically just all the CSS here is for aligning it vertically and horizontally. Top, 50%. Transform, translateY, -50%. Alright? And save that. So if we tried to refresh now, we won't be able to see it because opacity is zero. So let's do ul li hover magnify. And inside of it opacity, 100, important. And then ul li, hover. We're going to specify, let's see here, opacity, .8. Let's save this and refresh. There we go. So yeah, remember when we were doing the mockup, I said .8, you know, 80% wasn't quite enough. But looking at it now when we're actually interacting with it, it works out just fine. Okay, so looking at this now, we have to ask ourselves, are we happy with how this Flexbox gallery, with how these thumbnails are changing? So we have to see, like right around here is around the size of a tablet, something like an iPad or something, and this is perfectly fine in my opinion. They're not just one massive row column stacked on top of each other, which would make it really long, especially if you had a lot of thumbnails. And they're not too small either. But if we go over to, like a smartphone view, especially... This is probably fine if you only had six or so images in your gallery. But if you know you're going to have a lot more, it probably makes sense to have these stacked to side-by-side. So how do you do that? Well, we can use a media query here. So let's do that real quick. @media only screen and, I'll go ahead and put max-width 40.063em. And open that up, and we can reference the ul li and change the width. Now by default, the ul li that we had was 150, and we're simply changing it by less than 100 pixels. So we'll go ahead and refresh this and now, we can see how that interacts. So coming back, pretty good. Now I'd say the font size is probably a little bit too big, especially if you have a different size here, so let me go find that real quick, it's the span. Font size, .6. Try .5. That's, alright, quite a bit better, there we go. Perfect. That is it for this project. So in the next lesson, we're going to begin our second project, which is going to be a Flexbox-based navigation and header area. Alright, so I'll see you then.

Designing the Mockup for Our Second Project Hello and welcome to this lesson, where we're going to begin our final project, which is going to be a Flexbox navigation. And really, the same process can be used here for a full Flexbox layout or website layout. So let's go ahead and go to File, New here in Photoshop, once again to create a mockup of how this should look. So once again, I'm going to do the same thing. This design is going to be 100% fluid, so I'm going to just put 859 by 600, basically the same dimension as the last project. It just works well for my current resolution, and all things else can be equal there. So Control one or Command one to get to 100%, and this time we're not going to use an absolute black for the background. The header will be an absolute black going across the top, but the background here is going to be somewhere around 252525. So we'll go ahead and use the paint bucket, left click and something like that will work pretty well. Okay, so now what we want to do is change this to black, and we'll use the rectangle tool and just come up at the very top and we'll create a... Something right around there. And this will be our header. Okay, and I don't have an official logo for this, just because this is obviously a fictional purpose, so I'm just going to really create a type-based logo right here. So with the type tool, I'm just going to left click and just type in some logo, alright? So we'll make this white. I'm going to use Raleway again, just because I have it included by default in the HTML document. We'll make this black, and we'll give it some color here. Alright, so Control T just to get that a little bit larger. Alright, right around there will work. Alright? And now let's go ahead and do the navigation, which is going to be, is going to consist of four different links along with a little search icon, and we'll use some jQuery, JavaScript, to make that function when we get to the HTML portion. So just coming right around here, I'm just going to left click and I'm going to put the capslock on. I'm going to put ABOUT, and first, let me switch back here and make this white so we can see what's going on. Make this regular. One, two, three, four, five, six, seven, let's come out a little bit more like that. And I'll just copy that portion up to the T, and then paste three more times. So beginning with this right here, I'll put in SERVICES. This over here, we'll put in GALLERY. I'm just using generic links here or names rather. And then selecting all of that, we'll put in CONTACT. So these are quite a bit bigger than I want them to be, so I'm going to hit Control T and just scale them down roughly probably right around there. And move this over. You can use your keyboard arrow keys to get it aligned up properly, so I'll make just this, just an even, let's say, 14? Eh, I think we'll go down to 13. Alright, okay. And then over here, we're going to have a little magnifying glass, pretty similar to how we designed it in the previous project. So just real quickly once again, we'll take the ellipse tool, Shift and Alt and get rid of the fill. Give it a stroke of white and increase the size. You don't want it too thin or too thick. Let's see here. I think right around an even two will work, points. And then we'll come here and I'm going to take down... Oops, it wasn't on the rounded rectangle tool, there we go. And create that, Control T, hold Shift and rotate it to a 45-degree angle. And that's a little bit too long so we can take the direct selection tool and just select these bottom and hit the up and left arrow key a couple of times. There we go. Alright, so Control one, this is what it should look like. Alright, it's pretty good. I think I want to drop down the size of that, the ellipse up there, so I'm going to zoom up. Just holding Shift to do that. And I may make it just a little bit thicker, so let's go ahead and take this to three. Alright, that's a little bit better. Okay, so this is what it's basically going to look like at a larger viewport, like on a desktop or something like that or you know, basically roughly around this size. As the viewport gets smaller, this will naturally come in, and this navigation, by the way, will also be its own Flexbox. So we're going to have a Flexbox container that's nested within the Flexbox for these three elements. So we're going to have a div that holds the logo, and we're going to give this a flex grow property that's going to be a lot larger than one to account for the space that we want to naturally remain between the logo and the navigation. And then the ul will be another child item, and then this over here will also have its own div as well, alright? And when we collapse these, we're going to basically make it so that these links right here will fall to a second line. And instead of having just four of them all scrunched up, specially on a cell phone or smartphone view, I also don't want it to be all columns as well, having their own row. But two will be side-by-side basically. And then this over here, instead of showing a magnifying glass on a smartphone version, we're going to have just it show a stylized sort of search box. Alright, so real quickly, before we wrap this lesson up, we're going to just put in just a title and some content, just to fill this out a little bit more. So I'm going to put Flexbox. How about Flexawesome, there we go. Control T, and we'll make this gray, I think. And then I'm going to come over here, we're going to do a search for lorem ipsum. And let's go ahead and just take the first couple of lines right there. And I'll take the type tool, left click, drag out something around here and paste in. I'll probably make that a little bit bigger. Alright, just something like that. And there we go. So what we want to do now in the next lesson is create another mockup real quickly, and that will show what this design is supposed to look like on a smartphone version. This way, it'll help us structure our CSS accordingly, alright? So I'll see you then.

Designing a Mobile Mockup Alright, hello and welcome to this lesson where we're going to finish off our mockups by designing a mockup and altering this layout for something that's consistent with a smartphone view. Alright, so the first thing I want to do is we'll go ahead and just take everything here with exception to the background, layer 1, and group it up. And I'm going to duplicate that group. And we'll hide this first one, and let's go ahead and, let me think how I want to approach this. We'll go ahead and put a new layer just beneath this group 1 copy. And inside this layer, we'll just make it black, and what we'll do, I actually will put that on top and just bring down the opacity slightly. Alright. And once again, I'll duplicate this. This one, I'm just going to hit Control E to just flatten it, and this is the one that we'll use to repurpose on top. Okay, so basically, I want to create a new container here, so I'm going to use the rectangle tool to create just the width, something that's consistent with a smartphone view. And roughly, right around that size. Okay, so I'm going to move it here just around the center, and I'm going to take this right here, right click and ungroup the layers. And I'm going to take the logo and just begin re-piecing or putting this layout back together here. Let's take this real quick. We'll leave it there for now, that's fine. Alright, so the logo, when it's basically in a smartphone view, is going to be centered instead of left justified over here. And then, we are not going to need this, although we're going to repurpose it inside of a text field. Now let's take this stuff real quickly and just put it near the bottom. I'll scale this down. This right here. Oops, let me undo that. I'm going to zoom out so we can see the whole thing. Well, I'll just scale down the size of that text. Something around 15 will work. Alright, and now we have to repurpose the navigation, allright? So basically, they're going to be centered elements and there's going to be two different rows. So the way we can do this, probably just be easiest to just duplicate that real quick and just try to get them eyeballed in terms of being centered. alright, and then we'll take this right here, this layer, and put a new layer, Control Shift N, create a clipping mask, hit OK. And we'll give this a container. Right around there. We'll double-click it, and we don't want it to be too bright. Somewhere right around here will work. Alright, and this background color, by the way, will still be this background color. So let me go ahead and bring that back. I think what we'll do is add another container underneath. Oops, let me get this color right here. Copy that. There we go. And then also, the search box will be underneath it, so let me move this down just slightly. And we'll add another container for the search box. And it's just simply going to be black. Oops, I'm going to come up here, I believe. There we go. And that'll be a little bit more like that. Alright, so in the container, we're going to have the search box and it's going to be around the search box. And I'm just going to put it roughly right around here, and it's going to be lighter for the color here. Hit OK. And then we're going to take this over here, merge those, alright? And we're going to move it into place over here. I'm going to zoom up, Control T, apply. Right around there looks pretty good. Yeah, I'm going to right-click and simply rasterize it and then double-click it and bring up our layer styles and choose color overlay. I think that's pretty good right there. Change this to normal. This color code is 757575, hit OK. Control one, and there we go. So that's basically how it's going to look, the layout, and how it's going to adapt on a smaller viewport, like this. Alright, so go ahead and save this, although don't over, well, I guess it doesn't matter if you overwrite it, but you can save this as a new file, and we'll be referencing both this layout and the full layout, which we saved down here in the upcoming lessons, alright, so I'll see you then.

Exporting More Assets and Writing the HTML Alright, hello and welcome to this lesson, where we're going to export just three different assets that we have, which is going to be the logo; this tiny magnifying glass, as well as the larger magnifying glass up here. And then we're going to get started on the HTML. Alright, so let's go ahead first and we'll take our logo right here, and right now it's a type layer, so we're going to right-click and rasterize it. Control A, Control C, Control N, hit enter and Control V to paste. Now we're going to save this for web, so Control, Shift, Alt and S, and we'll go ahead and make sure it's on PNG 24 with transparency enabled. And save it. And you want to, at this point, make sure you download the 13 begin zip file, which contains the folder structure and open it up in the images, which will be blank. And you can just simply name this logo.png. Alright, and we'll come over here, we'll get this magnifying glass right there. Make sure you right-click Rasterize Layer Style that we applied. Control A, Control C, Control N, enter and save for web. And we'll call this magnify2. And the magnify1 will be the other one that we have. So I'm going to take all these layers and group those. And hide this and that way, we have our full layout right here back. And let me select this one. Auto select layer, got to make sure you click on it. Oh actually, no, one second. I forgot I grouped that. Okay, there we go. Now we could take this and just Control, left click. Now we find both of our layers, right-click rasterize them. Control E to merge both of them. So now it's on some layer. Control A, Control C, Control N, paste and save. We'll call this magnify. Alright, sorry if I'm going a little bit quick but I'm just so used to the shortcuts. Okay, so now we have all the assets that we need, just those three, and now we can get started with the HTML. Alright, so basically, if you open up that 13 begin, we have the folder structure here. We have the three files that I just saved in the images folder. Index, again, same thing as the previous project, just some basic HTML here in the head, and then a blank area here in the body, with exception to this portion, which is for the foundation front-end framework. Okay, so for the HTML, fairly straightforward. So we're going to start with the header HTML attribute, or element rather. And inside of it, we're going to put in just div class equals child. I'm going to give them class as a child so we can reference them. And inside of this is going to have the logo. So we have image source equals images/logo and png. You could wrap that in an a tag if you wanted to and make it clickable, but I'm not. And then we have our navigation, which is an unordered list. Alright, and inside of there, we'll have li, a href about. Alright, and we'll just take that and copy it. Paste it three more times. And we'll have Services, Gallery and Contact. We'll use text transform to make sure those are capitalized with CSS. Alright, and the navigation. Underneath that, we're going to have another div class equals child. And inside of there, we're going to have image source equals images/magnify.png. Class equals... Oh, actually we don't think we need to add class child on that. We'll put id equals magnify though. And then input is type equals text, name equals search, id equals search. And by default, this will be hidden on larger sizes. Alright. And then finally, that concludes the header portion. So after that, we're going to put in div class equals container, and this is just going to contain our main content underneath. So we have h1, flexawesome. And then we have our paragraph over here. Switch back to Photoshop. Control A, Control C and paste that in here. Alright, and go ahead and save this. It would be a good spot right here just to end this lesson. In the next lesson, we're going to get started with our CSS, alright, so I'll see you then.

Writing the CSS Hello, and welcome to this lesson where we're going to get started with the CSS for our Flexbox navigation. Alright, so let's open up the CSS here. Let's also, I'm going to open this up in the browser just so we can get it going. Let me go ahead and drag this off my other screen. And this is what it looks like with no CSS. Well, there's some CSS technically with the foundation CSS, but this is basically what it looks like without our custom CSS. So I'm going to double-click on our custom CSS and get started. So again, I'm just going to start with html, body; height, 100%; and background, 1c1c1c, sorry about that. Okay, over here also, I'm just going to change the default hover color of the links real quickly. And I'm going to put in, sorry, put in color, gray. And header, which is our first HTML element that we have to specify, (mumbles) display. Here it's flex, make it a Flexbox container. Background is going to be black. Padding, we're going to give it some padding at the top of it by 18 pixels. And we're going to justify content, which, if you recall from the initial lessons, is for Flexbox, space around. Flex flow is going to be row and wrap. Okay. So let's save that, see what happens. Alright, so already things are starting to come together pretty well. Okay, so we're also going to reference the child elements that's inside of the flex container header. So child was a class, flex grow, 1. Alright, let's reference the unordered list here. This style type is none. Display is flex because remember, the items inside of it, which is the li items, are going to be based on a flex layout. Flex flow is going to be row and wrap. Width is going to be 400 pixels, and margin, 0; padding, 0. Alright, so then we have the ul li. Flex grow is 1. Text-align will be center. And width, 100 pixels. So we have four links, 400, and we divide that and you'll see how that works out when we get to the browser. ul li a. We have color is white. Font size is .9em to bring them down from this default size. And then text transform is uppercase. Alright, so let's go ahead and save that and see what this looks like. Alright, so quite a bit further already we've got. And of course we have quite a bit more work to do though to get this working correctly. Okay, so now I want to reference using pseudo elements is header div, nth child, 1. And inside of here, we're going to put flex-grow, 8, and this is basically referencing the first div right here, which contains the logo. Alright, so we're going to put in width, 125 pixels; and padding-bottom, 15 pixels. Alright, so let's see what this does to the layout now. As you can see, it pushes it over because we gave it a flex-grow of a greater number than one, which is what these have by default when we specified it right here. Header div, nth child, 1. Img, and that's going to specifically reference the image inside of it, which is the logo. And we're going to put margin left, 20 pixels. Alright, save this and go back here. And this is basically what we have so far. Okay. It's going to be a good spot just to end this lesson. In the next lesson, we're going to continue on with the CSS in here, alright so I'll see you then.

Finishing the Project Hello and welcome to this lesson, where we're going to continue on with our CSS for Flexbox navigation layout. Alright, so underneath here, we're going to reference the search can get that styled up. So background is color code of 3a3a3a. Sorry about that. And url, images, magnify2.png. No repeat, and five pixels, five pixels top and left. Alright, so border radius is 10 pixels. You want to add in different vendor prefixes for that if you wish. Border, none. Outline, none. Color is going to be white for the text inside, and padding is four pixels, four pixels. And on the left, we're going to put in 25. And display initially is going to be none, but I'm going to leave that out for now, just so we can see it. So let's refresh. And we can see what this looks like right here. So now we'll go ahead and keep that back; display, none. And then also, we have magnify. Sorry about that. And we have cursor is pointer because we didn't wrap it in an a tag, so we're just going to change the cursor to what it looks like if it were so you can click on right here, this portion. So refresh that, now we can potentially click on it. It's not working yet with the jQuery, but let's continue on. We're going to put h1 and p. Color is not white. Let's come over here, it's just this gray color, which is b2b2b2. And font family is Raleway. Alright, so let's refresh. There we go, it's wrapped in a class called container, so padding, 80 pixels roughly. Alright, okay. So let's continue on here. So we're going to have two different media queries. Let's see here, the first one is going to be more for tablet sizes, roughly. So I'm going to put @media, all. And max-width, 800 pixels. So inside of here, we're going to reference header and justify-content, which is a Flexbox property, space-around. Container, we're going to adjust that from 80 to 50 for the padding. And search, width is 80%. The id of search is on the text input. Margin is 0; auto, 0. Or zero auto rather, just like that so it centers it. Alright, and then we also have a decent amount of CSS for our last one, which is @media only screen and max-width, 542 pixels. Alright, so let's save this right now and we can see what's happening to the Flexbox layouts. Okay. So right now, definitely not close to our original. Let's see here if we hide this and bring this back. There we go. Definitely not close to that, so we need basically this to look like this. Okay, so let's continue on. So I'm going to reference the header, div nth child, 1, which is our logo. Margin, 0 auto to center. Display, block to make that work. And padding bottom is 0, okay? Then we're going to have header. And in there we have flex-direction, column. So it's basically going to take our flex direction, which is previously row to take those three different child items and put them next to each other, which is the logo navigation and search. And now it's going to say, put those all on top or stack them on top of each other vertically. Alright, and then also padding-bottom, 15 pixels. We also have child, and flex-grow is 1 and text align, center. Let's go ahead and see if anything is changed since we've done this. Let's refresh. We see now, this goes on its own line and things are centered up. So we're getting closer. Let's see here, we also have to reference the ul. Background, we want to change it to the color that we specified, so 232323. Width is going to be 100% to make it span all the way across; and then margin-top is 15 pixels away from the logo. Alright, and that's basically what that does. We're getting there, so let's keep on going. ul li, width is going to be 50%, and padding, five pixels, just to get it away from everything. And there we go with that. Great, okay. Let's continue on. Just a few more properties. We have header div nth-child, 2. And this is going to be align-self, which is another Flexbox property if you recall. Flex-end, and width, 22 pixels. And search, we're going to have display, block; width, 80%. Margin is 16 pixels from the top, auto, 0 and auto. And just two more. So we have magnify here. Display, none. And then container, bring the padding down even more to 30 pixels. Okay, so let's refresh. There we go. So now this behaves how we want it to. And if we come back out, we can see everything is looking pretty good in responding how we want it to. However, just one last bit of coating is going to require making this thing function when we click on it. Okay, so let's go ahead and just knock that out real quick. So if you open up the js folder, we'll see we have a script.js. The script.js is already linked here right here. Alright, so let's open up the script.js. And inside of this code here, this is where we're going to specify just... Really, it's only four lines of coding, so it's very, very simple. So we'll have this right here, magnify. And that's the div of the magnifying glass icon in the header. Click, function and open up curly brackets. Put a semicolon at the end here. So it's basically saying if somebody clicks on this ID, which is referenced right here, then do the following code inside, okay? So what we're going to do first is reference this, which is saying that the magnify ID, hide. And we also want to show the search ID. So we put in search, and we could just put in show like this, and I'll show you what that looks like. It just immediately displays it, nothing too fancy. If you want to have animation, you can specify toggle and inside of this, scale. And you can research these properties specifically. You type in jQuery toggle, you'll see all the possible values that you can put in here. So if we refresh this, we can see, it kind of gives you a cool animation of sorts. Okay. And then finally, the other two pieces of lines that we have, or one rather, is search css, and this allows you to control CSS properties, which is very handy. Display and block. Alright, so let's go ahead and refresh everything. Again, we know what it looks like at this point. And it automatically transitions to the search box, so we don't have to worry about the click or jQuery on smart phones and small devices. But if we come out here, we could see that this works just well right around there. And there we go, very cool. Alright. Hopefully, you learned a lot throughout this course, and I know, speaking personally, I'm really excited for the future of web design now that Flexbox is here. So I have to say, in terms of the big impacts on web design, Flexbox is as significant as responsive design was several years ago. Alright, so once again, I hope you enjoyed the course, and I'll see you next time. Alright, good bye.