Made withSvelteKitClip

SvelteKit Crash Course Tutorial #6 - Layout Components

N

Net Ninja

Creator on the SvelteKit channel

Watch on YouTube ↗

26K viewsJan 6, 20228:22 runtime

Learn how to streamline your SvelteKit applications by creating a layout component to manage shared UI elements like headers and footers. This tutorial demonstrates how to avoid repeating code across multiple pages by creating a `__layout.svelte` file. You'll understand the role…

Chapters

#sveltekit#clip#frameworks

The Need for Layouts

When building a website, many UI elements like headers, navigation bars, and footers are repeated on every page. Manually adding these components to each page file is inefficient and difficult to maintain. A small change would require editing dozens of files.

SvelteKit solves this with layout components, which wrap your page components and provide a single, centralized template for shared UI.

Creating a Layout Component

A layout component is a special Svelte file created at src/routes/__layout.svelte.

Important
The double underscore prefix (__) tells SvelteKit that this is a special layout file, not a public-facing page that can be accessed via a URL.

A layout component consists of:

A <script> block for logic and importing other components (like a <Title> or <Navbar>).
A template containing the shared HTML structure (e.g., <header>, <main>, <footer>).
A <style> block for styling the layout's elements.

The `<slot>` Element

Inside the layout's template, the <slot /> element is used. This is a special SvelteKit element that acts as a placeholder. SvelteKit automatically injects the content of the currently active page component into this slot.

<!-- src/routes/__layout.svelte -->
<script>
  import Title from '$lib/Title.svelte';
</script>

<header>
  <Title title="Ninja Gaming Guides" />
</header>

<main>
  <!-- The content of index.svelte or about.svelte goes here -->
  <slot />
</main>

<footer>
  <p>Copyright 2022</p>
</footer>

Adding Styles

There are two primary ways to add styles in the context of a layout.

Scoped Styles

Placing a <style> tag within __layout.svelte allows you to write CSS that is scoped to the layout component itself. These styles will apply to the <header>, <footer>, etc., but will not leak out to affect other components.

Global Styles

To apply styles sitewide (e.g., to the <body> tag, or to define base styles for headings and paragraphs), you should use a global stylesheet.

Create a CSS file: For organization, create a file like src/styles/global.css.
Add your global rules: Define styles for body, h1, p, a, and import any custom fonts.
Import into the layout: Add an import statement to the top of the <script> block in your __layout.svelte file.
```
// src/routes/__layout.svelte
import '../styles/global.css';
```

Tip
This import statement tells SvelteKit to inject the contents of global.css into the <head> of the final HTML document, making the styles available on every page.

Layout Application Scope

A __layout.svelte file created in the root src/routes directory applies its layout to every single page in your application by default. This includes pages that are nested within subfolders, such as src/routes/guides/index.svelte.

The Problem with Repetitive Components

All right then gang. So in the last lesson, we created this title component, a reusable component we put that inside the lib folder and then we use that in both pages: the homepage and the about page right here.

Now this is fine, but what if we had 10, 20, 30, 40 or even more pages? Then what we'd have to do is we'd have to import the title component on each of those pages and we'd have to use that component as well. Now this is fine but it might get a bit tiresome and it's a little bit unnecessary to be honest. And also if you changed where the title was on every page, you'd have to change every individual page component. That's a lot of work.

So instead, what we can do to combat this is create what's known as a layout component. And a layout component wraps our page components, and they contain different elements or different parts of a template that would be common to every page. Now every page in this website could have a title and also a footer. So those things would go inside the layout component, and those things would then wrap every other page component that we have.

Creating a Layout Component with

So in order to create a layout component we go to the routes folder, right-click, new file, and then it's __layout.svelte.

So these double underscores, they tell SvelteKit, "Look, this is not a normal page component." So you wouldn't go to /layout in the address bar and hit enter to get a layout page. Instead it says, "Okay, double underscore twice. Now I know that this is a special layout component."

So a layout component is pretty much the same as any other Svelte component. It contains a script, a template, and also some styles. So what I'm going to do is create first of all a script, just in case we need to do any logic in there or import later on. And then down here we're going to do the template. So I'll do a header first of all, and in fact we're going to have the title component inside the header. And we'll pass in a title prop, we'll set it equal to Ninja Gaming Guides, like so. Now, because we're using that title component, we have to import it at the top over here. So let's do that. Import Title from $lib/Title.svelte. All right, so that's the header.

And then we'll have a main tag. Now inside the main tag, this is where I want basically all of the page content to go, right? We'll come back to that in a minute though.

Now down here at the bottom of every page will be a footer and inside that, we'll do a paragraph tag and I'll just say Copyright 2022 Ninja Gaming Guides, like so. All right so, now this right here, this is where I want the page content to go. So if I go to /, I get the index component dropped in here. If I go to /about, I get the about component dropped in here.

Now the way we do that inside SvelteKit is by just using a special tag called slot. Let me just do this manually. slot, like so. And when SvelteKit sees this, it looks for the page component that we're currently at the address for. So if I was at /about, it would look for the about component and it places it right here where the slot tag is.

Styling the Layout & Reviewing the Result

All right. So then that's pretty much it. But we do want some styles as well. And I'm just going to paste those in at the bottom. So we say we have a header up here and we display that as flex. And then down here, we say justify-content: center. So everything should sit in the middle. And then down here we say the main tag, max-width: 960 pixels, margin top and bottom 20 pixels, also left and right. That centralizes everything in the page to the middle. And then the footer, we say text-align: center. Awesome.

So that my friends, is pretty much it for now. Let's see what it looks like in the browser. Okay then, so in the browser we now see two titles. We see the one at the top and this is coming from the layout component, and also we see the footer coming from the layout component. And this one here is because we also have the title component embedded into the individual pages. So right now we're on the about page, we see all the about content in the middle where that slot tag was. So that's working at least, but we do see this title component again. We'll get rid of that in a second. If we go to the home component, again we see the layout is working. We have the title at the top, we have the main content in the middle where the slot would be, and then at the bottom we have the footer. Awesome. So we just need to get rid of the extra title components, but also I want to show you how we can add in some global styles as well.

Implementing Global Styles

So then first things first, let's go to these other page components and get rid of the import right here for the title, and we can get rid of the title there as well. Then in the about page, get rid of the import and get rid of the title component. All right, so now we shouldn't see those titles duplicated.

Now, the other thing I wanted to quickly show you is how we add some global styles in here. Because say for example I wanted to style the body tag, how would I do that? Well, I can't place a body selector in here because the body tag is not in this template. The body tag is actually just here, right? So what I could do is I could add the styles directly here if I wanted to, in this page inside the head. Or what I could do is I could create a global stylesheet inside the src folder, and then that would be imported just at the top right here. And when it imports that stylesheet, it's just going to place those styles in the head of our document.

So let me do this. Let me go to the source folder, I'm going to create a new folder called styles. You don't have to call it styles, you don't even have to put it in this folder. I'm going to do it just for organization. And then I'm going to create a new file called global.css. And then inside this global.css file, we can place whatever CSS that we want. Now, I'm just going to go to my repo and I'm just going to copy all these. So let me just copy them and paste them over here. Dead simple. We have an import at the top, which is for a Google font and the family is this thing right here.

Now down here we say the body has this purple background color, a margin of zero. Then we style the headings, the anchor tags, the paragraphs, and the li tags. We give all of those this very light purple or pinky color. The font family is this thing that we just imported up here, so this one. And then the font weight is normal. So some dead simple global styles.

Right now in here we can import those. And all we have to do is say import and then where are they coming from? Well, currently we're inside the routes folder, so we need to come out of there. So I'll say ../ to come out of the folder, then into the styles folder, and then we want the global.css file. And that's all we need to do. Nothing else needs doing with this now. And in fact I need to get rid of that body at the bottom.

Final Review & Next Steps

So now since we've imported these, this should all work and these global styles should take effect in the web page.

And voila, there we go. So now we can see this purple background and everything looks a bit better. We've got this nice retro font going on. I said nice, it's not really that nice, but it does look retro for gaming. If we go to the about page, we can see all of the styles still take effect. And also we can see now we don't get that duplicate title on both of these pages as well.

Now by the way, if we go to the guides page, we're also getting this layout right here. We have the title at the top, and we have the footer at the bottom. So this layout component that we created, it's actually being used on every single page component, even if those page components are nested in other folders like this one is right here. Okay.

Now, what if we wanted this guides page right here, or any other component, any page component inside the guides folder, to maybe have a different layout? Well we can do that using reset layouts and we're going to talk about those in the next lesson.