Library Course Component Styles

We've brought some styles for the application but we obviously need to finish it, so let's put some styles in for the Course Library.
I'm going to go into libraryCourse.scss and let's start adding styles into here.

First off, let's change the background color to white. Now what I want to do is separate the grid from the styles in this file. So we'll call .library-course a second time and we'll put all of the styles here. also let's move the background down.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 50px 1fr;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

.library-course {
  background: white;
}

Now, we don't want it automatically have a background color, instead, we want the background to show up when we hover, so we'll cut the background color and put it inside of a hover call. Let's also put in a box shadow.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 50px 1fr;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

.library-course {
  &:hover {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
  }
}

Let's check it out.

large

That actually looks pretty close to what we have in our design, so that's great. The next thing I want to do is to start adding styles for each one of these titles. First we have to check to see what we call our title in our code. Inside of `libraryCourse.js we can see that we do have the title in the code.

large

So back to libraryCourse.scss, and we'll add some styles. We'll set the color to $color-gray from our variables.scss. Then we'll change the font family, the font size, and the line height.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 50px 1fr;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

.library-course {
  &:hover {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
  }

  &__title {
    color: $color-gray;
    font-family: $font-lato;
    font-size: 18px;
    line-height: 22px;
  }
}

Now I want to change the color and style of the check a little bit. We'll change it to blue, and we'll probably have to change some of the code for that. So lets work on that. We'll add styles for the color to $color-blue. We want the check to only display if they've added the course, but we'll work on that later.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 50px 1fr;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

.library-course {
  &:hover {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
  }

  &__title {
    color: $color-gray;
    font-family: $font-lato;
    font-size: 18px;
    line-height: 22px;
  }

  &__icon {
    color: $color-blue;
  }
}

That looks good. Let's move on to the description. If we look at the code, we can see that we have the className of __description with a p tag and label inside of it. We can do some pretty fun stuff with this.

We'll call our className, and inside of it we can actually call the tags themselves. First, we'll style the label, with the color and change up the font family, size, and weight, then center the text. Here's the code:

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 50px 1fr;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

.library-course {
  &:hover {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
  }

  &__title {
    color: $color-gray;
    font-family: $font-lato;
    font-size: 18px;
    line-height: 22px;
  }

  &__icon {
    color: $color-blue;
  }

  &__description {
    label {
      color: $color-blue;
      font-family: $font-alegreya;
      font-size: 16px;
      font-weight: bold;
      text-align: center
    }
    p {

    }
  }
}

Let's switch over to our browser and check it out.

large

Now it's time to style the paragraph, let's just throw it in there really quick.

libraryCourse.scss

    p {
      color: $color-gray;
      font-family: $font-lato;
      font-size: 16px;
    }
  }
}

Now I want to address something, I had a student tell me that gray is spelled with an 'e', not an 'a'. Now you can spell it however you want, and if you Google it, it'll say that 'Grey' is British English and 'Gray' is American English, but, either way it's just personal preference.

Anyways, After we check that it looks ok, lets add the line underneath the title really fast with a border.

libraryCourse.scss

  &__title {
    color: $color-gray;
    font-family: $font-lato;
    font-size: 18px;
    line-height: 22px;
    border-bottom: 1px solid $color-gray;
  }
}

We can see, however, that the color is off, and that the line doesn't go all the way across. Let's pull the color from the design and change it from $color-gray to #f2f2f2. Now the color is great, but we need to get the line all the way across. Let's cut the border out and put it in a separate call, so we'll have one for the styling and one for grid placement.

libraryCourse.scss

.library-course {
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-template-rows: 50px 1fr;

  &__title-check {
    grid-row: 1/2;
    display: flex;
  }
  &__line {
    grid-column: 1/-1;
    grid-row: 1/2;
  }
  &__arrow {
    grid-row: 1/2;
  }
  &__action {
    grid-row: 1/2;
  }
  &__description {
    grid-row: 2/3;
  }
}

.library-course {
  &:hover {
    background: white;
    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
  }

  &__title {
    color: $color-gray;
    font-family: $font-lato;
    font-size: 18px;
    line-height: 22px;
  }

  &__line {
    border-bottom 1px solid #f2f2f2;
  }

  &__icon {
    color: $color-blue;
  }

  &__description {
    label {
      color: $color-blue;
      font-family: $font-alegreya;
      font-size: 16px;
      font-weight: bold;
      text-align: center
    }
    p {
      color: $color-gray;
      font-family: $font-lato;
      font-size: 16px;
    }
  }
}

Now we need to go to libraryCourse.js and add in a separate div for the line, and let's put it underneath the title div.

libraryCourse.js

large

Let's check the browser, and we can see that it's looking pretty good. Now we need to position the rest of our title bar inside of the columns. Now we need to open our scss back up and put the title in first column.

libraryCourse.scss

  &__title-check {
    grid-row: 1/2;
    display: flex;
    grid-column: 1/2;
  }
}

That looks good, now to fix the arrows and buttons. Then we'll make sure that the description fills the box.

libraryCourse.scss

  &__arrow {
    grid-row: 1/2;
    grid-column: 2/3;
  }
  &__action {
    grid-row: 1/2;
    grid-column: 3/4;
  }
  &__description {
    grid-row: 2/3;
    grid-column: 1/-1;
  }
}

So that looks really good, let's just add some padding in .libraryCourse..

Here's what the final file looks like:

libraryCourse.scss

.library-course {
    display: grid;
    grid-template-columns: repeat(auto-fit, 1fr);
    grid-template-rows: 50px 1fr;

    &__title-check {
        grid-row: 1/2;
        display: flex;
        grid-column: 1/2;
    }
    &__line {
        grid-column: 1/-1;
        grid-row: 1/2;
    }
    &__arrow {
        grid-row: 1/2;
        grid-column: 2/3;
    }
    &__action {
        grid-row: 1/2;
        grid-column: 3/4;
    }
    &__description {
        grid-row: 2/3;
        grid-column: 1/-1;
    }
}

.library-course {

    padding: 25px;

    &:hover {
        background: white;
        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
    }

    &__title {
        color: $color-gray;
        font-family: $font-lato;
        font-size: 18px;
        line-height: 22px;
    }

    &__line {
        border-bottom: 1px solid #F2F2F2;
    }

    &__icon {
        color: $color-blue;
    }

    &__description {
        label {
            color: $color-blue;
            font-family: $font-alegreya;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
        }
        p {
            color: $color-gray;
            font-family: $font-lato;
            font-size: 16px;
        }
    }

}

Now we've had a really great start with our styling. What I want to do in the next video is basically put in some margins where they belong, make the description a little more contained so it can crunches into more lines, and style the arrow to look a little bit better in our code.

Let's commit our changes.

git status
git add .
git commit -m "styled library course component"

I'll see you next video.

Resources

Code at this stage