Layout in CSS

[00:00:03]
>> Sarah: Okay, layouts in CSS. So let's talk about before, I was like, don't worry about code, don't worry about code. Now, let's worry about code and kinda talk about how to make these things a reality. One of my favorite sites on the Internet is Grid by Example by Rachel Andrew.

[00:00:22]
Rachel Andrew does a ton of really great content about CSS grid and how to use it. And she does do flex box and float fallbacks, so even if you have to support older browsers, she shows you how to do that as well. So if you go into the start here, on her site she has all of these really amazing videos.

[00:00:40]
And if you've never heard Rachel talk before, she's just got like the nicest voice in the world, you just sit there and like aw, Rachael so nice, it's like really relaxing. [LAUGH] A lot of times like when I'm watching coding videos and stuff, I have to wear headphones, but this is like, my husband's like, actually it's okay when Rachel talks.

[00:00:59]
I don't actually mind how we met in the background. She also has a ton of examples and a ton of patterns and we're actually going to work off of one of these little bit later today. Because I think that if you're not familiar with grid, it's a really great place to get started, she has all these patterns that you can kind of grab and go, and try things on your own.

[00:01:19]
It's a really good way of learning especially because, it's so hands on you're really playing with the code. Another person to follow or check out if you need to know about CSS Grid is Jen Simmons. Jen Simmons has this Experimental Layout Lab, which is awesome. She goes through all of these different crazy cool ways of laying out text and just got like a million of them, and they're all really beautiful and wonderful.

[00:01:47]
But the nicest thing is they're really done in a browser so you can go and explore them with dev tool. So you might notice this composition is kinda like that Swiss Design that we were talking about earlier, right? So if I take this apart Inside the browser. What I find is she's got a transform rotate, which I'm not surprised by, right?

[00:02:06]
She's got like a 45 degree angle. She basically lays out the entire composition and then at the end [SOUND] kind of puts it into place. You can see how I in the bottom right hand corner I kind of undid that and you can then just see the layout straight how she probably built it.

[00:02:23]
I don't know but what I imagine. And then if you kind of highlight each one of them, you can see how she built this grid. And it's not actually that much code, that's the kind of a amazing part. Is you can explore all of her projects, they're pretty nicely cleanly done.

[00:02:42]
And you can kinda play with them, you can break them. I encourage you to play with them in the dev tools. Both Chrome and Firefox have really good devtools for grid now. You can see I just literally hovered over that header wrapper, and this grid appears. And you can see which parts are the grid and which aren't.

[00:03:03]
You can see there's grid gap, so spaces in between each piece of the grid, and those dotted lines between each one of them. So that's so cool, it's such a nice way of learning. I also, in order to learn grid, started playing with this site called Grid Garden.

[00:03:22]
It's like a 28-level game that it teaches you grid as you play it, so it starts with how to start grid columns, start. And it takes probably like only a half-hour or something to go through the entire game. And you kinda understand Grid a little bit better as you're working with it.

[00:03:44]
The thing that's in the right-hand top corner is the most important thing. I am not a Grid expert. I am not Rachel Andrew. I am not Jen Simmons. Grid is not the thing that I am and do. Like I spend much more time working with like view and JavaScript and stuff.

[00:04:01]
But I work with Grid enough to like kind of understand some basic principles and stuff. I'm still working on getting better. So it's okay if you're not, your also just playing and trying it out. Grid is actually really a cohesive and kind of nice to learn. Grid is also huge, there's just so much in Grid.

[00:04:23]
So even if you just learn a few things, that's okay too. I was talking to Chris Coyier, if you know him. He does CSS-Tricks and ShopTalk show and a few other things. He was co-working at my house with Mary and Susanne who wrote Suzie, which was a CSS Grid back in the day.

[00:04:42]
Now she gives talks like don't use my grid system, use CSS Grid. Both of them are awesome people but I was basically like, I don't know if I can learn Grid. It seems really complicated cuz I've seen all these talks with all of these features and I was just like [LAUGH] I'm just gonna stick with life box [LAUGH].

[00:04:59]
And they were like, you know, in order to use grid, you don't need to use all of those things. You can just do X, Y and Z, and I was like, I didn't know that. So you can just start with kind of simpler systems and then learn more features as you get better at it.

[00:05:15]
So let's check out some of these code pens that I've prepared for you.