You'll see that we have this title and we have these quick links. What we want to do is at least add-in that title, style everything, and then add in those quick links. Something like that. Let's go ahead and do that now.

Let's go in here and let's close out of this terminal window right here. I don't want to put the title in the form, I want to put the title in signin.js. What we want to do is create a component for this.

I'm going to go to the components folder, and create a new file that's called pageTitle.js. Then we'll import React. Let's import React and let's type out our boilerplate here. Let's say:

pageTitle.js

import React, { Component } from 'react';

class PageTitle extends Component {
    render() {
        return (
            <div className={}></div>
        )
    }
}

We want to be able to pass on a className because we're going to be using this on multiple pages. We want to be able to use it on that grid. We don't want to apply it on different grids. You want to apply it on the grid in the component we use it. We need to pass in a custom className. So we'll say:

pageTitle.js

class PageTitle extends Component {
    render() {
        return (
            <div className={`${className} page-title`}></div>
        )
    }
}

You can think of this className as the class that we will apply it on the grid. We will say grid-row and column go in this className. Then the other styles, like the color and size, go in this because we're going to want that to be universal. Then in between the div, we will just put {title}.

pageTitle.js

class PageTitle extends Component {
    render() {
        return (
            <div className={`${className} page-title`}>{title}</div>
        )
    }
}

Then what we want to do is we want to see a const right here and pull those out. That way we're extracting them out of this.props. Then we have to export the PageTitle. So let's say:

pageTitle.js

import React, { Component } from 'react';

class PageTitle extends Component {
    render() {
        const { className, title } = this.props;
        return (
            <div className={`${className} page-title`}>{title}</div>
        )
    }
}

export default PageTitle;

Now, you could probably write this really simply as a functional component. So you could comment this out, and then you wouldn't need Component. You would just need React. Then you could write it as a functional component.

Now, I'm not going to do that just to save some time. If you'd like to do that, I recommend you do it just to practice functional components, but you don't have to. So that's our component. Let's go ahead and create a CSS file for it now. In our style folder, lets say page-title.scss, and then we'll say:

page-title.scss

.page-title {

}

I'm going to go over to the design and grab those styles, and then we'll type them in. You shouldn't have access to the design here, and I'm not going to say that again. Just know now that when I reference this design, you're not going to have access to this. You're just going to have to follow along as I type these in.

I'm going to hit copy here and get this code from the design. Now, one thing to note is that if you're using Invision for your future projects and it generates these styles, a lot of these are unnecessary and will screw up things in your CSS. You don't want to just blindly copy all this over.

You want to kind of read over it and extract what you want. So I'm going to paste that in here. I'm going to get rid of this .login that pasted with it, and these are our styles. Now, the first thing I noticed is that this Titillium font is not surrounded in parentheses. That will generate an error.

page-title.scss

.page-title {

    height: 31px;
    width: 70px;
    color: #666666;
    font-family: Titillium;
    font-size: 30px;
    font-weight: 600;
    line-height: 37px;
}

So I'm going to import this file and into main.scss. I haven't changed anything in that code that I copied over yet, and let's see what happens. I'll say:

main.scss

@import 'layout';
@import 'headernavbar';
@import 'auth/signin';
@import 'auth/signup';

@import 'page-title';

I'm going to go back to Chrome and go back in here. Now, let's see. We should get an error. I guess you wouldn't get an error. I thought I got an error before when using this font in a different application.

What we want to do is put apostrophes around it, and then next thing we want to do is get rid of the with the width, height, and the line-height. Now, the line-height might affect it a tiny bit, but it is for the most part unnecessary in all these cases.

page-title.scss

.page-title {
    color: #666666;
    font-family: 'Titillium';
    font-size: 30px;
    font-weight: 600;
}

Now, these are all pretty necessary: color, font-family, font-size, and font-weight. Make sure that you get these four attributes in. One thing I want to note with colors is that if it's all the same color, like it's all the same number or letters, you can just write it three times and then it will work the same.

page-title.scss

.page-title {
    color: #666;
    font-family: 'Titillium';
    font-size: 30px;
    font-weight: 600;
}

Let's go use this. Maybe it didn't give us an error because we weren't actually using these styles. We'll come back and check it, but let's actually use it by going into signin.js and importing it. So let's say:

signin.js

import SignInForm from './signinForm';
import PageTitle from '../pageTitle';

We can use this now. We can put it in here and say:

signin.js

render() {
    return (
        <div className='sign-in'>
            <PageTitle className='sign-in__page-title' title='Login' />
            <SignInForm onSubmit={this.onSubmit} className='sign-in__form' />
        </div>

Let's go back to our application. Make sure you get that import and that component instance in there. You'll see being out the title and it looks pretty good, although, you'll notice that it has the wrong font.

Let's go back to our CSS and look at the font. You'll see it's Titillium. Now, let's test it without these and see if it breaks out of curiosity. Maybe it won't. Maybe it will. It didn't. Either way, we have to rename this to 'Titillium Web'.

Another thing we have to do is include this font because right now in our index.html file, in the static folder, we are only importing Monserrat. What we want to do is go grab some new fonts. Now, we're going to be using a lot of fonts throughout this application, so let's grab a lot of them or as many as we can right now.

I'm going to look at the design and just get a headcount for all the fonts we want. So we want Titillium. I know that in GoogleFonts it's called Titillium Web. Now, I going to click on a few things. We want Open Sans. I'm pretty sure that we want Open Sans Condensed at some point.

We'll just grab those, so let's head over to GoogleFonts and you'll see that Open Sans is right here. If it's not there, just search Open Sans. We want that one, and we want Titillium Web. Let's go ahead and add that in.

Then we want the Open Sans Condensed case. Add that in. I have three selected. One thing you want to make sure you do is you want to import the font links as well. Now, depending on our application and the styles, we are likely to come back here and change a few things.

We're probably going to need more font-weights and maybe even a couple different fonts. Let's go back to our CSS code before we copy this over, and I want to show you what I'm talking about. You'll see that page-title.scss, we have a font-weight of 600.

Let's go back to Chrome and we have all our fonts here, but you'll also notice that there's a 300 and that's a font. On Titillium Web we don't have any, so let's hit customize. Let's go to Titillium Web. Let's scroll down, and you'll see only regular 400 is selected.

Let's just grab a couple of these. I think it's pretty safe to say that we're going to use a lot of these the same, so we're going to want like Semi-Bold on Open Sans and maybe bold 700. This is going to make it a slow load time.

There are other ways to improve this, like embedding them directly in. Basically, including them in your project without embedding them, so having the file actually in your source code. What we're doing is calling it from the web. Let's select Bold on Condensed. You'll see it says load time slow.

It doesn't really matter in this devcase. Maybe I'll make a video on how to optimize load times, but that's not the focus in this application here. My focus here is learning React and how to build an e-commerce site.

On Titillium Web, let's select semi-bold. We know that we need that, and let's select bold. This is probably going to be pretty slow, but it does matter. Let's go to embed now, and let's copy this right here. If for some reason you weren't able to get this, just copy this link down into there.

Now, let's go into index.html and let's replace this link with this link. I just got rid of the other font and put it here.

index.html

 <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,600,700|Titillium+Web:400,600,700" rel="stylesheet">

Now, just because we are in here let's get rid of this title and call it GummyCode. That's the name of the application. I just wanted to handle that while we're here. So I added these two lines.

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,600,700|Titillium+Web:400,600,700" rel="stylesheet">
  <title>GummyCode</title>
</head>

Now, I'm out of there. Now let's go back to Chrome and see if our font is working now. You'll see that this now looks like our design. That's much better.

That should be about it for this video. We covered fonts a bit and talked about styles. Let's go ahead and commit our code. Let's say:

Terminal

git status
git add .
git commit -m "created a page title component and styled it and imported a few fonts"

I'll see you in the next video, where we will continue building out these styles for our form.

Resources

• Source Code
• GoogleFonts