So basically our last commit isn't going to include some of the changes we made in here. Just wanted to make sure it's clear. I want to save the file. So you'll see here we have sign in and sign up. So basically what I want to do is style our header here and go from there.

So let's go ahead and let's go to our style folder. Let's create a new file and let's call it header-wrapper.scss, and while we're at it let's create a file called signin.scss, and a file called signup.scss. Let's go ahead and import these all into main.scss.

Now let's go ahead and create a file for our variables, so let's say new file and see variables.scss. Okay so we're going at some colors in here like:

variables.scss

$color-gray-4D: #4D4D4D;

Now we're going to print more colors in here as we go on. Let's go into our main.scss and import the variables of the top and create another file called base and let's import it or let's call it base.

main.scss

@import 'base';
@import 'variables';

So let's say I import base and then let's create a new file in here, and let's say base.scss. This is just going to be where the base grid is. We're going to have different grids almost in every file except for this going to be our main grid. Don't get confused and think that all our grids are going to be in here.

Let's go ahead and put in some more variables just so we can build out of this header styles. So let's say:

variables.scss

$color-gray-4D: #4D4D4D;
$color-red-BA: #BA0000;
$color-gray-D8: #D8D8D8;
$color-gray-E6: #E6E6E6;

$font-encode: 'Encode Sans';
$font-encode-cond: 'Encode Sans Condensed';

Now what I want to do is basically get these fonts from Google font, so let's go to Chrome here. Let's open a new tab and go to google fonts. Now in here, we're just going to want to search encode and we're going to want to encode sans and the condensed version which is right next to it.

Now I want to go to customize, and select a few different weights so let's select bold on each of these. Let's go ahead and go back to embed. Let's copy this.

We're probably going to come back and select more fonts as we go on. But this should give us a lot of thoughts to work with. OK, let's go into our index.html, and let's throw them in in place of Monsarrat.

Now let's go back to base and let's just say:

base.scss

body {
    font-family: $font-encode;
    font-weight: 400;
    color: $color-gray-4D;
}

Alright, go back to our main.scss, and make sure we have everything imported. Now it's not going to work immediately because we're importing base before variables, and we're trying to use a variable in base that belongs in variables. So let's move this right below variables so we have access to those variables immediately.

OK let's go back to the application, and we have some default colors and fonts sweet. Now let's go ahead and further style this header. So it looks a bit better. And so it looks like our design here okay. So what I want to do is just kind of take these styles from this design here and show you how we can improve them. Well, I don't want to do that I could get confusing. I'm going to go back to the application, and let's type them out.

So what I want to do is go into header-wrapper and let's apply these styles. We're also going to apply a grid. So let's go to header-wrapper.scss, and let's say:

header-wrapper.scss

.header-wrapper {

}

In here we're going to create our own grid. So let's go to headerWrapper.js, and should give the class name H1. We're going to want to see className='header-wrapper__title' title use a className='header-wrapper__subtitle' cool.

Let's go back to our header-wrapper.scss, and let's say:

header-wrapper.scss

.header-wrapper {

    display: grid;
    grid-template-columns: [s] 1fr [e];

    &__title {

    }
    &__subtitle {

    }
}

The reason I'm adding grid is because we're going to have a log out button on a lot of these screens. So if I go to sign in and I have log in here on the design, and you'll see we have a log out button. Basically, we're going to include a log out button later on into our header which we're going to display based on which screen we are in, and we're going to have it on the screen.

Let's go ahead and let's say:

header-wrapper.scss

.header-wrapper {

    display: grid;
    grid-template-columns: [s] 1fr [e];

    grid-template-rows: 30px 20px;

    &__title {

    }
    &__subtitle {

    }
}

Then let's go over to our base.scss

base.scss

html {
    font-size: 62.5%;
}

Now you can your chrome and your Google REM w3, and it will say CSSA units click on it, and you'll see for REM. Let's see if we can find it. REM is relative to the font size of the root element, so the default font size., I think it's 16. Yeah.

So by taking 16 and time multiplying it by .625. We'll see that it is equal to 10. Okay so if the font size is 2REM basically it's 1 REM is going to be 10 pixels if we multiplied by point .65. 1 REM is going to be 16 pixels.

So yeah, by multiplying the root font size by 62.5%, is going to make it 10, which is then going to make our font size, are REM's equal to 10 pixels each. Okay so if you didn't understand that don't worry about it. Just kind of follow along. You'll come to terms. You will understand how it's working.

So next you want to do is say this is just for our application as a whole. Let's say

base.scss

html {
    font-size: 62.5%;

    *,
    *::after,
    *::before {
        margin: 0;
        padding: 0;
        box-sizing: inherit;
    }
}

Let's get back to our header. We can just change just to 3rem so it's 30px, and 2rem. Now the reason this is kind of cool is cuz, if we want we can quickly change this globally, I'll show you once we have more stuff in our application. It's really cool. Let's also say:

header-wrapper.scss

.header-wrapper {

    display: grid;
    grid-template-columns: [s] 1fr [e];
    grid-template-rows: [title-s] 3rem [title-e sub-s] 2rem [sub-e];

    &__title {
        grid-row: title-s/title-e;
        grid-column: s/e;
    }
    &__subtitle {
        grid-row: sub-s/sub-e;
        grid-column: s/e;
    }
}

That should give us a pretty good base grid for our header. Let's go ahead and inspect the element and look at it. Okay, you'll see that we have a grid in there. Now you can't really see it as well as if you're using firefox for the grid tools but it's not too complicated. We have a grid.

Now let's apply some specific styles into this header, and what I'm going to do throughout this application is basically build out the grid in one in its own kind of set of selectors and then I'm going to build out the styles in another set just so we can kind of separate it. Let's get rid of the grid in here and apply styling in here. So what we want to do is first say:

header-wrapper.scss

.header-wrapper {

    display: grid;
    grid-template-columns: [s] 1fr [e];
    grid-template-rows: [title-s] 3rem [title-e sub-s] 2rem [sub-e];

    &__title {
        grid-row: title-s/title-e;
        grid-column: s/e;
    }
    &__subtitle {
        grid-row: sub-s/sub-e;
        grid-column: s/e;
    }
}

.header-wrapper {

    padding-top: 4rem;

    &__title {
        font-size: 2.4rem;
        font-weight: 500;
        line-height: 3rem;
    }
    &__subtitle {
        color: $color-red-BA;
        font-size: 1.6rem;
        font-weight: 300;
        line-height: 2rem;
    }
}

Let's go check it out in the browser you'll see that it looks very very similar to our design if not the same, but back to the red. Like I said earlier it looks way different for some reason in the browser you'll see we have it here and the application as BA0000 which we obviously put in our variables.; although, in our application, it looks significantly darker.

So what I want to do is go into the variables folder or file and let's just hover over this using the VScode and you'll see BA0000 is equal to rgb(186,0,0). Let's just drag this was a little lighter. So like 215 is good. So rgb(215,0,0). Save that, and go your browser and you'll see it's a bit lighter now and it looks more similar to our design.

Alright, so what we want to do is basically finish off this video since we got the styles in, and we want to develop our main grid. I just wanted to quickly kind of set up our applications application CSS here. We did a lot in this video and build our header grid since we built the header in the last video just to kind of get out of the way.

In the next video we are going to be creating our overall grid, so we can get this more to the left here and so we can include more components. OK let's go to our code and let's say git status, and let's open this terminal up a bit bigger, git add ., git commit -m "set up styles and header grid". Then git push origin master, and I'll see you in the next video where we will get started on our overall grid.

Resources

• Source Code
• Google Fonts