Adding Global Styles

[00:00:00]
>> Sometimes you want global styles. Sometimes you want to maybe reset or normalize your UI. So let's go ahead and install a really cool package. So open your terminal. We're gonna save npm i, so npm install, polished, it's called polished. So let me go to the site, so polished.

[00:00:23]
If you look this up, we get a bunch of nail salons. So it's Polished.js.org. Okay, this has a ton of really cool features that you can use with your code. Something that might be really useful is visually hide, I think it was called, let me see. Hide visually, this is so great for accessibility.

[00:00:45]
If you need to add additional text, like a hidden description for assistive technology, hiding something visually is really hard. You can't write display none. It'll remove that from the document and it won't be wrote allowed. So having these little tools that you can use to do things, we're gonna use normalize.

[00:01:03]
These are really useful and we're gonna use them just like a function call within our curly brackets. Okay, so Polished has now been installed. I'm gonna go back to a full screen on this. So inside of utils, let's add a new file called Global.js. I'm going to capitalize it cuz we're gonna instantiate it like a react component or like an HTML component, so Global.js.

[00:01:29]
And we're gonna import three things. So import createGlobalStyle, From styled components. We'll import our primary font. Now, we can't, since this is in the same directory as the typography file, we can't just say, import primary font from this current directory. That's not gonna work. You actually do have to say typography in this case because it's in the same directory.

[00:02:01]
And let's import our normalized function from Polished. Okay, let's get rid of this. So, let's create a constant and let's export it, export const GlobalStyle and it's gonna use createGlobalStyle. Two backticks, and in here we're going to essentially write all of our CSS that we want applied globally.

[00:02:30]
The first thing we wanna do is normalize our code. So again, we've got our dollar sign curly brackets to evaluate this, we're just gonna call normalize just like a function call. So that's gonna normalize all of our code. I'm gonna add a couple more things. So on our HTML element, let's first set font size to 16 pixels.

[00:02:49]
So this is how you would set the default font size and when we use our REM values now they're gonna be evaluated against the 16 pixels. We're gonna do box-sizing border-box. So what this does is if you have padding and margin and you set a specific width and height, and let's say I set a width of 300 pixels on my button.

[00:03:11]
But I've also set, or let's say it's a Max width, right? I set max width of 300 pixels on my button, but I also have padding and stuff. What that's gonna do, box-sizing border-box is gonna say no matter what padding or margin or whatever is added to this element, it can be no bigger than 300 pixels.

[00:03:27]
If you don't use this sometimes when you add padding and margin, it might push the boundaries above the 300 pixels and so this is really gonna prevent that. It's gonna say maximum no matter what padding margin width, whatever you have on here, keep it within the box, okay?

[00:03:42]
Here we're going to select three things. We're going to select all, all before, and another pseudo element, which is after. We're just gonna say box-sizing inherit. So from the parent element, which in this case is HTML, just inherit that box-sizing value. On our body I'm gonna set a margin of 0 and I'm gonna set font family to our font, font-family to our primaryFont.

[00:04:11]
So all of our body content will inherit our primary font now. And the last thing, I'm just gonna set this on my main just for display purposes, but I'm gonna set a width of 90% and a margin of 0 auto, so it should center things, okay? So we've got some global styles.

[00:04:30]
We need to add this to our index export here so we can just import it from utils. So export star from Global. So let's go ahead and actually use this. Let's go back to our index file in the source, in the root of the source where we instantiate all of our components.

[00:04:46]
So import Global, I'm gonna call it GlobalStyle from utils. And all you need to do is the last element is just render it, so GlobalStyle, just like that, just a self closing tag. And if we come back here now, ideally we should see that should be added. Let's test that real quick as it's being added.

[00:05:17]
Let's set a padding, I don't know. So yeah, we can see our GlobalStyle's now being added, okay?