Grid By Example Demo

[00:00:00]
>> Sarah Drasner: It's demo time, this one's gonna be a hard demo for me to do, so I'm gonna make a lot of mistakes. Don't worry, we'll still get it done, [LAUGH] But regular dev and regular life is gonna be mistake-ridden anyway. So okay, let's open up that layout that we had before, and we had a bunch of different layouts, right?

[00:00:20]
What I'm gonna do, instead of building it from scratch because I think that would take a while and I also think that this is more true to life, we're gonna go to gridbyexample.com. And we're gonna go to the experts since I said about a million times that I'm not an expert.

[00:00:39]
We're gonna look at some of the examples and patterns and we're gonna see what closely fits what we're already working with and then modify it because. I think that's probably where you're gonna start in real life probably, probably? So okay, we've got a bunch of examples here. And in her videos, she has these videos that get you started for each one of them, and videos that you can watch for each one of them.

[00:01:07]
And she has all of these cool examples to check out, right?
>> Sarah Drasner: I see tons and tons. So if you wanted that composition and to just fancy it up, it already is there, you could just grab it and then manipulate it. So let's look at some of these here.

[00:01:31]
Okay, cool.
>> Sarah Drasner: All right, and then let's look at some of the patterns. Pretty neat. This is really nice too, that's like something everybody makes sense of. So if we look back at our layout, I would say probably the first one is most similar to something I already saw.

[00:01:54]
This one, I think, something like that I saw already, so let's go back here, in examples. This, no clearing required, looks pretty similar, yeah? It's got an implicit height, we're gonna manipulate it, but that's pretty, pretty close, we got this, yeah, just a bit wider version. Okay, so let's open this up and I'll make the text a little bit bigger.

[00:02:27]
>> Sarah Drasner: All right, so what we've got here is we've got, I'm gonna title this CSS really quick. The other thing that I like to do, and you don't necessarily have to do this, but I think it will probably save you some time, is to use normalize and autoprefixer.

[00:02:41]
Then you don't have to add prefixes to everything, and then normalize will keep those. There's a lot of weird things that the browser assumes you want like padding on the body and stuff that you probably don't want. So Normalize helps you clear out all of those crazy styles and autoprefixer will keep you from having to write all of the prefixes, so I'm gonna add those in.

[00:03:04]
I'm also gonna add SCSS as a preprocessor because I like it, you don't have to use something like that. So okay, we've got a body with a margin of 40 pixels, so that's what's keeping that to be 40 pixels around there. Then we've got our grid area, sidebar, content, header, footer, we saw what that does earlier, that was pretty cool?

[00:03:30]
And she's doing this really nice thing here where she's lining it up, she only really needs one period to make that space. Instead, she's drawing all the periods out so that it's clear what's going on there, neat? I like that. Okay, so for grid-template-columns, I'm gonna change this to repeat(3, 1fr) so then we have it just going across.

[00:04:10]
I'm actually going to explicitly say to this wrapper that what I want you to be is width 100 field width and height, 100 view height, okay, cool.
>> Sarah Drasner: Wait, first I have to fork it in order to save it, that's a big thing if you're using that thing, I'm gonna keep this private for now and then I'll open it up.

[00:04:38]
Well actually, I'll just leave it public so that people can find it easy. And okay, so now we've got this,
>> Sarah Drasner: Browser. The body has this margin of 40, which we want, if we go back to our Photoshop document, that's what we want here vaguely. But it's extending beyond here and that's not great, so what we're gonna have to do is use calc.

[00:05:10]
And if you're not familiar with calc, what we can do here is say, all right, what we want is not a width of 100 view width, we want calc 100 view width minus, what was, 40? Yeah, okay 80 pixels, so double the amount there, yeah? Makes sense? Cuz that was 40, so that wasd double one on each side, yeah?

[00:05:37]
Okay, now everyone was like, no, yes, okay. Same with the height, except we're gonna change that to view height.
>> Sarah Drasner: Yeah, getting a little closer, cool, we didn't even do much and we're getting there. All right, so we've got the header, the content, and the footer. Let's look back at the document.

[00:06:02]
That header is the implicit height, you've got 80 pixels or something like that, and the footer is the same implicit height, so 80 pixels or something, let's just do that. Let's go, so the grid template columns, grid template areas, I think it's grid template rows,
>> Sarah Drasner: It will be,

[00:06:33]
>> Sarah Drasner: I think this is right, 80px, 1fr,
>> Sarah Drasner: That seem good? Yes, okay, cool.
>> Sarah Drasner: This footer is wrong though, because remember in our Photoshop document, we had it start here. So I'm actually gonna make the footer do the same thing as the header does.
>> Sarah Drasner: Better? Yeah, cool!

[00:07:05]
In terms of that text on the side, I'm just gonna absolute fix position that to the side or absolutely position. So absolutely position, if I want it to stay and then scroll up with the page. But I actually wanna do it fixed so that it's just like constantly there and if there's stuff below the fold, it stays there.

[00:07:21]
That's just a decision I'm making, you don't have to do that but that might be fun. In order to make room for that in the sidebar though, we need to push the sidebar over so we have room for that text to fix position layout there. So really we want the width to be 80 pixels, let's see, we want it to be -120 maybe?

[00:07:49]
And then its shorter and then we move it over with some margin.
>> Sarah Drasner: Margin left, [INAUDIBLE] let's start there, and 40 pixels, I think it should be bigger, maybe 60 pixels. [INAUDIBLE] I guess we're getting there, so now we've got that little piece here. And inside here, I'm gonna do what I said earlier, where I just lay out those with either inline block or display flex and then I'm gonna position absolute that logo over there.

[00:08:37]
So it's okay for it to take up that space, we're not gonna fill that block normally. So I can actually have another div here, it's gonna be,
>> Sarah Drasner: Div class side text, I don't know, naming is hard, and then I'm gonna say Laurem and then tab. If you're not familiar with Emmett, that's another thing to get good at because if you use Emmett then you can build layouts really quickly.

[00:09:11]
It could be like, actually let's do that for the header right now. Let's say ULLI times 4, of course it doesn't work when I'm doing them. Okay, let's do LI times 4,
>> Sarah Drasner: Okay, now it's working, I probably hit something wrong. So now I can say, Thing, Taco, Tacopants,

[00:09:48]
>> Sarah Drasner: other tacos, your normal Nav content, [LAUGH] That you have, I always just use tacos for everything. Even secret login names, so now if you see tacopants online, you're gonna be like, that's Sarah. So okay, we're gonna take this text, I'm gonna eliminate some of the text and make it a little bit shorter.

[00:10:15]
Probably we don't want all of this stuff.
>> Sarah Drasner: Cool, and then for the side text I'm gonna say,
>> Sarah Drasner: Position fixed left 0, I just always start from left 0, top 0 so I can change it from there. 0, 0, then I'm going to go maybe 20 px?

[00:10:51]
No, 40 px, and then before we change the top, let's actually transform it. Transform, rotate 90 degrees.
>> Sarah Drasner: There we go. Now, maybe left is,
>> Sarah Drasner: -30, top is 120, maybe, no, not even close. [LAUGH]
>> Sarah Drasner: This is an exact science, everyone [LAUGH] Let's say 205. But now if I had more content on the page that would just stay stuck there, and then I could scroll.

[00:11:45]
And it would just be a little decorative bit and/or have some information in there, depending on what you want. So we're good, we're doing pretty well here. Let me actually make this nav a thing real quick, we have another? Yeah, we have the header, so I'm gonna say, UL display inline block, no?

[00:12:18]
Wanna do display flex, there we go. And then we'll do LI list style,
>> Sarah Drasner: And then let's give it some margin, so margin 0,
>> Sarah Drasner: 30px 0, 0.
>> Sarah Drasner: That is way too big, maybe 20px, and then this will get a padding-left: 0, because there's an implied padding on ULs.

[00:13:02]
So then I'll add a back in and say, margin left 20px. Actually no, I don't want that, I want it to be its own color, so the header actually, I don't want that to have that background. I'm gonna say, color is black, and then I'm gonna remove the background color here, this needs to color

[00:13:45]
>> Sarah Drasner: Shouldn't that be that? No, we have another color.
>> Sarah Drasner: So now this one goes there, I don't want that margin left. And there's some background colors that I don't want, but I don't want, let's see, I want.
>> Sarah Drasner: To get rid off this.
>> Sarah Drasner: And cool, maybe we want just to put a border on these boxes so we can see them for now.

[00:14:27]
>> Sarah Drasner: Yeah, so you can kinda see where we're going with this, we're getting there. For the sidebar, I'm gonna put in some content so that we have stuff to work with, so probably the sidebar will have,
>> Sarah Drasner: h1 something big, [LAUGH] And then ptag with lorem.
>> Sarah Drasner: This text is really big, I think she has a font size, yeah, font size 150, okay.

[00:15:07]
>> Sarah Drasner: All right, we have a layout, that was a few minutes, cool.