Styling our Globe

[00:00 - 00:11] In this lesson, we're going to be making our globe look better. We're going to be adding some additional styling, you know, no functionality here, really just playing around with colors, so that the chart looks a little bit cooler.

[00:12 - 00:26] And we're going to do what, you know, web designers and database developers love nowadays, which is dark mode. We're going to make this globe primarily dark with dark features, and then highlight with bright colors to make things stand out.

[00:27 - 00:40] So in specific, we're going to be doing basically three things in this lesson. First, we'll add a background color to the entire web page itself, and then second, we'll be filling the globe's color and the countries as well.

[00:41 - 00:55] And then third, and finally, we'll add a glow, kind of like a fading glow effect behind the globe for some 3D texture, kind of like a drop or a box shadow. So again, it should be pretty easy before we get into some of the functionality .

[00:56 - 01:03] Just want to take a brief detour to do some fun styling. So the first thing that we're going to do, like I mentioned, is add a background color to the entire web page.

[01:04 - 01:11] In order to do this, we want to target the entire body. As you can see here, this is the body of our web page.

[01:12 - 01:20] And so if you wanted to play around with what it would look like to adjust rules, you could do so in your inspector. For example, I could give the body a background of black.

[01:21 - 01:34] And this is good for testing and for playing around with maybe finding the color you want to use, maybe you want a faint black like this, or maybe you want to gray, whatever else. The inspect tool is very great to kind of prototype in the browser what you want to see.

[01:35 - 01:45] But obviously, this isn't going to persist across page loads because this is just the inspector tool. So what we'll instead do, rather than do it in inspector, is add a new class or a new rule set down here.

[01:46 - 01:59] So in our style tag, we're going to create a new class or a new rule for our body element. And we're going to add a background, and you can call this whatever you want, but I'm going to do RGB 40 40 40.

[02:00 - 02:07] Now, you're not going to see this take effect at first. In fact, you're also going to see spelled yell at us and say that basically, you can't target body.

[02:08 - 02:16] It is an unused CSS selector. And the reason for that is because body is not referenced anywhere within this markup, right?

[02:17 - 02:25] If we were to target chart container, that would work, because there is a chart container in our markup. If we were to target all divs, that would work because there are divs in our markup.

[02:26 - 02:45] But body, an element like this, does not exist because it's kind of a global element that wraps around even app.spelt, which seems like the highest level. There's one level higher, which is this global HTML and body elements that we can only target in a CSS file like here.

[02:46 - 02:54] Or we could do so in app.spelt using a global declaration. So we'll just wrap body with global like so and hit save.

[02:55 - 03:00] And now you'll see a background color get applied. So beautiful, we have a background color that spans the entire page height.

[03:01 - 03:08] We have this dark mode feel going on. But obviously now the fill of the globe and the individual countries isn't looking too good.

[03:09 - 03:14] So what do we want to do to fix this? We want to make the globe itself have a darker color as well.

[03:15 - 03:26] So again, if you want to play around with this, you could find the circle element and play around with a fill. I'm not sure if you would want a darker fill or a lighter fill, but you can play around with whatever you think looks good.

[03:27 - 03:33] And the inspect tool is really great for this. I'm going to land on something like so maybe.

[03:34 - 03:42] Something around here, I've written down a color that I thought was working well, which is 1c1c1c. So 1c1c1c.

[03:43 - 03:46] I think that looks good. So what I'm going to do is go into my circle.

[03:47 - 03:52] And I'm going to replace the light blue fill with 1c1c1c. And it hits save and refresh.

[03:53 - 04:02] You'll notice that color does in fact persist. But the countries, I think, look out of place because there's this very light green fill for a dark background.

[04:03 - 04:14] So let's just change the border stroke and the country fill to be a bit of a better color. So rather than light green, let's play around with a darker green color.

[04:15 - 04:22] You could write green and play around with different colors. In my testing, I have found that this hex code is going to be pretty good.

[04:23 - 04:28] 26362e. I think that's pretty nice.

[04:29 - 04:35] 26362e. And then down in our stroke rather than white, that obviously does not work.

[04:36 - 04:41] Now let's just make it appear black. Now we have this dark mode country fill and border.

[04:42 - 04:52] But notice that these country fills are all the same. And eventually we're going to introduce data into this globe so that it represents population by country and we're going to have a gradient color scale.

[04:53 - 04:58] So if you don't like this color yet, don't worry. We will play around with the country fills themselves a bit more later.

[04:59 - 05:06] But for now, I think this is a really good starting point. So let's finish with one final bonus feature, which is adding a glow to the globe.

[05:07 - 05:28] And this is just a small tweak that you can kind of copy across projects that I think does kind of bring it to the next level and make it look pretty nice. And it's just a little bit of a trick using SVG filters, like a lot of Gaussian blurs and offsets and some complicated things that I don't really understand and you don't have to, but you'll know that it will work in your code.

[05:29 - 05:38] So what we're going to do is copy an SVG filter, which you can definitely look up the documentation for that. And we're going to place it inside a series of deaths.

[05:39 - 05:56] So basically, the way that deaths work is you place them inside of an SVG tag and inside of these deaths, I guess definitions, you can define a series of filters and other properties that basically adjust the appearance of the SVG whenever that filter is applied . So what does that mean?

[05:57 - 06:03] Let's go ahead and open and close a deaths tag. And then as you can see, we could put a clip path in here, for example, to do some cropping.

[06:04 - 06:09] But what we're going to want to do is copy in a filter that looks like this. So what's happening here?

[06:10 - 06:22] I can't tell you line by line, but on a high level, we're creating a new filter with an ID of glow. And we're applying all of these properties to basically get a blur background that applies to the globe.

[06:23 - 06:29] And if I save, nothing's going to happen at first. And that's because the circle itself needs to accept this filter.

[06:30 - 06:38] So under all of our other attributes, I'll go ahead and write filter equals URL and then the ID that we provided, which is glow. So I'll hit save.

[06:39 - 06:46] And now you can see that globe does in fact appear. You'll notice that it's spilling over the edges of the globe right here.

[06:47 - 07:00] And the easiest fix to this is just to target our entire SVG element and say overflow is visible, which as the name implies, allows the overflow to be seen. So if I save that, now you can see the overlap.

[07:01 - 07:02] It looks beautiful. There's this nice glow.

[07:03 - 07:11] And you can definitely play around with different settings. So what I have noticed in writing this is that playing around with these numbers is what will affect, you know, the intensity of the glow.

[07:12 - 07:17] So as you can see now, the blur is almost nonexistent. But if we did 50, it would be huge.

[07:18 - 07:28] Let's take that back to seven and then you could play with the color as well. So if you wanted to be more faint, you could change the flood color to be more opaque or more transparent or less transparent.

[07:29 - 07:36] So you can play around with whatever you think looks good. I like these numbers right here, but you can definitely play around with whatever you think looks best.

[07:37 - 07:44] And then the final thing that I think we could change here is because this bit of code really serves no purpose in the main markup, right? Why does it live in app.spelt?

[07:45 - 07:47] Is it serving any real purpose there? I think the answer is no.

[07:48 - 07:52] So let's go ahead and move it into a new component. I'll move me so you can see this.

[07:53 - 07:59] And let's create a new component and call it glow.spelt, right? If I can target it.

[08:00 - 08:07] Glow.spelt. And then all we have to do now is just copy this entire chunk of code over, paste it in here.

[08:08 - 08:09] There are no props or anything. So this is pure markup.

[08:10 - 08:20] That's all that this is going to have. Then let's import glow from components glow and place it in the exact same position that it wasn't.

[08:21 - 08:30] So now if I save this and refresh, nothing changes, which is what we would hope , right? The globe is still there and the glow is still behind it.

[08:31 - 08:38] And the difference is we just move this into its own component. So if we ever did want to make edits, we can make them in here and it doesn't clog up our main markup.

[08:39 - 08:46] I'll go ahead and delete the old example component as well. And there we have it, a nice styled glow.

[08:47 - 08:59] In the next lesson, we're going to begin actually building kind of the data driven properties of our globe by adding data. So we'll add population data on a country by country basis and then fill each country dynamically according to its population.

[09:00 - 09:04] So thanks for bearing with me in this lesson. I hope this styling was fun and I'll see you in the next one where we'll be adding data.