In this set of guides, we are going to add in the styles to make it look like what we see here.

So to get started head over to your main.SCSS file and we need to declare some global styles. We want to have a

* {
         margin: 0; 
         padding: 0; 
         box-sizing:  border-box;
  }

And the main thing I'm going to be covering in this video is variable's and I'm not talking about SASS variables. We went over SASS variable's in the last set of guides in the last app. So in this app, we're going to be going over root variables in CSS. You don't even need SASS to use these kinds of variables but I'll show you how to use them. So for our body, we're going to want a font family of this value right here and make sure that this is capitalized.

  body {
    font-family: 'Montserrat', sans-serif;
  }

So save that and that should give us access to this font here and it will make everything look better. You'll see that everything is styled using this font since we applied it to the body tag. Now we can store this in a variable in case we want to use it somewhere else or if we want to use a different font we could put that in a variable as well. So the way we can do this in CSS is by typing a colon and then root and then we can give values in here that we can use as variables so for this one I'm going to type out the name of the font and then I'll just copy this value here and place it in here. Now we have access to this font wherever we want in our CSS.

   :root {
    --montserrat: 'Montserrat', sans-serif;
   }

So all you have to do to access it is by typing var and then the name of the variable.

   body {
    font-family: var(--montserrat);
   }

So if you hit save you'll notice that we still have access to our font and that's how you use root variables inside CSS. So I've left some colors in the guide notes below and I don't want to waste your time by typing those all out here. So just go ahead and copy all those in here and it includes a couple of fonts as well so these are the colors and I'll copy in the next two fonts.

    :root {
       --montserrat: 'Montserrat', sans-serif;
       --roboto: 'Roboto Condensed', sans-serif;
       --roboto-condensed: 'Roboto', sans-serif;

       --blue-primary: #518bde;
       --blue-secondary: #5EA0E9;
       --gray-primary: #444444;
       --gray-secondary: #A3ABB2;
       --yellow-primary: #E3B924;
       --yellow-secondary: #F7D754;
       --gray-tertiary: rgb(229, 229, 229);
     }

All right so save that and we now have our variables set up and the base of our application. Let's go ahead and toss this in an SCSS file that we can call base and then just import into our main SCSS file main.SCSS file and much like we did this in the Mab Lib-App. So create a new file name it base.scss paste that in there save it

and you'll notice our styles are gone but the way to get them back is just by importing it so @import './base'.

All right so that should show there and it looks like we have our base set up. We have SCSS set up our variables and yeah let's go ahead and get started with the header style that you see here in the next guide. But before we do that let's just commit our code. So the first thing you want to type is

git status
git add .
git commit -m "setup styles"
git push origin master

All right I will see you in the next guide.

Resources

Source Code