Custom Site Theme Picker Tutorial #2 - Adding the Settings Section

Key Takeaways

all right let's go ahead and jump right into the project hopefully you've got everything installed okay you should have done that in lesson one and if so you can open up your integrated terminal or wherever you want to run this and just type npm run Dev you have to have npm installed at first but I'm assuming you've already done that once you do that you should be able to go to Port 5173 or whatever it gives you down here and open it up and you should be set so it should look like this you should have all this already in there by default all we want to do is add a settings section down here and that's what we're going to do in this second lesson is add the basic code for kind of this section and start to stylize it now the hard thing about this will be we're not going to see a lot of change yet that will start to come in the next lesson where we do this motion on and off all right so let's go ahead and jump over this way and the first thing I want to do is jump to my index.html page we're going to scroll all the way down and you'll see that we've got several sections so maybe let's close the sidebar I'll close the terminal just so we can kind of see what's going on here and let's close down some of these sections just to make it a little bit easier to see so everything's inside of a wrapper so we don't want to close that however we've got this header tag we can close that the main we also don't want to close what we want to do is just come here and collapse these sections so inside the main but below the final section is where we want to add our settings section and because this is kind of a section aside from the main body of the HTML I want to go ahead and add this as an aside tag now if I jump back over to the finished code on my website you can see that we've got a header and then we've got these sections down here now one of the things that can be really nice if you want to kind of debug what stuff looks like is you can come inside here and let me just come into the elements tab and let me close down the mobile view just so we can see a little bit better I'm going to come inside here and just inside the body if I can get this to let me edit it as HTML we're going to add a style tag and inside the style tag I just want to take everything and I want to add to this a border about one pixel solid and red now what this will allow us to do if I hit command and enter is C everywhere on the entire site so we got all these little sections so as you can see what we've got is a section here a section here and these kind of have their own sections and then we've got a gap inside here so this red section right here is the HTML we're going to start adding everything inside of that will be kind of like our site wrap or settings wrapper then I have a header right here and then below here I have another section that has two sections inside of it so let's go ahead and add the code that we need for all those so if I come inside this aside tag I want to go ahead and add that settings wrapper so if I just do dot settings a wrapper this will use Emit and vs code by default to basically give me a Class A div with a class of settings wrapper inside of it now remember I've got an H2 right here so I'll do H2 and this will just say custom site settings all right next below that we've got this section right here so I'm going to come over here and do dot settings and that will give me a div with a class of settings and this will have two basic sections this stack right here and this stack right here now we can kind of name these whatever we want but since they're Stacks usually I'd have more like a whole design system thought out but this is the only thing we're really doing in the HTML so let's just add a stack tag right here and another one here so this will be this stack you see how these are all evenly spaced and this will be this stack and these are evenly spaced as well Okay so we've got all of those set and ready to go and that's kind of the core of what we're going to do in the HTML now in order to understand how we're going to write the CSS I need to open up our CSS file and see what we've already done in there now as we interact with the CSS I will explain certain things here and there right now the only thing I want to show you is just two things one is we've got a container class and if I scroll all the way down here right here you can see that the container class is going to keep everything in the center and it's also going to limit how wide it can be this is a little bit of gobbledygook um there's there are easier less Hot Shot ways to write this but this is just how I happen to have write it I've written it at the time so you can see I've got 100 view with minus 70 room divided by 2 which splits it on either side since this is margin left and right and then basically the maximum it's going to choose between one of these two whichever one is bigger either 1.5 rem or this right here okay so if that doesn't make sense all you need to know is that we'll keep everything in the center so let's come back over here and I want to add that to my side so we'll say class and I'm going to call this container that's a good practice to go ahead and label these kind of major sections or sides so I'm going to give this an aria label and this will say settings section and this is another way to do this is pointing it to the an ID of this H2 as well but this will help assistive technology know what this section is about this aside is about okay next the other thing I want to do is I want to add a special class to this H2 so to show you once again if I come over this way you're going to see that I've got H1 tags and anything with a DOT H1 H2 tags anything with a DOT H2 etc etc so the dot obviously is a class and so what I'm saying is if it has a class of H2 go ahead and give it this now the reason I add classes and or tags I kind of have this as the default for an H1 or the default for an H2 but sometimes you might have a semantic H2 that you want to actually be styled a little bit different so if I save this and jump over here you're going to see down here we've got custom site settings however I can come inside here and do class H3 when I save this you'll notice it gets a smaller font size so it's styled like an H3 but I get to use the right semantic tag generally speaking you want an H2 per section or per side per major content area in your site so this says what this entire section is about and that's what I want to do okay so that's all I'm doing here is I'm applying this even though it happens to be an H2 tag let's jump back over this way and just kind of think through what else we have to do then this section's wrapper right here needs to be able to stack the font right here this H2 with the other sections down below it then these setting sections need to be able to stack these Stacks next to each other on desktop and move one down below the other on mobile so let's go ahead now and do that so if I scroll all the way down to the bottom of the CSS file we're going to add a bunch of things in this settings section this is where we'll do all the CSS we need to do so the first thing I'm going to do is grab the settings wrapper and if I jump back over to the HTML you'll remember that this is this thing right here that kind of keeps everything in the center of the settings section down below so right over here settings wrapper I want to do a couple things first of all I want to set this as display of grid this will stack it naturally up and down which is what I want and then it will set a Max width here this is the way of capping it side to side here we're going to say 1050 pixels and then finally it will use a logical property for margins or margin in line that's margin left and and write for right to left languages we'll just set this to Auto so it stays in the center now we also want some gap between things but in order to see that I want to come down here and let's go ahead and grab the settings itself this was the div right here that holds these two stacks and let's go ahead and set the background color here to Red I'll set the width to 100 percent and height to like I don't know 30 pixels something like that so you can see it showing up down this way now we'll also come inside and grab the two stacks so we'll say stack not Stacks but stack like that and we'll do the same thing so I'll set background color except this time I guess maybe let's do blue or something so it's really easy to see we'll say width 100 and we'll say height 30 sure and maybe just give us a little bit of space we're going to say padding of like three room okay so now we've got these two sections inside of here maybe that's a little a little big how about one rim and maybe we should give this extra height too so let's do like 200 pixels just so we've got enough room Okay so we've got two sections it's kind of hard to see down there but this is what we've got going and I'm going to change this to White just so it doesn't burn my eyes too much okay so now what I want to do is provide some space between all the children right now the children would be this and this red box down this way now like I said as we do certain things in CSS I'll explain them and the code up above so we're going to use some of these properties that I set up top these variables up top so you'll notice under the root I've declared a bunch of things about the fonts about the radius options about the easing and then importantly for space so this space is what we're going to use to set our Gap now the nice option is we've got space Dash whatever size you want and that way you say consistent in your spacings so if I scroll down we're going to do a gap of small that will basically be as small as this and as big as this depending on the screen size so this clamp property is super useful if you haven't used Clint before then you'll really enjoy this so let's come down here and let's say just below the grid we'll say Gap VAR space and small so go ahead and save that now you can see this spacing is shown right here now let's get down to the settings itself and here we're going to say display of flex so what we want these to do is be stacked side by side so we'll say align items will be Flex start that ensures that no matter the size of the content inside of them they start at the top and kind of hug to the top of this parent container this red container now let's go ahead and set a gap on these as well and you can actually set it up and down and then left and right as well so that's what we're going to do so up and down we want this to be a space of large another one of those spacing variables and then we'll do space of medium for left and right so I save this you'll see now I get a gap between these here now what happens when I get to a Mobile screen size well I want this to flex wrap of wrap that means I want it to wrap down below when it can no longer fit itself you'll see that that's what it does now we're eventually going to take this width off oh not there down this way so let's set this to something like 100 pixels and now if I come over here you'll see them there maybe we need to boost this a bit how about 250 all right so now they'll wrap next to each other when they can't fit and then when they can fit they'll snap up next to each other and that's what we want okay lastly and then I'm going to take all of these things off because we don't need these anymore this is just to show you what we're doing we're going to have a font size of VAR and here's another one of those custom properties we've got a bunch of font size fs and you've got 2XL x a large medium small and extra large you can see we're using the same kind of clamp principle where we have a small size and an ideal size and then the maximum it's allowed to get in this case I actually want to make all the font size for the settings my smallest font possible now you're not gonna be able to see anything right now you can just barely see those white outlines of the stacks but eventually this will keep our font sizes throughout that entire section too small okay finally we just got the stacks down here these are going to be hard because there's nothing inside them yet but we're basically going to add a display of grid which will stack everything up and down by default and I'll do VAR space of small and then just to make sure that the whole Stacks span the width they can we'll set the width to 100 Okay so we've done everything we need to do in this lesson we set up the basic HTML kind of understood how we need it to all stack based on kind of previewing the final site and now what we've done is set up the CSS so that we're ready to actually add these individual sections inside of here okay so in the next video we're going to talk all about this motion on off switch