We have nothing, so what we want to do is build out a header and a navbar component. Before we do that, we need to define a grid put those on. Let's go ahead and do our layout component. Let's go to layout.js give this a className of layout.

The next thing I want to do is save that and go to bootstrap.js. Let's get rid of this import of import 'bootstrap/dist/css/bootstrap.css'. That's just bootstrap styling, it has nothing to do with the name of this file. We are bootstrapping our application.

Let's go ahead and go into our style folder. Let's create a new file and call it layout.scss. Let's go into main.scss and import layout.scss.

main.scss

@import 'layout';

Now, let's go back to our layout.scss and write some code. Let's say:

layout.scss

.layout {
    display: grid;

    grid-template-rows: 
}

What we want to do is mimic our design here, so let's flip over to the browser here and look at our design. I'm going to put this on half the screen and put this on the other half. I used command + b to close off the sidebar here.

That way we can kind of look at our design and get these rows in. One thing I want to point out is that you'll see both are headers of here. Then we have content in here, and it's pretty much the same throughout our entire application. Every single page has that.

I think every single page has those two components. They all have these top two things. They have these links and this header. We have our nav and our header with more navigation options in our header. With the exception of this, which we'll get to later on.

What we need to do is have our header, then we need our navigation, and then we have our content. So we have three rows here. We got the header, and I'm coding this now, so code along. We have:

layout.scss

.layout {
    display: grid;

    grid-template-rows: [header-s] [header-e nav-s] [nav-e content-s] [content-e];
}

That's going to be our main content, for whatever page we are on. Let's just check the design here. I'll check it and I'm going to see how big these are. It looks like these are each 50px high. Let's go to our code, and let's expand it a bit. Let's say:

layout.scss

.layout {
    display: grid;

    grid-template-rows: [header-s] 50px [header-e nav-s] 50px [nav-e content-s] 1fr [content-e];
}

If we do this all now, put the header and the nav in, this content is going to look really small. I'm just saying that now so that when we get to it in a couple minutes you'll know what's going on. We want 1 row. Let's say:

layout.scss

.layout {
    display: grid;

    grid-template-rows: [header-s] 50px [header-e nav-s] 50px [nav-e content-s] 1fr [content-e];
    grid-template-columns: [s] 1fr [e]
}

You don't have to tag these if you don't want to. I like to use s and e for start and end, instead of 1 and -1. Now, we want to put our header in our nav here. Right now, all we're going to have is 100px and then 1fr. This doesn't have a height, so it's probably only going to be about 100px of visible space.

Let's go to Chrome, let's go into our app, and let's inspect the element. Let's open up our body in our app-wrapper and our layout.

You'll see that our layout has two rows and the third one is nowhere to be found. That's just because we're saying this third one is 1 fractional unit. It's going to take up the remaining space. There is no remaining space, so it's just not going to be there.

If we say something like height: 100vh and width 100vw it's going to have space. You'll see that they're all there now. Now, we don't have to do this. Feel free to do it if you want. We don't have to do this with the view-height.

I'm going to get rid of it for now and keep the code minimal. It might be a good idea to have it in there later on, but it doesn't matter for the most part. That should be good. Let's go ahead and actually develop our components now, then throw them in there, and then move on.

Let's go into components and let's make a new folder and let's just say headernav. In the headernav folder, let's create header.js, and let's create navbar.js. What we want to do is give it a default React component.

In header.js, let's say import React, { Component } from 'react'. Then let's define the component, so let's say:

header.js

import React, { Component } from 'react';

class Header extends Component {
    render() {
        return(
            <div>

            </div>
        )
    }
}

export default Header;

I went a little fast, but that's just because this is a really basic component as of right now. Just fill this out and give it a className of 'header'. Obviously, we're going to be doing this in the navbar as well, so copy all this and throw it into the navbar.js and rename these to navbar instead of header.

navbar.js

import React, { Component } from 'react';

class Navbar extends Component {
    render() {
        return(
            <div className='navbar'>

            </div>
        )
    }
}

export default Navbar;

Now we have some components. Let's go ahead and go into our layout.js, import them, and use them. I'm going to type in:

layout.js

import React, { Component } from 'react';

import Header from './headernavbar/header';
import Navbar from './headernavbar/navbar';

Rename this folder to headernavbar. This is pretty self-explanatory, pretty straightforward, I went a little fast, but just look at my file structure here and get these imports in, and then we can use them. Now, let's throw it right here, let's say:

layout.js

class Layout extends Component {
    render() {
        return(
            <div className='layout'>
            {this.props.children}
            <Header/>
            <Navbar/>
            </div>
        )
    }
}

Now, let's go check if this is working. We are not going to see anything, well, we'll see the divs, but we're not going to see any color or anything. I just want to make sure there are no errors. It looks like it's all there, and it looks good to me.

Let's just throw in some quick styles and an image into our header. You'll see that our header has an image, and then this has this black background of #333333. It also has a box-shadow. What I want to do is I want to go into our code and let's go into layout.scs.

Now, what we want to do is create a new file and call it headernavbar.scss. In here, we will define those styles. Let's say .header and .navbar, and add in that box-shadow:

headernavbar.scss

.header {

}

.navbar {
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
}

I just copied the box-shadow over from that design. Pretty self-explanatory. Background-color is going to be $33. Then what we're going to do is make this a variable. Actually, let's just do #333333 for now. This can also be just #333, since they're all threes.

headernavbar.scss

.header {

}

.navbar {
    background-color: #333;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
}

This is most likely the approach we will take throughout the courses. We will just type in the colors like that because I've showed you how to use variables. Feel free to use variables if you want. Now, the header doesn't really need anything because it just has that image.

It will need styles later on, so I'm just going to comment this out. Let's make sure that we are importing this into our main.scss. So let's say:

main.scss

@import 'layout';
@import 'headernavbar';

That should work. Let's go to Chrome, let's go to our application, and you'll see that we have this now. So that looks good.

Let's throw in our image now with a placeholder image. Let's go to header.js and in the header let's just say:

header.js

import React, { Component } from 'react';

class Header extends Component {
    render() {
        return(
            <div>
                <img src='http://via.placeholder.com/50x50'/>
            </div>
        )
    }
}

export default Header;

We know it's 50px high, so let's 50x50. We're going to actually have to put in some styles now that we have this in here. Let's go see why. I'm going to go into Chrome and you'll see it's all the way to the left here. In our design, it's clearly centered.

What we need to do is we need to use some flex-box to fix it or some CSS grid. Let's go into headernavbar.scss, uncomment this, and let's say:

headernavbar.scss

.header {
    display: grid;
    justify-content: center;
}

.navbar {
    background-color: #333;
    box-shadow: 0 2px 6px 0 rgba(0,0,0,0.2);
}

Let's see. Yeah, justify-content works. I believe if we do justify-items it will center it. If it doesn't we might have to give it a width. I'm going to try to justify-items, and it works the same. Either way. I'm going to do justify-content and center. That's how we can get that centered.

Now, you'll notice that we have some space around our navbar. We don't really want that space because it looks really bad. It doesn't look like our design. That's just the default space that's around the document by default.

We can override that by going into main.scss or any CSS file, but we're going to do it in main.scss. Put these imports down here, and the very first thing we want to do is say on every element, every element after, and every element before, let's eliminate the margin, the padding, and let's say:

main.scss

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

@import 'layout';
@import 'headernavbar';

That way everything is going to by default have no padding or margin, and it's all going to be standard. That way it gets rid of that, we don't have that random space, and it looks like our design. It's pretty obvious that this is the end because this is here too.

If you close it you'll see that it's like that in the design. There's no whitespace there. We want to get rid of that, which we just did. That looks really good. It looks very much like our design. It looks pretty good.

Let's see what else we have to do. Let's define a default font-size, just in case we use REM units like we did before in the last video. So let's say:

main.scss

html {
    font-size: 62.5%;
}
*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

Now, if you don't remember why it's 62.5%. Let me explain it to you. When we use a REM unit, when we say something like we want this h1 down here to have a font-size of 16px right. If we get rid of this right here, this is the same thing right here. 16px is the same 1rem. 1rem is going to be the default font-size.

The default font-size of a web application is 16px. By saying font-size: 62.5%, that's like saying take 16 and times it by .625. You'll see now that it's 10. That way our default font-size is going to be 10px. Our default font-size is 16px times by 62.5 is going to be 10.

That's why our 1rem can be 1rem or 10px. This 1rem will be equivalent to 10px, not 16px. The reason that's helpful is because if you want this to be 1.5rem. You know it's just 15px, but if you have 16 then you're like "oh shoot". That's like 16 + 8. That's 24px.

So it's kind of hard to calculate and time consuming when you can just set this and know that it's 15px. So, that's why we do that. It's why I do that at least, and other developers that I know. That's how that works.

Let's go ahead and continue on building our application in the next video. We did a lot in this video, a lot of busy work. Let's go ahead and commit our code:

Terminal

git status
git add .
git commit -m "built out layout grid and header navbar components"

I'll see you in the next video.

Resources

• Source Code