This course has been updated! We now recommend you take the Intermediate Gatsby, v2 course.
Transcript from the "Styling with Theme UI" Lesson
[00:00:00]
>> Jason Lengstorf: Having done very little, I’ve set up a theme. Now, nothing’s really gonna happen if I restart the site with this theme installed, because none of the components are accessing any of the default theme-ui stuff. So before we can really see it work, we’re gonna add a layout file.
[00:00:20] So let's create components/layout.js, and inside of this, we're gonna grab that JSX pragma from theme-ui so that we can use the SX prop. And then I also want to get, we're gonna use global because we wanna override a couple, basically just the margins and stuff. And we're gonna override that from @emotion/core.
[00:00:52] We'll import link from gatsby because we're gonna be linking to things. And then because I don't wanna add any junk in my output, I'm also gonna import fragment from react, because I want to be able to use that. So let's define our layout. And before I forget, let's make sure that we export that as our default.
[00:01:17] Okay. So the layout's gonna get children as a prop. That's just anything that gets passed inside that component. And we don't even need curly braces. We're just gonna do a direct return. We'll do a fragment. And inside that fragment we'll start out with global. And we wanna set styles.
[00:01:40] And so another thing that will happen with the emotion core global is that it also will accept the theme object as an argument to a function. So even though this isn't technically part of theme-ui, we can still get access to that theme object and use it. So let's do that and we will return, I'm gonna do a couple things.
[00:02:03] I don't think I would do this in a theme, but since it's a site, I am happy to make some sweeping proclamations here. So I'm gonna say boxSizing is gonna equal border-box. That will give us some more predictability around the way that things render. I'm also going to say on the body that I want the font family to equal theme.fonts.body, so we're gonna use the body font as the default.
[00:02:29] I will set the font size to 20, make it a little bigger, easier to read. Then I'm going to set the margin to 0. Underneath this, we need a header. So for my header, I'm going to use my standard pattern, which is to use the primary color as the background and the background color as the text color, and then we'll give it a little bit of padding so it's not all squished.
[00:02:58] And inside of it, we will do a link to the homepage and give that a little bit of style. So we'll say that the color is going to be the background, because it's a link it won't inherit the header color by default. We're also going to set the fontweight to bold.
[00:03:19] We want the text decoration to be none because it's gonna be kind of a logo for the site. And then I want to set on focus, because we wanna make sure that it's keyboard navigable, but we still want it to look nice, like it's part of our theme.
[00:03:33] So I'm gonna set the outline and I'm gonna pull in this theme object. And I want the outline to be 2px solid, and I wanna use the theme color. So let's use the background color for the theme. And then because I don't want it to be squished up on the link, I'm gonna do the outlineOffset.
[00:03:53] And we'll make that 4. Okay, so then I can set the title. We'll call this the Negroni Appreciation Society. If I can spell society right. Okay, good good. Then we need a main section, so we just want this to not be squished, so we'll set a vertical, so the y-axis is up and down.
[00:04:20] We'll set that margin to 4. We'll set the left right margin to auto so that it centers. I'm gonna set a max width of 650 pixels, and we'll set a width of 90 vertical width units so that it doesn't smash on smaller screens. And inside we pass the children.
[00:04:39] Okay, that's a layout component. So now let's go use this layout component. And we can do that by just jumping into our pages and importing it. And that'll be what we want to happen. So let's go into our pages. I'm gonna import layout from components/layout. And then here, I can just use that.
[00:05:08]
>> Jason Lengstorf: Okay, so that's one. Do the same thing on this one. Import layout from components/layout.
>> Jason Lengstorf: Okay.
>> Jason Lengstorf: And,
>> Jason Lengstorf: Let's take a look, so yarn workspace negronis add, no, develop.
>> Jason Lengstorf: Hey, hey, okay, so this is looking a little bit better.