Responsive Media Queries

[00:00:00]
>> So we're gonna move on now to setting this up for media queries. And there is a CodePen that will give you the starting state that I have right here. If you wanna switch to that CodePen, or you can just continue on in the same CodePen, which is what I'm going to do and write the rest of the code here just inside of this.

[00:00:21]
So when we go to a tablet then, we need to think about how our various arrangements are going to change as we move through our various break points. So right now, let's just start up here at the top once again. Here on our set of four columns, maybe what we'd like to do is when we get to our breakpoint, right, cuz right now these will very happily wrap onto another row, just like Flexbox does.

[00:00:50]
And if you're happy with the way things look, you could absolutely go with that as a look for your webpage, because this is what Flexbox does, right? But if you wanted to make these a little bit prettier and make them stretch across the page, then we would wind at picking a breakpoint here whatever it happens to be.

[00:01:11]
I have a utility up here, I'm in Firefox. I'm not sure if this is available for Chrome or not. And it's a little item that displays my screen dimensions up here on the top, I have it currently disabled. So if I turn it on it'll just tell me up here on the top of the page what exactly my screen dimensions are, so it's not going to help me here in CodePen.

[00:01:37]
But if I was moving the whole window, it would change my numbers up here on the top, so I could just sort of scrunch around and go, you know what, this is getting a little bit tight looking. I think I need to put a breakpoint somewhere in here.

[00:01:50]
So, I've actually already done the work on this though. So what I wanna do is I wanna add a media query. Actually, we're gonna add to media queries. So, first of all, Here, everything that we've put down here so far for figure span2, span3, span4, and these various order properties.

[00:02:13]
These are all for our desktop layout, right? So we actually wanna put those in a media query right away. So let's go ahead and set that up. The row can stay outside of the media query, this is gonna start at mobile dimensions. It will carry into all of your media queries going forward.

[00:02:30]
We actually want it to continue to display flex and a row wrap and the space between and the gap, we want all of that. But these values here for flex-basis and the ordering and so forth, that might be desktop specific. So let's add a media query, @media. And then we'll say something like min width of something like 800 pixels.

[00:02:59]
My screens blown up so big, it's hard to say for sure. Feel free to adjust to whatever makes sense for you. And we'll indent those there, okay? So all of that, figures, span, span3, span4, order 1, 2, 3, okay? So that's now all inside of our media query for 800 pixels and higher.

[00:03:25]
So when I make my CodePen window of the appropriate size, I'll get my formatting back. Okay, so then when we go below 800 pixels, let's say starting around 550. Here, I'm actually going to put in my media query here. Then width of 550 pixels. And we can wrap this media query actually around that row declaration.

[00:03:59]
Now why on earth would I do that? Because of the screen gets smaller, we're now not going to be displaying our boxes in Flexbox anymore, right? Okay, so by default, we have a whole bunch of these figures and rows and so forth, they are block level elements, right, block configuration.

[00:04:23]
And by default, they just stack on top of each other. And so by not declaring our Flexbox until we get to our tablet dimension when we actually want things to start showing up on rows, that's a pretty easy way to work with this. Now, the other way that you could do this would be to put your Flexbox declaration here outside of the media query.

[00:04:47]
And, you could set your flex-basis for everything to 100%. So display it row wrap, but everything is 100%. Or, you could go to displaying rather than row wrap. This would be a case where you might say column wrap. So we actually do want to have a series of columns here or the page, really only one.

[00:05:07]
And are flex-basis 100% so that things stacked on top of each other. That would be the other way to deal with us. But, generally speaking, I just started declaring my Flexbox layout inside of my tablet media query and let things be outside for the mobile layouts. Because they'll just stack on top of each other which is usually what you want to do anyway.

[00:05:33]
All right, so then here, all we need to do is come up with the next set of values. So in our row here for figure, our default value for figure, which will get overwritten later with the classes that we have and the later values. So previously, these were 22% wide, now we want to have still our 4% gap and two boxes on the line.

[00:06:00]
This will actually be a flex-basis of 48%, right? Two boxes on a line, two of them. How about our span2? It's probably kind of the same, right? So figure, In spa2 we're actually going to both have that same kind of formatting. So everything's pretty good until we get down here towards the bottom of our screen, right?

[00:06:34]
So we've got our row with the four boxes, here it is, looking good. Here's row number two, looks good. Row number three, not so good. So what we wanna do at row number three? Most likely what we wanna do is we wanna have our span3 stretched to 100%.

[00:06:55]
But then the item that was all by itself before maybe we'd also like that to stretch to 100%. So we have our two boxes stretching to 100%. So here, we'll do a span3 with a flex-basis of 100%, Okay? So there's that. Now, the second box here from that row is doing exactly what we told it to do.

[00:07:31]
It's displaying about half the width and if that's what you want, you can certainly leave that. But it might be that in this case, you want this one just stretched full width of the page, what are we going to do there? Well, we're gonna have to make a new type of class for that.

[00:07:45]
[COUGH] So we might call this, I don't know span31, something like that. I'm really bad at naming these. Flex-basis, there's also 100%, and then we'll just apply that here in our HTML. Okay, so here, class=span3-1. There we go. So there have to, in this particular case, these are both gonna stretch to 100% here.

[00:08:27]
But when we get the screen larger, oops, we're gonna have to write a class for that too, aren't we? Because it's going to continue to do what we told it to do. When you set it here in your earlier media query, span3-1 as a flex-basis of 100% that will carry into this later one, that's why we do all min width.

[00:08:48]
What comes before will continue into the later media queries unless you specifically override those values later. So the span3-1 flex-basis of 100% carries into the media query here of 800 pixels. Unless we declare it to be something else, all right, we probably want this instead. So span3-1. And now when we make the screen bigger, we get that layout back again.

[00:09:19]
You see how we did that? But when we go smaller, it does exactly what we want it to do, two big boxes stacked on top of each other.
>> Would you not use flex direction column so you can use align and justify?
>> Sure, there's lots of ways that you can do what I'm talking about.

[00:09:39]
It's CSS, there's a bunch of different ways that you can accomplish the same kind of thing. I try to tell you things that are relatively straightforward and easy to understand in the code, but I'm sure you can find other ways of doing this. If it makes more sense to you, that's great.

[00:09:55]
As always, comment your code so that people understand what it is you're doing. What we have left here is, we haven't written our span4, that's this yellow one right here. That one is not had a class added yet so we can say span4 has a flex-basis of 100%.

[00:10:19]
There we go. And when you do that, because the value here for span4 is set here to be the same in your tablet media query and then in your desktop media query, you don't actually have to redeclare it. You can if you wan to, if it makes your documentation easier to read.

[00:10:37]
So people understand what's happening here. By all means, leave it in, you haven't heard anything. But you don't have to have it here inside of your desktop declaration, because it will carry through from your tablet media query up here. Right, we're not changing that particular breakpoint or particular flex-basis value across the media queries.

[00:11:02]
All right, so then the last thing to deal with is these boxes down here on the bottom, that's that one-to-one layout. And so here, Let's take a look at our HTML again. We had a span2 and then we had this two figures down here that have just this ordering type of class associated with them.

[00:11:27]
Now, we could take these order classes and we could tie them into the Flexbox layout as well. Could be done? It's probably easier to leave the ordering classes as their own utility classes that you just stack up on top of the Flexboxes independently. So now you have the flexibility of taking ordering anywhere you want inside of your design.

[00:11:50]
So, if you take that philosophy, because it's just a philosophy, technically speaking you can do whatever you want, then we might think about adding seven additional classes here in some way or another. Whatever it is that you wanna do here to deal with this particular situation. So probably what we wanna do is, we wanna have this span2 here, this first span two, we actually want it to go to 100%.

[00:12:19]
And then these last two fingers, we want them to go to like 50%. So we'll probably wind up writing some additional classes for that. Following this span3, span 3-1, we might have a span2, -4. So normally, 2 at desktop, 4 at a tablet media query. So here we'd say a flex-basis of 100% for that.

[00:12:52]
And obviously, you could combine these into a single declaration as well if you want it, and then we need to change that up here, 2-4. And then we need to adjust that in our desktop, span2-4. Okay, so that's good. And then these two here seem to be doing exactly what we want them to do already.

[00:13:23]
Which is behave like the boxes that we have appear at the top of the screen. So that's pretty much it, that's how you write a grid system here. Look at that, so what we did was we came up with a bunch of scenarios in our HTML, we laid them all out, documented them, right?

[00:13:42]
And then we just went through and wrote a few styles for all of those. So you don't really need a huge complicated responsive design framework to deal with this type of thing. You just need to know how to do a little bit of math and you can put something like this together on your own.