Adding Base Styles

[00:00 - 00:18] Before we write our navigation component, let's create another file called base .sas inside our sas directly. So here, let's create a new file base.sas.

[00:19 - 00:25] In sas, it's a convention to start a file name with an underscore. This file will have all our fixed variables.

[00:26 - 00:36] We will put our responsive breakpoints here, the colors you want to use, fonts, etc. We need the breakpoints where we are designing the components by ourselves.

[00:37 - 00:48] Otherwise, an design can take care of its elements. We can read the app.css file since we are going to use sas in our project post iling.

[00:49 - 01:00] Now inside dps.sas file. Let's write html and set the boxizing to be border box.

[01:01 - 01:17] If we set boxizing to be border box on an element, the padding and border are included in the width and the height of this element, which is exactly what we want. Now I want to use the font latter.

[01:18 - 01:33] So let's create a new variable, let's call it font primary and give it a name latter. To be able to load latter, we need to paste the link of the font in the index.

[01:34 - 01:54] html file. You can copy the link in the script from below the lesson, open the index.html file and below this meta tag paste the link which is mentioned below the video. Going back to base.css file, we need to write styles for our body.

[01:55 - 02:09] Let's mention body and font family to be font primary. Advantage of using a variable is we can use it anywhere.

[02:10 - 02:26] We can also write our breakpoints here, just copy them from the code below and paste them here. Since we are going to write some components by ourselves, we need to write some media queries for which we need these breakpoints.

[02:27 - 02:44] If you are not familiar with them yet, don't worry, I'll explain everything. As you can see, dp largest which is 75 em which is equal to 1200 pixels as 1 em is equal to 16 pixels.

[02:45 - 02:54] You must have heard about rem and em. rem is relative to the html but em is always constant.

[02:55 - 03:16] If we write font size 50% in the html tag, 1 rem will become 8 pixels since it 's relative to the html. Likewise I have thought of all these units to make our application responsive.

[03:17 - 03:30] The smallest breakpoint is bp small which is 600 pixels or 37.5 em where all the mobile phones lie. You can name them anything you want but this sounds simple to me.

[03:31 - 03:38] We can take this off. Now let's also add some color variables which will be used frequently.

[03:39 - 03:49] You can again just copy them from the code and paste them here. These are the colors which we are going to use more or less all the time.

[03:50 - 04:00] So let's keep it handy. Inside the main.scss file we need to import the file to make it available globally.

[04:01 - 04:18] We need to use the @ file name which is base. It is available everywhere.

[04:19 - 04:21] Let's finally start writing our component in the next lecture.