SvelteKit Crash Course Tutorial #6 - Layout Components

Key Takeaways

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 so in order to create a layout component we go to the routes folder right click new file and then it's underscore underscore and then it's called layout dot svelts so these double underscores they tell sveltkit look this is not a normal page component so you wouldn't go to forward slash layout in the address bar and hit enter to get a layout page instead it says okay double underscore twice first 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 or dollar sign lib rather forward slash title dot felt 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 forward slash i get the index component dropped in here if i go to forward slash about i get the about component dropped in here now the way we do that inside felt kit is by just using a special tag called slot not slow router or saluter slots okay that's not going to work let me just do this manually slots like so and when sveltkit sees this it looks for the page component that we're currently at the address for so if i was at forward slash about it would look for the about component and it places it right here where the slot tag is 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 components 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 which is 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 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 style sheet inside the source folder and then that would be imported just at the top right here and when it imports that style sheet 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 woohoo 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 start the headings the anchor tags the paragraphs and the ally 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 way 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 dot dot forward slash to come out with 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 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 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