CSS Styles & Navigation

[00:00:00]
>> So what we wanna do next is we wanna add in global styles to our layout. And these are styles that are gonna be shared across the entire app. This is gonna be how we set the colors, how we set the fonts, how we set basic shared typography across the site, and a few components that will be used everywhere.

[00:00:18]
And the way that we do that is we are going to use the single-file component approach in Astro. And this as a concept is not unique to Astro, it's borrowed from frameworks like Vue, Svelte, probably additional frameworks that I'm not thinking of right now. And it allows us to declare the styles not as part of the template, but alongside the template.

[00:00:41]
And then Astro can do optimization and in-lining of those styles to give us a little more flexibility in how this works without having to understand the intricacies of a CSS processor. Or if we're using Sass or Tailwind or something like that, the way that those all function is kind of not a part of the thing that you want to care about.

[00:01:01]
You just kinda wanna have some styles show up on your page. So the way that they do that is we're gonna set up global styles by marking it with this is:global attribute. And that tells Astro not to change the class names so that they are in fact global.

[00:01:17]
And the reason that that's important is that by default, Astro is gonna scope, styles to the component that they're in. And this is really, really powerful because it basically eliminates the need for a lot of the complex CSS setup that we've had in the past with things like CSS and JS, with Tailwind.

[00:01:35]
And now I'm gonna add a big caveat to all this, which is that I love CSS. Writing CSS is one of my favorite things to do. It's, l think, the most joyful part of building for the web to me, is writing CSS. So with that being said, I don't really love abstractions over CSS because it makes it harder for me to do that because I love writing CSS.

[00:02:00]
I know that not everybody does, and I know that CSS is very frustrating for people. So I will say, if you want to use Tailwind, there is a built-in plugin. You can just add it to Astro and you're off to the races. If you wanna bring in your favorite CSS and JS library, you can do that as well, there's no restrictions on this stuff.

[00:02:17]
What I like is that by default, this stuff is just built so that you write plain old CSS, and you get the benefits of scoped styles, and avoiding the global namespace collisions and the challenges that kind of, I think, give CSS its challenging reputation. Those just get solved in a way that don't require you to actually change the way you write styles.

[00:02:40]
So inside of this, we've got up here in the workshop-assets, some style sheets, and we've got the default-global, and that's the first one we're gonna grab. And so I'm going to take the contents of that and paste them in here. And then let's see, do we wanna look at this step by step?

[00:03:02]
Why not? Let's do it. So head out here, and okay, so now we're starting to get some styles. Here's some typography. We can see that that it's not using the serif font anymore. It's using the system default, sans serif font. We've pulled in our Google font, this this kind of bubbly, headline font.

[00:03:23]
But we're not quite there yet, we still got a ways to go. So next, what we're gonna do is add our scope styles that are just for the layout itself. And the way that those work is nearly identical to the way that the global styles work. We just don't add that is:global.

[00:03:44]
So I can add style, and save. And then if I close this out, okay, so let's take a look at this. I'm gonna resize this. Now let's take a look under the hood at how this is actually working. So on something like the header, which is a unique component of the layout and doesn't need to be accessed anywhere else, we get these classes that are unique to Astro itself.

[00:04:17]
Where it's saying, you can look at the style, the actual targeting over here, and it's saying, give me the header where it's this Astro class. And this is that scoping, because you'll see that all of these have the same Astro class, and we just append that where on it to give us the scope styles.

[00:04:36]
And this allows us to kind of, we can have really generic class names, box, container, wrapper, whatever we wanna use. And we don't have to worry if we use wrapper in two components, about those conflicting with each other, because they'll be scoped to just the component they're used in.

[00:04:52]
Now, on something that's more global, like a header, we will see that these don't get scoped. So it's just saying if it's any heading, apply the Google font, right? So this is the global versus the scoping, and you can make a choice as is necessary for how you wanna write your code.

[00:05:13]
There are no hard and fast rules here. This is just whatever works best for you and your team. And again, if you don't wanna use scope styles, you wanna write something like Tailwind, you can do that as well. This is just a preference of mine, and we're gonna power on ahead with that.

[00:05:28]
Next up, what I wanna do is add some navigation, because right now the only way to get to that About page is to go up here and manually type. And again, you can see we've got the layout is showing up for us here. We've got our heading fonts are working, the typography looks a little bit better, it looks more, kind of what we intended, not the sans serif default styles.

[00:05:52]
But I want those to be linked together. So let's get into a little bit more with the frontmatter. So in my heading here, or in my default, we're gonna add frontmatter to this component. And I'm gonna set up a new const called navItems, and that's going to be an array.

[00:06:17]
Boy! We're gonna add a few things in here. I'll get the gut set up and then explain what I'm doing. So we've got an array of navItems, and then each navItem is an object with two properties, a path and a label. So I'm going to copy this and we're gonna put three navItems in.

[00:06:37]
This one will be blog, and this one will be about. Okay, so now that I've saved these, what I can do next is I can go in and actually use these in my layout. And this is where we're gonna start to see the power of using an Astro component over just plain old HTML, because it lets us do some templating and stuff that would have traditionally required us to either reach for something like Handlebars or Mustache.

[00:07:04]
This is what this is kind of reminiscent of, or we'd have to move to a JSX component style rendered thing. And this is one of those instances where I think that Astro has found a nice balance. So in where the nav goes, I'm going to add a nav component, and inside of that, I'm going to navItems.map.

[00:07:29]
And for each one of those, we'll get a navItem, and, oops, I'm gonna return a href(item.path). We've got autocomplete there because it's in the same file. And then we can do an item.label. And it seems to have forgotten that label exists, but that's okay. All right, let me make this bigger so everybody can see.

[00:07:59]
So one thing to call out is while we've got this setup here, this looks very familiar if you've used JSX before, you may have written something almost identical to this, but there's one important call-out, which is, I didn't have to key this. I don't have to add a key prop for keeping track of it or anything, because Astro is not setting up a virtual DOM.

[00:08:21]
And so we don't need that extra overhead of keeping track of these components in some way, Astro is just gonna render them out. So this is sort of a blend of JSX and the way React does things, and something like Handlebars or Mustache, and the way that they do things.

[00:08:39]
Once we've saved this, we've already added the styles. So we can see that we've got our Shop, Blog, and About up in the nav here. And if I click through to the homepage, we get to the homepage. About, we get to the about. And if I try to go to one of these other pages, we get a 404, and that's to be expected.

[00:08:58]
We'll talk a little bit about how to customize that 404 page here in a moment. And we'll also be building out the shop and the blog pages throughout the rest of the workshop.