- Read Tutorial
- Watch Guide Video
So, let's start with the title let's go ahead and close out this redux tab and I'm going to close out all my files here and open up library.scss. Okay, now for title I'm just going to get rid of our comment and lets start typing in the title. So we're going to say, we are going to provide a variable first so lets go into variables.scss and lets put some color variables here.
Let's say $color-blue: #487BCE; and $color-gray: #4D4D4D;
variables.scss
$color-purple: #6F48CE; $color-light-blue: 32CBE8; $color-blue: #487BCE; $color-gray: #4D4D4D;
Let's close that and now that we have access to those variables we are going to be using them quite a bit. So let's say title is color: color-blue and font-family: 'Alegreya' which we don't have. Well we might have imported it already, lets check our index.html, and it looks like we don't have it. So lets go get those fonts from google fonts and lets add Lato and lets search Alegreya and we also want Montserrat and I think thats all we need for now.
So I selected Montserrat, Alegreya, and Lato
I'm going to go into customize and select bold on all three.
And now it says load time slow so there is probably a much better way of doing this like downloading them and putting them in like so.
But what we want to do is pull them from the internet sense it doesn't really matter in an application we are learning other concepts in. So I'm going to go in to index.html and I'm going to replace the fonts href with our new one.
Awesome that works.
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=Alegreya:400,700|Lato:400,700|Montserrat:400,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <title>Course Schedule</title> </head> <body> <div class="app-wrapper"></div> </body> </html>
So I'm going to put these in variables as will so I'm going to say font-family: $font-alegreya; so let's go into our variables and say font-alegreya: Alegreya then we want font-mont: Montserrat, and then we want font-lato: Lato
variable.scss
$color-purple: #6F48CE; $color-light-blue: 32CBE8; $color-blue: #487BCE; $color-gray: #4D4D4D; $font-alegreya: 'Alegreya'; $font-mont: 'Montserrat'; $font-lato: 'Lato';
And you maybe wondering why I'm putting this in when I could just say Lato instead of now needing to say font-lato and the reason why is if you go into library.scss now and type in font-family: $font-alegreya; it will auto load those for you usually. That might actually be just with css variables and not scss variables, but I'm pretty sure it works with both.
Okay, let's say font-size is 34px and font weight is going to be bold.
library.scss
.library {
grid-column: library-s/library-e;
display: grid;
grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
grid-row-gap: 22px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
}
}
That was quite a bit of time just for one little thing for just four lines of code. So that looks good although we need this border so lets go into our code and say border left is 2px solid color blue.
library.scss
.library {
grid-column: library-s/library-e;
display: grid;
grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
grid-row-gap: 22px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
border-left: 2px solid $color-blue;
}
}
Now it's going to be really close to it if you go back you'll see that so we don't want to do that we want to say padding left is like 40 pixels and that looks better you can see its barely there.
Once we add padding to the entire app you will see what I'm talking about and you'll see that the line stops too early and in our design it goes out pretty far, super simple fix all we have to do is say padding 40px and that will give us padding everywhere instead of just to the left.
If you see that its way too big now
So lets say padding is 40px on the sides and on the top we want 20px so this looks better.
library.scss
.library {
grid-column: library-s/library-e;
display: grid;
grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
grid-row-gap: 22px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
border-left: 2px solid $color-blue;
padding: 20px 40px;
}
}
Now, that does that. Let's go ahead and not do the Library course component in this video because I've already made this video so long. But let's go ahead and let's basically put padding around our whole application. You'll see in our design we kind of have padding or at least on this component so we want it to be about 95 pixels or 100 pixels and then from the left we want about I can't really tell since it's sideways but it looks like about 100 pixels each way and then we will modify it accordingly.
So let's go to our application and lets go to our main.scss and let's just say in the .home we want it to be padding 100px.
main.scss
.home {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
grid-template-rows: 1fr;
padding: 100px;
}
Okay, that indents it quite a bit except it does it to the schedule component which we don't really want but we do want the "My Schedule" down a little bit. So what we can do is take this background off the grid and just put it in here but I don't want to do that either so what will do for now we're just going to apply the padding to the schedule and we'll go from there.
main.scss
.home {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: [library-s] 1fr 1fr [library-e schedule-s] 1fr [schedule-e];
grid-template-rows: 1fr;
}
.schedule {
grid-column: schedule-s/schedule-e;
position: relative;
height: 100%;
width: 100%;
padding: 100px;
}
And that didn't work, and its because of the grid so we need to do is or not .schedule my bad
main.scss
.schedule {
grid-column: schedule-s/schedule-e;
position: relative;
height: 100%;
width: 100%;
}
we want to apply it to the library.scss so let's say padding 100px which is likely not going to work because it didn't work on schedule. Oh okay excellent thats exactly what we wanted.
library.scss
.library {
grid-column: library-s/library-e;
display: grid;
grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
grid-row-gap: 22px;
padding: 100px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
border-left: 2px solid $color-blue;
padding: 20px 40px;
}
}
We don't want it on the right though, we actually want the opposite of the right so what we'll do is we we'll say padding left and padding top is 100px.
library.scss
.library {
grid-column: library-s/library-e;
display: grid;
grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
grid-row-gap: 22px;
padding-left: 100px;
padding-top: 100px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
border-left: 2px solid $color-blue;
padding: 20px 40px;
}
}
You'll see now that it's what we want, it's looking close to our designs.
And we want our cards to overlap on to My Schedule a little bit so what we can do is go into library.scss and say padding-right: -50 pixels; and we might need to use margin and yes we do need to use margin. And cool margin-right: -50px; overlaps it.
library.scss
.library {
grid-column: library-s/library-e;
display: grid;
grid-template-rows: [title-s] 100px [title-e courses-s] repeat(auto-fit, 1fr) [courses-e];
grid-row-gap: 22px;
padding-left: 100px;
padding-top: 100px;
margin-right: -50px;
&__title {
color: $color-blue;
font-family: $font-alegreya;
font-size: 34px;
font-weight: bold;
border-left: 2px solid $color-blue;
padding: 20px 40px;
}
}
Obviously we don't want to show all of these items but we're going to style these components in the next video. So let's go ahead and commit our code so I'll say command + j to get into the terminal and then we will say.
terminal
git status git add . git commit -m "added fonts, font variables, color variable, styled library course--title, and gave course library grid an inset of 100px"