This course has been updated! We now recommend you take the Introduction to Gatsby, v2 course.
Transcript from the "Styling the Main Layout" Lesson
[00:00:00]
>> Jason Lengstorf: So this is something that you wanna be judicious about because the reasons that solutions for CSS modules in CSS and JS were kinda created is because one of the biggest challenges of managing styles at scale is global scope being confusing and hard to manage. So, what we're gonna do is some stuff that is kinda, it's just like my opinion man, but you can do this a lot of different ways.
[00:00:31] So I'm gonna set this up where we're gonna set everything on the page to have box-sizing of border-box and buckle and cuz we're gonna write CSS for like 20 minutes here. We're gonna do a margin of 0 and this is where my opinions really start to show. We also have this wonderful tool that I learned from Hayden Pickering, it's called the lobotomized owl selector.
[00:00:59] And so what this means is every sibling selector is going to get this style, and we're gonna give it a margin top of 1 rem, which is like the root font size. And the reason that I like this as a selector is that it just kinda normalizes vertical spacing in a way that doesn't require really elaborate resets.
[00:01:22] We're not gonna use something like normalize or the CSS reset. We're just doing a little bit of code to make this work. Next, let's set up our HTML and body tags. These we want to always have a margin of zero, even if body would be a sibling element because there's a head.
[00:01:44] We're gonna set a default color. Let's make that, I don't know, 555 that seems okay. We'll go with the font family. And I'm gonna just use the default font stack. So I'm gonna do apple-system, BlinkMacSystem, God, SystemFont.
>> Jason Lengstorf: Can I spell? Segoe UI, then we'll do Roboto. I never had to type this out by hand before, there's a lot, Arial, ans sans-serif.
[00:02:25] And we're not gonna use any emoji, so I'm gonna leave that part out. And then we can do the font-size of 18 pixels. A line height of 1.4. So these are just some kind of really as straight forward as I can make them defaults for our page. If you do this it's going to be kind of okay just out of the gate.
[00:02:54] The last thing that we need to do in here is, I wanna make sure that so Gatsby wraps everything in a div. If we look at the code here.
>> Jason Lengstorf: Let's get that out of the way.
>> Jason Lengstorf: We have this div id gatsby, and then we have a no script tag.
[00:03:16] And because there's a no script, that means that this div gets treated like a sibling element. We don't want that to get extra sizing. So, I'm wanna leave myself a note, so that I know what I'm doing. Remove margin for main div that Gatsby mounts into, and then I'm going to do a direct selector to the div and set a margin top of 0.
[00:03:52]
>> Jason Lengstorf: And then we're gonna set up just some really basic typography, so that we don't have to think too hard about any of that as we're styling everything else. So let's make all of our headings a darker color, so we'll give in triple twos. We'll give them a shoulder line height which is just kinda nice to look at.
[00:04:12] And then we're also going to say that anything that comes after a heading is going to have a smaller margin top.
>> Jason Lengstorf: That just gives us a little more visual grouping, the heading is close to the content next to it. We also want any bolded text to have that darker color.
[00:04:35]
>> Jason Lengstorf: And finally, if we make a list, we want that list to not have a huge amount of top space.
>> Jason Lengstorf: Okay, so we just typed a bunch. This is not the only, I wish I could tell you this is the only CSS we're gonna write in this workshop, it's not.
[00:04:56] We're gonna write so much CSS. But this is the bulk of, kind of, the configuration level stuff. So the next thing that we're gonna do, is we've got this kinda global styles. And if I just collapse this out of the way, then I can see we're not actually doing anything with this yet.
[00:05:20] So we're gonna wanna put in a header, and we don't know what's gonna go in there yet. But we're also gonna set in a main. And this main is going to contain our children. So with that, we can start, I mean we're not done yet, but we're gonna start working on this.
[00:05:41] We're gonna export this layout as a default. And then, once that's done, I'm going to come over into my index, I'm going to import the layout
>> Jason Lengstorf: From this folder. And then instead of using this fragment, I'm just gonna use a layout. How does it work? Is it an Option-Click to give myself multiple cursors?
[00:06:08] So once I've added this layout, and I go to the homepage,
>> Jason Lengstorf: I gotta, I forgot to restart the server so npm run develop.
>> Jason Lengstorf: All right, so we're back up at 8000 so I can refresh. Hey, we've got ourselves some global styles. Now I've only applied this to the homepage so when I go to the About page, you'll notice it's not done.
[00:06:39] So let's also apply this to our About page. And I can just copy this directly over.
>> Jason Lengstorf: And then again, we're gonna add a layout. And now when I click between the two. Let's look at okay. I mean it's still not great. We got to solve some problems like where we don't have a header and we're also this text is all kind of jammed up against the side.
[00:07:05] So let's let's address the issue with,
>> Jason Lengstorf: The main section, and we're gonna do this using a different technique. And I'm kinda showing a lot of different techniques here. You may not want to mix all of them in your actual projects. This is more just to kind of show off how it works.
[00:07:24] Go ahead.
>> Speaker 2: So I see in the CSS we wrote, we're using a lot of element selectors instead of class id selectors, just for my own confirmation is that kind of an idiomatic practice to emotion and sound components as I just want to get this out of the way really quickly.
[00:07:43]
>> Jason Lengstorf: To be completely honest, this is such a subjective thing. My take on it is that typography is typically globally set and individually overridden, but I also come from write all your CSS by hand and really use the cascade. A lot of people don't like that and so they very tightly encapsulate their typography styles.
[00:08:08] And everything kinda gets set by config tokens. There's not a right or a wrong way to do this. The only that really matters, when you're dealing with styles in an app, is that the team understands what decisions have been made and agrees to enforce them the same way.
[00:08:24] So as long as everybody's on the same page, you can build, a good style system for your app. Where it will start to fall apart is if there are a lot of rules that you just have to know it gets tricky. I think that's were a lot of contention around CSS comes in, is how much of it is stuff you just have to intuitively understand?
[00:08:47] Or stuff that you have to learn by sloughing through the code base. How much of the code base do you need to know to be able to write styles? That varies from team to team and is probably a debate that, well it is a debate that has been raging on Twitter for years.
[00:09:04] [LAUGH] So yeah we probably won't solve that today but my preference is, set some defaults on the elements because it's easy to override element styles with classes or other selectors. And that way things are kind of set here, and then you override them individually as you go.
>> Jason Lengstorf: On the main, we want to keep it off of the sides.
[00:09:29] So what I'm gonna do is, let's say I give it a margin of 2 rem at the top. We'll make it an auto and then we'll give it 4 rem at the bottom so there's a little breathing room. I'm going to give it a max width of 90, what is this?
[00:09:48] Viewport width I think is what that VW stands for. And then I'm going to set a width of 550 pixels. And by setting a max width of 90 VW, that means that 5% of the viewport width is gonna show up to the left and right. So if I inspect this now,
[00:10:12]
>> Jason Lengstorf: My main is set with some extra sizes. And as this expands, we can see those viewport widths are changing a little bit and once we hit a certain size, it just sticks at a max width of 550. And so this is a way for us to just say that's the biggest we want this thing to get is 550.
[00:10:34] But the smallest we ever want it to be is 90% of the width so that it has some breathing room.