Overview & Setup

[00:00:00]
>> Let me just give you a little bit of background about the Flexbox grid system and how it works and then we'll jump into the next code pen and we'll build a grid system using this. So the way we want to think about a grid system with Flexbox is that we're going to have a series of boxes whatever they happen to be they have some kind of content inside of them.

[00:00:21]
And your HTML may look something like this I'm using just the div element here because they're clearly no content no meaning whatsoever. This does not have to be divs and in fact in a moment you'll see we do things with figures or you could do articles and sections and any of the HTML elements but the critical piece of this HTML is that you have, I have one element that wraps around at all.

[00:00:47]
That's the parent, the flex container. And you're gonna have the individual boxes. Those are the flex items, or the children. So that's the way the HTML would look for that. The CSS winds up looking something like this. So on the row, the parent, we're going to say display flex.

[00:01:06]
We do a flex flow of row wrap. Justify the content however we want to justify it, might be centered, might be spaced between something else. And then you can also set up a gap. This is a new property in Flexbox. You may be familiar if you know a little bit about CSS grid.

[00:01:23]
There used to be a thing called grid gap. Now it is all just gap on the grid side, and on the Flexbox side gap is a new property that's available to us. So you can in fact specify a gap now inside of Flexbox. Then for your individual boxes, you can set up a series of flex basis.

[00:01:43]
This is not real code here. I need a whole lot more stuff, a lot of media queries in order for this to actually be a real thing but the idea is that you can set your flex basis to one size for desktop a larger size for a tablet and a really big size for the phone that's typically the way you would set this, just kind of thing up.

[00:02:01]
So, that's the way the code is going to look broadly speaking, as we start to set up a Flexbox based grid system. And if you take a look at Bootstrap and Foundation and UI kit and all the rest of them, you will discover that they use Flexbox in this very way.

[00:02:17]
Okay, you can also rearrange your columns. That is something else we're gonna try here in our Flexbox grid system in just a moment so that you can put things in order that are appropriate to your HTML to search engine optimization with that you have the important information listed first in the source order the less important information listed later and then just reorder using the order property inside of Flexbox.

[00:02:44]
Alright so we are on two chapter two in our notes. And so this is divided up this next exercise that we're gonna do, we're gonna try three pieces of this. So the first thing that we're going to do, we're gonna build a desktop based system only. Just so you can see how this works without having to deal with media queries.

[00:03:03]
Then we'll go back and retrofit our grid system so that does in fact work across different devices. So we'll add the media queries and make changes to our values. And then I have a little challenge for you to try. So that is the order of the next few things that we're gonna do here.

[00:03:19]
So let's start here by part to a desktop only, and says the starting code pen. And this is the layout that we have here. So as you'll see, we have a whole bunch of these beautiful boxes, right. They lovely, and they're all different colors and they have this lovely SVG based background, okay?

[00:03:38]
And they're all just stacked on top of each other because we have no layout code here present. So let's just check out our HTML first. So you'll notice that I have a series of comments here. We have one row or one box per column we're gonna build a four column layout and as we scroll down here's we have two boxes each spanning two columns so this is what we're gonna code and so forth, there's five rows in all, you can just read the comments there.

[00:04:10]
For each unit of content, we have it set up as follows. This might be a new HTML element to you, this is the figure element. And figures are incredibly useful HTML elements. They start with figure they end with figure. And inside of them, you might be under the conception that a figure would have an image and then some text that goes underneath the image would be in an image tag, and the text underneath would be in the fig caption tag.

[00:04:40]
However, you can use figures for a whole bunch of different things so you see here I don't actually have an image I just have a div with a class of one that has the styling that makes the little the textured background and the color and so forth I'll show you that in a second.

[00:04:57]
You could do this with the pre element and you could put in ASCII art. That would be one way you could do this. You could use the pre element, maybe the code element. You could put in some code here as an example with a caption underneath. You can reverse the order of these.

[00:05:13]
You can have the figure caption first and whatever it is you're demonstrating later. You can have multiple images inside of your figure, so in other words you could either put up a nice layout of some number of images or you could do something like an image carousel or some other interactive kind of image.

[00:05:32]
So figures are incredibly useful and what they are intended to indicate is that this is a unit of content so we have a graphic or code or something and then an explanation that goes with it. That is the right semantic markup for that type of thing. Okay, so it's pretty much like this all the way through.

[00:05:55]
I've got some notes in here. We'll go through all of that in detail. And then down here in the CSS, let's look at what we've got. I've got an empty spot here. We'll start writing some CSS, but I've already given you some obviously. So just so you know what's here we have our border box declaration that I described to you earlier.

[00:06:14]
And then underneath of that we have the body tag turning off our padding, we turn off the border. We have a font family and then I have a background happens to be a gradient background here. The figure itself has a little bit of margin and padding associated with it which I've turned off.

[00:06:32]
Here's the caption styling, just the background color, a color and a little bit of padding to make it look pretty. Here is a style that's going to reduce some of the margins. Remember that H2, in particular by default has a big margin associated with it. This reduces all of those margins to half a realm with this particular selector makes it look pretty and symmetrical and then we've got this is the textured background here, the texture comes from right from within code pen itself it's something you can just download and plug in so here it is it's an SVG.

[00:07:12]
And this is the formula that makes it display. I've set a minimum height on these, again, just for demonstration purposes if I didn't put it a minimum height with this kind of background SVG, you wouldn't see it at all, right, because it has no actual content inside of that div so you would just see nothing.

[00:07:34]
So we have to put in a little bit of height and then each of these have a class associated with them which gives them a different color. So that's the code here that we have to start with. All right, so with this HTML, let's start with our first row here.

[00:07:53]
We wanna have one box per column, we are going to have four columns going across the page. Reason I pick four columns it's a nice symmetrical number and all of the responsive design frameworks use 12 columns on the page. It's a lot of work to code 12 columns and I'm not sure you actually learn a whole lot more by going all the way up to 12 than you do using four.

[00:08:16]
So what we're going to do first here is what I like to do is this I actually like to click the little triangle right next to each of those figures. And you'll just condense them into a single line of code. So you can think about those as those are our boxes, we don't actually need to add any HTML inside of them.

[00:08:36]
Those are our four boxes. If those then our boxes on the page, we need to have a parent around them to give them flex powers, right. So to do that, we're gonna put a div around this with a class of row. Why div? Because this is doing nothing except holding a class for us.

[00:08:59]
It's not trying to convey any meaning here whatsoever, okay? Div with a class of row series of figures that come inside of it. All right we can do the same type of thing here for all of our other examples so here in row two let's do that again div with a class of row let's go into go around to figures So again, nothing is going to happen.

[00:09:28]
We haven't written any CSS to deal with this row that we're writing here. It's just going on a long down the page In row three, we have a big box and a little box Still div with a class of row Slash div. And then here in row four, we've got just a single box that's gonna span all the way across the page.

[00:09:57]
We can still do that with Flexbox. And then finally in row five, we're going to have small, bigger small going across our row. So let's set that up as well. Div with a class of row, okay, so the person who was asking before how do you keep some of them some number of boxes on the row, this is the way that you would do it.

[00:10:38]
You were artificially constraining him using HTML and so we've specified exactly where each row should occur. Now we're gonna write the CSS to make it look the way we want it to look. Okay, so in our CSS box here, clearly we need to make a row class.