 Hello there, my friend and friends. The other day I looked at a very simple, minimalistic approach we can take to starting off our CSS just to highlight that we really don't need to over engineer things to get them looking pretty good. And while people really appreciated that, I thought we could step things up and still see how we can keep things very minimal but create really nice layouts at the same time but with a little bit more when it comes to colors and choosing nice fonts. Having some fluid typography could be a really nice thing. And just elevating the overall look while again staying very simple but we're also looking at a few different resources we can use to do all of this that will make your life a lot easier. So to do that, we're gonna jump right on into VS Code and if you saw that last video, this page will look very similar to you because this is what we were working on. So we're gonna continue from this one. We're gonna start off the, I just have a main here with an article in it and then we have our content. That's just a whole bunch of different stuff in here. Nothing too complicated. And my CSS as you can probably tell looking at the page has absolutely nothing. And we're gonna start with a really simple reset here. So we're just gonna reset our box sizing. It's very common. People like nuking the margins off of everything. So we're gonna take that step right there. We're gonna add in the light and dark color scheme automatically. Now this is based on the user's system preferences. So if they set their system to a dark theme, it will switch over to dark and we're just making sure our images are responsive. And when I hit save, you can see all of that has come through right there. Now we want a color scheme and one site I would recommend is real-time colors for it because it gives you a little bit more than just the default and you can push space bar. It's not just gonna give you a color scheme but it's gonna give you an example of what that color scheme actually looks like when you're at larger, you know, going through here, it mocks it all up and you just push space bar to go through on different ones. And you can see what the different things look like. It might take a little while, but you can nail down at least into something that's pushing in the right direction relatively quickly. After a bit of poking around, I came across this one that I kind of like. So we're gonna stick with this one right here. And you can see it has the colors that have come along the bottom. So I'm just gonna move this out of the way and I'm gonna bring those colors into my project as custom properties. You'll notice what I did here is I took the colors exactly from what I got here on their site, which was the light theme and I took them all as custom properties. I just used the same names here because we're keeping things very simple. But then what over here I did is I added a media query for first color scheme dark and basically I switched the text and surface around based on, you know, just inverting them. And then here I kept everything the same, but the secondary color that was super light, I just kept the same HSL value, but I made it a lot darker by reducing the lightness value right here. And just because I think that depending on how I'm using it, I'm assuming it went from very light to very dark, whereas these ones are sort of mid toned already. And so I think we could probably leave them alone, but if I need to adjust it down the road, I always could. Now real-time colors does have options for fonts, but it's probably not what we really want. So another option is font pair.co. And here it's just groupings of different fonts. You can find one that you think looks pretty good. So once you found the one that you like, you can head on over to Google Fonts and pull those over. I've grabbed the different font weights and everything that I want. And I'm gonna grab them from here. If you've heard of self-host Google Fonts, I've also looked at that in a previous video. There should be a card popping up and a link in the description. So we can add the HTML from there into here. And then I can go and grab these two font families and bring them over here where I will set these up as custom properties as well. I'm calling mine font family base and font family accent. If you want it to be body and headings or whatever you want, name them however you want. And then we just need to go through and actually set these up and get everything working. So what we'll do is come here and start our basic body styling while we're at it. So we can create our body selector. And I'm just gonna go through this really quickly and set up all of the different things based on the custom properties we set up. Now there's usually a few other styles that I will put on the body. We're gonna come back to those in just a second. But first, as we can see, everything is really jammed together and nothing has any room to breathe. So we're gonna do two different things to fix that. First, I'm gonna create a wrapper class. I used to always call this container, but now that we have container queries and you need to declare a parent container for things, I'm just don't want like a weird naming, like is it a container for a container query or is it just something holding content? Maybe it could be both, but I've been using wrapper lately. So on here, I'm gonna use a min function for my width where I'm gonna say 100% minus two rem or maybe we can even make that a bit bigger, three rem comma and we'll say the max size on here is 65 CH. And then I'm also gonna come in here and say margin inline which will be my left and right margins as long as the writing direction is left to right or right to left, margin inline will be auto and hit save. And then we're gonna come back over to my index and I'm just gonna put the class is on my article here of wrapper. So we can actually use that and it can hold our content in the middle of the page. Now to break this down a little bit because you might be scratching your head on what's happening with this and you could definitely do this with a couple of other lines but the 100% minus three rem means that the largest this can get if the page were to shrink. So if we open up our dev tools and we shrink things down a little bit and we open responsive mode there as this gets smaller we're gonna have three rem split between the two sides here. So it's effectively one and a half rem of space on the left and on the right here is just because this three rem is getting split between both sides. And then a max width of 65 CH is based on the font size of the body and it's roughly 65 characters wide. This number can definitely be changed depending on your project. You could go with rems you can go with pixels if you really wanted to but for especially things that are more text based going based on CH makes a lot of sense because it is based on how the reading length of a line. And so if I adjust my font size the max width will adjust with that. Now the other thing I wanna add here is a flow class. I've got this from Andy Bell and Hayden Pickering where there's different ways of doing this. So I'm gonna do it like this. This is called the libido mice owl. It's selecting everything but the first child. So let's just do a background of red on here just so we can see that this is going to work and we're gonna have it as a flapper of as a flapper as a wrapper and our flow right there. And you can see everything is getting a red background on it except for my H one up there. So what that means is we can come back to here and instead of a background on there we're gonna do a margin top. And I'm gonna say for now that it's one M and hit save. This will be something else that we're going to circle back around to but for now that is going to do the job and give us at least a bit of spacing to breathe. We're gonna fix things up sort of circle back and maybe make some tweaks to a couple of these numbers. Before I do move on if you find this is too unreadable you could replace this with a where not first child and it should do the same thing. So if I hit save you can see it has the exact same impact and I'm using where here to keep it at zero specificity. If is that more readable? It's up to you. If you'd prefer a different approach you can there is a reason that I'm going with margin top that we'll circle back around to in a little bit rather than margin bottom which is good when you have text-based content like this and I definitely wouldn't use either flex or grid to try and create spacing between all of these elements using gap because then you have consistent spacing. We'll talk more about that a little bit later but we actually wanna take advantage of M being different based on different font sizes. With that in place and things looking a little bit better we're gonna look at one more resource which is utopia.fyi. This is great also for creating spacing on different things. They have a type calculator, a space calculator and a grid calculator but I'm just going to use the space calculator here. I'm not gonna deep dive how this works but basically you set your minimum size, your maximum size and the font size that you want them to be and I think this is a nice default. So I will go with a more aggressive scale at the larger font sizes where I'm gonna bump it up just so we can really see this in action. We're gonna be creating a fluid type scale with this. In general, it's very common to have smaller scales when you're on mobile because we have less room overall so we don't want the bigger fonts getting too gigantic but when we have more screen real estate on larger screen sizes we can go in with more aggressive type scales where the bigger fonts are much bigger than the smaller ones I guess is the simpler way to look at it. So you can see this is the scale that it's creating for us and you can see that it is right here. It is possible that use clamp is off. I would strongly recommend that you have it on and you can have it show what the pixel values are if you want, it will be commenting them in but I'm not gonna bother with that and I'm gonna come and grab this or you know what, we're gonna grab all of this but not the root because we can just come in and drop them in right there. Now they call them step zero or step negative two all the way up to a step five right here. I don't need these two smaller ones if you need them by all means you can keep them and I'm also gonna come through and update the naming here. So just give me one second. All right, so I've just done them with FS because I've been using CLR for color FF for font family and now we have FS for font size and I always treat 400 as my base font size. This is smaller and those are larger ones. I'm not going to be using the 300 for now but I like having it there just in case I do need it for smaller font sizes. So then we just need to come through and set all of these up and to do that we're gonna come back to our body here. We'll come up to here and we're gonna say font size and I don't care what the font size is I just know that my font size is going to be my 400 because that's my base and you can see it's come in. Now it is actually really big but that's fine for easy things to read like this for me I like that. I'm old, I need large font sizes but obviously use a type scale that would work for you. With this though the one thing we'll notice is the line height is really squished together. So I'm gonna come here and I'm gonna increase the line height. I like starting with a 1.6 if you want a 1.5 or 1.7 it's really up to you which one but definitely the 1.4 which is the default is very close together. So we can come in and increase that and you can just play around with it and try and find something that you think is nice and readable. The other thing you'll notice here when I did that if we did my font size smaller again see how we're limited to this line length right here and when I make that font size much bigger if I increase this notice how my container has gotten a lot wider now to match that font size that I've put in here and in doing that I actually find it's a little bit long for how I have things set up right now. So I'm actually going to reduce the max width of my container here. So we're gonna say or my wrapper I should say we're gonna say this is 55 CH and I think that might give us something that's gonna be a little bit better and I sort of like that. Perfect. Now this is a fluid type but we're gonna get back to that in a second. For now what we're going to do is finish setting things up. So we have my body. Let's come here and we need to say that we have my H1, my H2, H3 you could do this for all your headings I guess but we'll say font family in this case is going to be my var font family accent. And just because I know the font sizes on these are going to be quite large I'm also gonna come in here with a line height of about 1.1, 1.1, 1.2 it does depend on the sizes but when we're increasing it for smaller font sizes we definitely wanna decrease it for much larger font sizes. So that should help a little bit because now we can come in and we can come through and say font size and I'm gonna do my var font size we'll try the 700 and you can see that has come in up there. It looks like I have two H1s and that was a mistake on my part we'll fix that after. So that's my two, that's my three this could be a 600 and then this one goes down to a 500 and I definitely have two H1s which is a no-no. So we'll delete that one right there or you know what, we'll just make we'll make this one an H2 and we'll make this one an H3 just like that. So we get a little bit more of a taste of the different font sizes and everything that are coming in and already it's looking quite a little bit better and as I said these are going to be responsive or fluid type scale. So now if I reduce this you can actually see the font sizes are reducing themselves and you can see what I meant about it being a less aggressive difference between the smaller size and the bigger size here. Whereas when we get to the larger viewports and we have more room those larger font sizes are gonna be much bigger than the font size we have here. Next up we can use a couple of the colors that we came up with because we have the primary and the accent right there. So I think the first thing I'm gonna do is I'm gonna come right around after my heading font sizes and all of that we can say that my links are going to be the color of my var color primary. And then we are also gonna want our hover and in a focus and let's just switch that over to the secondary and we can get the color and that wasn't secondary. I wanted to put the accent there where it was very different and we have a hover color that we can use on the links and while we're at it we might as well come up and say color here is my var color primary because that should add a nice little splash there. And you know what, that's looking pretty good and I think I'd like a little bit more through the rest of the page as well so we can just throw that color accent or primary down here and put that on my H2s as well just to add a little splash of color as we go through and one more thing that we can do and I didn't do this when I created these colors because I was taking it from that color generator we had but I'm going to duplicate my text here and I'm gonna add a little bit of variation to this where this one I'm gonna add body to it just our text, we can do body so this is like any text that isn't your body I guess maybe we could have a better naming for this but I'm gonna bring this up to about a 15% maybe a 10% and we're gonna drop the saturation down on it. Basically I want it to be something that's not quite as dark if it's in the light color scheme and then we're also gonna come through and do the same thing here but we'll go with like an 85% so it'd be very light but it's not quite the pure white that we have there and the reason I'm doing that is we can come down to our body and let's switch this one over and it just sort of takes that edge off a little bit it's a little bit less aggressive but then we'd also wanna come down onto our H3s here and then we can put the color back color var color text and here's where like the naming has fallen apart a little bit but I do think having the higher contrast let's just come down we can add another H3 right here H3 with Lorem 10 just so this does have a little bit more punch and oomph to it whereas here we get sort of a little bit more of a toned down look just like that. Another fun thing that we can do while we're here and we're playing with our colors a little bit just to add that little touch and keeping our CSS very minimalistic is we can also, we'll come right here and I'm gonna do the marker and markers are these little guys here and it would also be your numbers, unnumbered lists and we can come in with a color on those var color why don't we, we'll use the accent just to change things up though I do think it probably would make more sense to go with the primary in this case but we can come in and you can just change the colors without having to do any work on those which is super cool and super neat I think it's fun being able to do something like that. Now one thing that does not look good in my opinion is this guy right here and this is a really cool thing it's very new to CSS it's not fully supported but it's one of those things that like if this looked like that it's not the end of the world, it's fine but we can improve it a lot so what I'm actually gonna do is we're gonna change a couple of things on our headings as well so what we're gonna do is we're gonna come on to these guys right here and so what we're gonna say is on my H1H2 and H3 we can do a text wrap of balance and I'm even getting an error here because VS Code is like, huh? but you can see that it worked and it's balancing the line out and so this is only going you can see it's doing the same thing right here it's taking lines where you have like a whole long line and then like this little thing sticking out at the end and it does its best to try and balance those out so if I turn that off you can see it's making a change to both of these and it just helps make things a little bit more readable and if it doesn't actually kick in it really doesn't matter so it's just like it's a nice little progressive enhancement that you don't really have to worry about and as more people get newer browsers or updated browsers and as other browsers gain support for it more and more people get it and that's it, it's super handy now I said another thing we were gonna circle back around to was our low class so let's go and find it, it's right there and right now I have that set to a margin top of 1M and what I'm actually gonna do is change this to and we're gonna call it flow space and I'm gonna do comma 1M which is gonna have the exact same result where 1M becomes the fallback for these elements but the advantage of it is and 1M is already good because you can see the space here is much bigger than the space here and if we look at the space, you know, same thing the space here is bigger than the space here which is bigger than the space here and this is sort of what we want we want spacing to be increased on our headings and be bigger on top of headings than they are on top of other elements and so we can take advantage of this a little bit where we have that but then we could come in and you can actually say things like my H1 as a flow space and you can make that bigger and then we can say that my H2 as a flow space of 1.5M and then it's gonna increase that space even more and we don't have to like we're not really fiddling around with other things we're saying if it's in an environment where flow spacing is being used it's going to be increased or increasing the margin top and personally I think this one is fine but we're just sort of playing around with things and adding that now I did increase it from H1 and we're not seeing it because it is the first element at the top, right? There's nothing else that's in there so it does not get that flow space on top of it because of that you might just say that my H1 has a margin top of 2M it really depends on how you want to work and then how your layout is and there's so many different things that could play into this and it really depends on what the markup would be in your project so a few different options on how you could work but there we go I think that's actually looking much better and we can come through and we have sort of these larger spaces like that really can help with the overall flow of your page so I think that's already looking a lot better and so there we have it a very simple layout nothing too fancy but I think it's looking a lot better than what the defaults were on this page and hopefully a few of the resources that I shared along the way could help you get started as well but of course we don't always want articles and just have to do something simple like I did in this case we sometimes need to actually include layouts and other stuff like that but layouts don't have to be complex either we can actually keep a lot of the layout stuff pretty simple and if you'd like to know a few ways we can do that with CSS Grid there is a video right here for your viewing pleasure and with that I would like to thank my neighbors of awesome Andrew, James and Rico, Michael, Simon, Tim and Johnny as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner on the internet just a little bit more awesome