Add a shared layout component and global styles to a Gatsby site

Jason Lengstorf: [0:00] To make this look a little bit nicer, let's add a layout that we can share between pages. We'll do that in our code editor. In the src directory we'll create a new directory called components and a component called layout.js. Inside we're going to import React from 'react' and then we're going to import { link } -- which is a Gatsby tool -- from 'gatsby'. That's for local links.

[0:25] Then we're going to create a component called Layout that is going to get one prop which is going to be called children. That's a React built-in that gets whatever's passed to the layout. Inside of this, we're going to return a header element, that's just a HTML element.

[0:43] Inside of that, we're going to use the Gatsby Link to the home page. Then we're going to give this a className of home so that we know that this is the main link. Right now, we're going to give this a name, Migrate WordPress to the Jamstack.

[1:07] Then underneath the header, we're going to create a main element -- again, that's just an HTML element -- and we're going to pass that the children.

[1:15] Down at the bottom, we're going to export default Layout. Then we're going to use this Layout, so we're going to go into the page template. Up at the top, we want to import Layout from '../components/layout', and then we can just use that. Instead of a fragment, we'll wrap it with the Layout. Once we've done that, we can see that it has shown up.

[1:44] Next, let's make this look a little bit nicer. We'll make it look nicer by adding some styles. We'll create a folder called styles, and then we'll create a CSS file called layout.css. Inside of this, we are going to add some basic stuff. For the html and body, we want to get rid of any extra margin and then we're going to use the default font stack, which I am going to copy-paste because there's a lot of it.

[2:15] Then we're going to add, for the header, a background of darkblue. We'll give it a padding of 1 relative unit based on the text size, and we'll put it 5 vertical viewport width units, about five percent from the left and right.

[2:37] For any links inside the header, we want those to be white, so that they're legible. We also want to make them display: inline-block because we want to give them a little bit of left margin when we stack them next to each other so that they don't smash into each other.

[2:56] For the home specifically, because that is going to be at the far left, we're going to make it more notable by making it font-weight: 800 so nice and bold. We're also going to remove that margin-left so that it's not off the side of the text, get it out of alignment. Then we want to get rid of that extra underline. We'll make that text-decoration: none.

[3:21] Then the last thing that we want to do is make the main content a containable size. We'll set the margin to be 2 relative units off the top and bottom and then we'll make it auto to center it from the left and right. Then we can set the max-width to 54 characters. That's based on the font size. We'll make the maximum width 90 viewport width units which is about 90 percent.

[3:48] With that, we can then go back to our layout component and we're going to just import that directly. We'll go to styles and layout and once we've imported that over here, we can see now that we've got some basic styles.

[4:02] This is not going to win any design awards, but it certainly looks better than unstyled text.