Responsive Breakpoints

[00:00:00]
>> All right, let's talk about probably my practically favorite part here, is the fact that I don't have to write media queries. [LAUGH] Cuz there are a few things. I have been doing this for a very, very, very, very long time now. And I will never remember syntax for putting a CSS style sheet into an HTML document.

[00:00:20]
I'll just note, I've been doing this since I was 10, and I will still never. Gonna be 40 next year and yet, still can't remember it. And a few of these other things and media queries also fall in there as well. And so the way this works is all the classes that we're using, that have, I had none of these media query variants on it effectively take first at our smallest size.

[00:00:47]
And then after that it's kinda take that mobile first development, which when I am smart, I do. And when I am stupid I forget to, and then I regret it, and then the next time I'm smart again for three more times. And eventually I get lazy and stupid again.

[00:01:02]
But you start with the kind of basic one and then you can say, coo. And then as soon as we go above 640 anything with the small variant takes place. And then when we go above 768, and all of these are tweakable as well. And we're gonna do some of that just to show you cuz I keep saying, [INAUDIBLE].

[00:01:24]
And we sort of sorted some of them the theme, but we'll actually see how this works. Cuz we use 640, I don't know the width of an iPhone these days or an Android phone. I still think it's, I mean I can literally open the Chrome developer tools and find out about five seconds, which we will do.

[00:01:41]
But for a lot of these things I think that we, I know that we support I think 375 is the smallest that we do when we're doing our designs and stuff along the design. So we added in an extra small as well, and I will do that kinda with y'all so you can kinda see how some of this works.

[00:01:56]
And then that will get us ready for some of the more fancy layout stuff in Tailwind, once we have that kinda piece in there, too. So,. let's go grab just something. And just to kinda demonstrate how this works. I am gonna start with one of those container divs, we talked about before, container.

[00:02:21]
And that's the one that will expand to whatever the last viewport was, in this case. So div class container. Nope, that's not how you type. Great, and I will say, I'm gonna do something else with this in a second, but we'll give it a little bit of extra height.

[00:02:50]
In this case, we'll do height, 36, the other thing is these are fractional heights. So if you wanna do something that's a 25% is just 1/4, 3/6 is, you can guess it, it's the same as 1/2. So on and so forth. But you can actually do percentage one just in the class as well.

[00:03:14]
You're not stuck with just these REM units either. Cool, and so what we're gonna do is, Who has a favorite color?
>> Teal.
>> Teal, what shade of teal would you say is your favorite color?
>> 100.
>> 100, okay, great. And then what's your favourite colour?
>> Black.

[00:03:42]
>> Black, okay. You're gonna get shades of black so,
>> Great.
>> I don't know how many shades of grey there are in this. Let's see if or.
>> Orange.
>> Orange Favorite shade?
>> 500
>> 500, good choice. LG, and we got a favorite color?
>> Red

[00:04:10]
>> Red, you can't pick one by the way, if anyone has a favorite colors on here you can't do that. Mine's green, I'm gonna just yell another favorite color at this point, I'm not. Anyone watching the livestream is done waiting for me to announce every single color. We'll start with this because I think on this MacBook I think there's a I could go to 2XL, but I don't think this screen with the way that I have to set up here will ever get to those.

[00:04:35]
So I think we can call it at this point. Great, and so I can do one or two things here. I can, for instance, go into this responsive mode and that's all the way down there get more. No, not coming up? Okay, fine. We will do it with no code then.

[00:05:02]
There we go, there we go. And as you can see, as it goes through the breakpoints, the different variants apply. And you can see that this, especially when you get an auto, will kinda stay. At the last viewpoint it hit until it literally switches to the next column, that's how that container works as well.

[00:05:21]
And so you can have different layouts very easily based on the width. And you can do this throughout your application, you can say, okay, I wanna flex column. If we're at the smallest viewport and as soon as we go to medium just md colon, right? Go to like a flex row wrap, or what have you?

[00:05:37]
You can change all this stuff very easily and very quickly on the fly. You can do other silly stuff, right? You could do something like, we can grab all these as well, And we'll say, We're gonna say something like, After content is tiny, that's just the one that doesn't exist.

[00:06:17]
Go through as well, just pop a bunch of these on. Cool, and so we'll say this is small, Medium, large, extra large, cool. And so now we can kind of, we see it's tiny. Let's go and make this bigger. And it will also change, this is tiny every time.

[00:06:54]
Did I not save it? Or did I mess something up, check it. I didn't put the after on the rest of these. Right, so this is, again, you can stack the variance do whatever you need to do. Cool. Yep, now it's changing. So let's say we wanted to add that 375, right,?

[00:07:19]
As a breakpoint as well, we can do that super easily in our theme. So, we can literally go in here and we can say screens. And we'll say extra small is 375. Awesome, thats gotta, String, great. Now we can go back here and also add in, Extra small and we're gonna go with, And just add in breakpoints for whatever we need as we go through.

[00:08:10]
[INAUDIBLE] Tiny, I want to see my tiny mistake if not I'll look at it during break break, cuz it's not the most important thing in the world. Cuz I don't know anything about that, but if you look it did resolve correctly, right? So I wonder if it's a me issue or if it's a playground issue because it has definitely figured it out, you know what it is?

[00:08:32]
>> Unit?
>> Yeah, I was like why does it want a string instead of a number? Cuz it wants, because you look at it, you can see 375 pixels, 640 pixels, yeah. That hovering, it's good. So you can see, it did turn purple. I didn't add the other, I'm changing it there, but it did turn purple in this case.

[00:08:54]
So we can add if you wanna, we also have a 3XL because I work with engineers. And they, I learned something about my co workers, which is apparently they maximize their browser window on their 5k monitors and their ultra wide monitors. Which is a horrifying thing that I can't unsee.

[00:09:11]
But I know that the biggest, and this has multiple tech companies I've worked at when they talk about responsive design, they're talking about ultra wide monitors. Which is never a way I've heard of it referred to in it. Are these people all maximizing their browser window on these ultra wide monitors, is that happening?

[00:09:28]
Cuz the amount of times it's come up is at multiple companies is somewhat shocking to me
>> There is a change including more than just background color. Do you use the empty colon for all of the classes that need to be changed or can you combine them?
>> We looked this up during a break where we found a blog post.

[00:09:47]
Went up, I still have it open, I don't think I do. Where we wanted to find out is there a shorthand for this? Presently there is not, you do stack them up. Now this is where you could choose to bring those utilities or those components. I haven't for the most part, right?

[00:10:04]
But you could, you could, that's where you could pull them together in either a utility class or a component class, and begin to pull those things in. I, again, at the end of the day, constantly every part of me that is an engineer writing JavaScript is like I should have abstractions.

[00:10:21]
And then every part of me that has to flip back and forth between two files to figure out why something's styled the way it is, hates that part of me. Right, the part of me that is good JavaScript developer, then makes me hate me writing CSS, right? And this of having it all right there in front of me.

[00:10:36]
And tweaking turns out, cuz every part of me wants to abstract it away, everyone asking that question, I feel you. I am there with you all, I am spiritually there too. I just know that every time I do it, I end up sad, right? But I want it as well, but then I don't like it when I have it.