Create a Layout

[00:00:00]
>> Let's get in here and actually build out a layout in our theme. So the way that I wanna do this theme is, I wanna provide some color settings, and then we wanna add some global stuff, like typography. And then we will style up our layout, so have the ability to have a header, footer in main content.

[00:00:20]
And then we will add a shared nav that'll sit up at the top of the site. And in that will have kind of some some config as well. So let's start by defining some of our styles that we're going to need. So we'll go into source styles and the first one that we're going to create is going to be called variables.css.

[00:00:39]
And so I'm going to use plain old css variables because I like them very much. They don't require us to install anything new and they work on in the browser without transpilation or, or any kind of build step. So it's easy to debug. And you can write these in your dev tools without having to stress out over it.

[00:00:59]
I very much enjoy this general approach. Okay, so this is going to be the whole site we're going to have a color for black color for white color for text. And as just a general design thing, putting pure black and pure white together can be a little like I said, It just makes your eyes kind of do a thing.

[00:01:15]
So a dark gray as opposed to a black is just a little bit softer. That's why we're using this instead of pure dark black. And then for text, want it to be a little bit lighter so that the heading stand out and those sorts of things. And this is all that's going in this file.

[00:01:32]
And you might be thinking like, well, that's silly. Why would you create an extra file for this? And I'll tell you why a little bit later on. Because there's a there's a very specific reason that we're doing it this way. So we set up our variables. Now we're going to set up our global styles.

[00:01:48]
And for our global styles, we're going to keep these pretty simple. We are going to make sure that margin padding do what we want. So we'll say box sizing is going to be border box. And then we're going to set up on the HTML and the body. We want to set our color to be, the text color that we created, we're going to set a font family.

[00:02:11]
And I'm gonna use to have like, Apple system does it do the whole thing? That's close enough for use. So those are system fonts. Got font size will set to 18 pixels, line height of 1.4. That's just a personal preference. You can ignore that if you want. And then I'm going to set a general margin of 0, because otherwise the document will have a little bit of a white border around it.

[00:02:39]
So these will be our global styles. So again, we're not doing much here, right? We're trying to create some some baselines for things to look okay. So we've got our global styles, and then we're going to add a scopes module for our layout. So we'll call this one layout.module.css.

[00:02:55]
And inside we're gonna say content. And we'll say margin. So we'll give our content a good top and bottom margin about 3 rem and then we'll center it. And I'm going to set the max width to be 54 characters, this is good for line length. It means that no matter what size the font is, the lines will be roughly a good readable length.

[00:03:22]
And then let's tell our footer. So for our footer, we're gonna keep it really simple. You could do a lot of cool stuff with the footer, but I just want to have one present and I don't want to spend a lot of time on, like building out the markup for a footer.

[00:03:35]
So we will instead just set up the basics of what a footer could look like. So we're going to text align center. And so this is just going to be small text centered in the screen with a little bit of breathing room around it. And that'll be our entire layout.

[00:03:49]
So we're going to keep this very, very straightforward as simple as we can. Now that we've got that, let's add a component and we'll call this one layout.js. So in layout.js it's going to be a React component, so we will import everything as React from React. We will also import those Styles.

[00:04:11]
So we're going to start with the variables. Then we're gonna get the global stuff, and then we're gonna import those classes that we created, so content and footer from our layout module. Okay, then we can export default function layout. And because it's a layout, we're gonna allow it to have children that means it'll wrap, a document and whatever gets passed inside of this component will be delivered in the, wherever we use children in here.

[00:04:47]
So I'm going to return,. Let's do a fragment and I'm going to add main, with a class name of content and we'll put the children in there. And then we'll add a footer with a class name of footer. And this will just say, built with the shared Nav Gatsby theme.

[00:05:15]
Right, so so we're not doing too much with this. We're gonna keep this pretty simple. Close our fragment and we now have a working layout component. So we could, at this point, import this component from the theme and use it. But we're going to consider this to be an opinionated theme.

[00:05:32]
So what we want this theme to do is actually automatically wrap every page in a site with the layout. So let's add a plugin that's going to let us do that. And the way that we're going to do that is yarn workspace. Gatsby theme shared nav add and we want Gatsby plugin layout.

[00:05:52]
So this is actually mimicking a behavior that used to exist in Gatsby one. So you may have seen this before, where it would automatically apply layouts. It was decided as as a part of a time to a typo. Gatsby themes shared nav, there we go. It was determined that it's a little unintuitive to have things like automatically applied.

[00:06:14]
And honestly React is so good at just making things into components that that by default, the behavior that should be Gatsby doesn't do magic. Like that was a way when I used to work there. That was a mantra for us. We shouldn't do magic, like, there should be only magic where it's actually useful and not where it's neat, right.

[00:06:33]
And so layouts being automatically applied got taken out but this Gatsby plugin layout is re implementing that functionality in cases where you are consciously making the decision that you want that magic. Because we want it to be, less work for somebody to install this theme on their site.

[00:06:51]
So once we have installed Gatsby plugin layout, we can go to our themes, Gatsby.config. And we're going to set up our plugins array. And inside of that, set up an object for the plugin, or resolve it to Gatsby, plug in layout and then as the options. We want to tell it where our layout is.

[00:07:16]
So the component is going to be required out resolve. You might recognize this from the way that we do create pages calls. It's the same general approach, except we're going to use dirname to make sure that it uses this theme. And not like whatever theme it's installed in.

[00:07:31]
So we'll do that and source components layout.js So the way that you instal a theme is you have to actually go in to the Gatsby config. And we're gonna use 'gatsby-theme-shared-nav'. It wants us to restart. Let's restart that dev server There it is. So now with no changes to our site outside of adding this one line to install the theme, we have added some, like overarching styles to the site that make it look really nice.

[00:08:19]
So, as we kinda navigate around here, we can see that we didn't have to make these changes. These changes were made for us and as a site builder, if all I cared about was getting information going onto the Internet. Having something like this that gives me a baseline structure that I can just put content into is really, really handy.

[00:08:39]
And if I'm a company that's trying to make sure that people use a design system or otherwise kind of keep track of the shared components or utilities. Themes are a great way to pass that around if you standardize on Gatsby as the way you build for the web.

[00:08:55]
So now that we've got that, we can build out that shared nav component