Creating a Page Layout

[00:00:00]
>> Cool, so we have this grid challenge though, right, where I wanna build something like this, right? Which I can do, and I'll kind of show you some of the code, but this is kind of the point of we can use this arbitrary value and it'll show you how powerful some of these pieces are.

[00:00:21]
But then that trade off of, I'm not always sure that I want to do all these things in Tailwind and that's okay, because you know what talent is at the end of the day? It's just a bunch of utility classes and all your CSS still works. It's not like you've opted into some framework where you can only use Tailwind.

[00:00:36]
You can opt out and like we saw at the very beginning, you can get that theme function and grab any part of the theme you want in your regular CSS. You still get all the purging, if you used layers and stuff along those lines, you get all of the pieces.

[00:00:51]
And you can both, I think, Yehuda Katz said it about Ember at one point, a good framework should always push and guide you in the right direction, and then give you an escape hatch that is easy when you need it. I think Tailwind does a very good job with that.

[00:01:08]
So what we're gonna do is, we're gonna look at a little piece of how to put something like this together, and then we are going to look at just a few other kind of useful tricks that I think are kinda nice. We actually accidentally looked at aspect ratio already as a fun thing, but we'll look at a few more of these little ones.

[00:01:31]
We can talk about animations if you want or any questions that come after that. But I kinda wanna just look at how to put together a layout like this so you can kind of see where the advantages and disadvantages are. And then a bunch of other kind of potpourri of tricks, and then we'll kind of pull the train into the station and answer any kind of questions or any kind of thoughts or ideas that we might pull out and kind of see in this place as well.

[00:01:57]
Cool, so let's take a look at how would we go about doing something like this? I'll grab a fresh playground real quick. And what we can even do is we can say, we can make some divs. And what we'll do is we'll grab, we'll call this one the header, we'll call this one the, let's even pretend that we're gonna use semantic HTML here.

[00:02:26]
We'll make the sidebar as a NAV, that seems legit. It's not a real app, so I don't really know what the right semantic meaning is for the sidebar. We'll just call the main section a section, main content, And we'll add a footer. That seems good, right? Awesome, sweet.

[00:03:02]
And we'll put it all inside of a main, cuz we're gonna need something to have the grid. And I think looking at this in context will make a little more sense than me poking a bunch of buttons in a tool, but pull request accepted, too. Cool, cool, cool, so we've got that.

[00:03:19]
The other thing we're gonna do real quick is we're going to say that for our first business right now, this main section, one of the ones we didn't talk about, we saw the width full and height full. The other one that Tailwind gives you is width screen and height screen, which are the view widths and view heights, so we've got that.

[00:03:41]
I don't want this responsive view anymore. There, thank you, cool, cool, cool. And then what we'll do is we'll say, class, It's time for red 300 to make its appearance. Cool, and we'll say for now on the side, I'm thinking green. I like that, I like the 100 on this one.

[00:04:10]
Nope, it's not enough, there we go. And we'll pull in, I'm thinking yellow. And everything that you can do in regular CSS, you can jam into utility class. Again, I will leave it as an exercise to the reader if you want to. I will say, sometimes my decisions are made as the person who runs the team rather than the person, and so I am of the like, if I let people start escape hashing all the time, we will have a mess that I won't be able to change themes on and stuff.

[00:04:46]
So by default is to use utility classes, but even I will, in a PR, it'd be like, okay, this makes total sense. Cool, I gotta add a shade to the other one in a second, blue, 200 for the footer. So I want to get a layout like I had before.

[00:05:10]
So let's go ahead and let's just start by, what happens if I just throw on grid, right? Cool, all right, we're kind of getting there. I'm gonna take that margin off the body, cool. All right, I'm getting there, not totally there. So we could do stuff like, I forgot to show you colspan so we'll do that, too, we can say it has two.

[00:05:38]
That will do it, right, but you can see, getting to those various where you can put the lines in CSS grid, definitely Tailwind out of the box is not in my experience. If somebody can slide into my DMs later and tell me I'm wrong, in my experience, it is great for the, I wanna lay out a bunch of items, not for like, I want to kind of build that kind of grid layout for the page.

[00:06:01]
And you can do a bunch of that stuff, right? I could say something like, was kind of hard, but I'll just show you. I could say something like, it's got ones that remind me of tables, right? Colspan2, I could say something like, hey, go back. It's because I dismissed the, I'm so excited, span two columns, There we go.

[00:06:27]
And I could make the footer technically, All right, so you can do stuff like that but it's when you want to move a lot of the a lot of the lines around instead of just a very even grid, like the ones in town with a very good, very even grid.

[00:06:45]
You can do some stuff in here as well, and I will show you and it will be great. So we can go ahead and instead of the Cols2, I'm gonna do, I believe the grid template, right? And I think I can do it. I'm doing this from memory real quick.

[00:07:08]
Let's do 1, 1fr, I can type, auto or something like that, nope, hold on real quick. All right, we want actually the grid rows in this case, cool, grid rows. All right, so that's one fractional unit auto, that's a little much there. We'll start with that and we'll say, you can see that I'm using the underscores.

[00:07:50]
These are the same, if you were writing CSS you would put these with a space, right, and that's effective. But we can actually, I wonder if it shows you that super clearly in the generated CSS or if I gotta inspect an element here. Yeah, I'm not I'm not doing that.

[00:08:08]
But you can actually see what comes out, but we can take a look at the inspector over here. Effectively, if you look at the class it's generating, you can see those underscores make spaces, right? So my grid template rose that is what it comes out to, you can decide if that makes you happy or not, right?

[00:08:29]
I'm here to show you, you can decide, whether or not you like it is up to you in this case. So we could say, let's make this instead, this one fraction, one fractional unit. Okay, we're getting there, six maybe. Yeah, right, so we have that in place, and then we also need to do the grid calls where we can also put in that arbitrary value.

[00:09:00]
Cuz again, if you just put that one, the two or three, you're gonna get even ones. If you want one that's a thinner sidebar, you need to say like, okay, the first column is about this wide, and then either auto or take up the rest of the space.

[00:09:12]
So I'm gonna say 1fr, and we'll start with auto, and we'll see what that gives us, and I think it's gonna give me something I don't really want. Yep, that's the opposite of what I want almost. And maybe I flipped that and that is what I want, but I could also say that this may be six fractional units and all fractional unit is, is six out of seven, right?

[00:09:32]
You add them all up and that's where you go. That's a little small and so you can adjust it and you can do all the min max stuff. You can put it all in those utility class names. Again, I'm not gonna tell you that you should, I do it, I choose to.

[00:09:45]
If you're like, nah, this is a bridge too far, I get it, that's cool, too. But actually, it is nice because you know what I can do next? I could say that this should only happen at that small viewport, right? Cool, but originally what it should do is, I'm pretty sure it's gonna get angry with me with those call spans in a second, but yeah, so I gotta say that these only happen at small 2.

[00:10:25]
And what's nice is, so now, theoretically, and again, I could tweak this a little bit more, but theoretically at the smallest viewport, they're stacked in a column. As we get bigger, we get the various different layouts, and I don't write a bunch of media queries. So you pay the cost of, good luck explaining that during code review, right?

[00:10:45]
But generally speaking, you get a lot of the responsive breakpoints very powerfully and very easily, and get it all kind of laid out nicely. And so we could decide that instead of one, we want to have, we'll say, rows where we do something like, 1fr and then actually make this 3, 1fr, let's make this 5, it's got to be underscores.

[00:11:24]
Right, okay, it needs a little bit of adjustment, we'll make that maybe a 2. And so now you get the kind of fully responsive grid layouts, you don't think about it. And once you have it set up, it's actually pretty elegant. I mean, for the various different viewports, how you want it to change layout, you can change the call spans, you can change the order, right?

[00:11:43]
If I wanna say that, okay at the small one, Let's see, I'm doing that from memory, now I'm winging it. Yeah, I've gotta play around with the order a little bit. But you can, theoretically, set up all the breakpoints, have your layouts in place. It does take a little bit of time to get right, but the integration with the breakpoints is what I think makes it worth it, right?

[00:12:11]
But I am not going to be the one that tells you, it's the way it is, this is the way. I'm gonna say, there are some trade-offs where I think it's worth it for a lot of the clarity in this and the ability to adjust it and to iterate.

[00:12:22]
I get it that that syntax makes everyone's feelings hurt. I think that both can be true at the same time. Clear off your afternoon, sit down with the docs and you get it to the point where you want it and then you mostly have it in place. It's one of those things, you do it once and it kind of works out, but the I think the potential is there and it's worth it.