All language subtitles for 5. Init styles

Hi there, welcome back here in the previous lecture, we have initialized our first template in this

lecture will provide similar stylings to our page, so it looks nicer.

OK, let's open here a new top and again, we'll go to the one link I have included included in the

research the resources of this lecture.

So please stop the video.

And in there is a says you can find a link to this.

OK, so in its styles, you should see here and there should be the statics video to provide.

And I will guide you step by step what you need to do and I will provide your also explanations.

OK, so first thing, what you need to do is to create a new folder.

You can see it here in the assets.

So we have a Styles folder and then we need to create variables.

CSC s to define some variables.

I will be using throughout the lectures.

OK, I will just copy it and I will provide explanations out there.

Let's copy the disk file here and was copying the entire content of this X's file.

OK Elago, two coding editor.

I will open our folders and it will go into the assets folder.

I would create a new folder, new folder called Styles, and then it will create a variables new file

variables s c ss.

Make sure you make any mistakes here.

All right, and blessed here.

Perfect.

OK, so that's that's the first thing.

OK, so Variables X is amazing.

Then he'll install the bulama package here, dependencies apparmor.

Currently, what I'm using in the chorus is zero point nine point three, so I look up at his virgin

only.

Let's go to terminals.

Opened a new tap here.

Here, and let's install this npm install Bulmer editor sign to specify the vision and this version

zero point nine point three.

Let's press enter.

This will install Bullough.

OK, perfect.

Let me see this upset here.

After the bull market is display is installed, we need to import these starlings into our main file,

two are up to the vote.

They need to import variables that have defined bull must us and assets styles, SCA says.

OK, that's a valid thing.

They are still missing a main, but SCA says.

OK, that will be the huge file.

Let me go a little bit, pick up here and here shall be file called this assets styles may not as easy

as this.

It's very about a large file.

So to click here, right and the view file.

All right, so.

Again, you can click here on the right side there, over here.

OK.

And you can copy everything, please copy everything, control a control.

See, make everything.

Make sure everything is selected to go to your code and editor.

And he had an excellent styles next to the variables.

Click Create your new file called to Main.

The SCA says it will define the main standings for our application and paste it here.

It's a huge file.

OK, now that all of these, we need to go to the apple you.

Let's go down here.

Because everybody by the very comments here, leave here, empty export default, and Sears says they

need to import these things.

First, we need to import variables, then we need to import both Wal-Mart and then main main, Sears

says I'll actually copy it from here.

So losing time, it will go to the back here.

OK, and here are these imports, so just copy it.

OK, and that's the last time we are copying something for a very long time, guys.

OK.

So first, I'm coping here, Variables X says that they have to be first because, for example, if

I will decide to get hair, some use they're so variable.

Let's say I would like to have a font color of my primary color.

So what are your font?

Uh, from I just have fun as a caller actually is a caller.

OK.

If I if I want to use their variable.

Just provide here a primary like this.

OK, then the variables has to be defined first.

OK, so there's a variable is keep the value of the vehicle, so I don't have to right here this manually,

this value manually.

OK, but I can just simply access it to be the primary.

That's the purpose of the variables.

They're just holding some stylings of safety to the variables.

I can more this color of primary than we have here, Bulma says.

Let's take a look here.

Have a naval prefix of any bill prefix something with this tilde sign.

It means you're looking for a package in the node modules so so will take a look.

And in all the modules we have installed previously, Bulma does means it has to be located into the

node modules, but they will go to the mod module node modules.

Look for a bulma, OK?

All right, so Boomer here.

So we are going to boom muffled there and they're looking for the boom bust.

So here is a boomer says, and that's it.

This is starting to we are importing from boomers, all of these styles located in the subs folder here.

OK, from here, all of this styling is defined here.

And that's a lot of them.

OK.

That's a simple import of all over the boomer stylings of boomers as a framework for a stylings, for

C as its framework.

So you can either provide you out of the box with some settings and you need to spend hours to develop

your own styles for a for the components or for your page for HDMI html.

And then we have our own Starling's on top of that boulevard, which are located in the main, as Sears

says, which you can see here all the starlings they'll be using throughout the course.

And you can see how much of this is here, so that's why I don't want to spend the time to really explain

this because we would spend the early hours.

So guys now.

This is the thing we should have a booming start.

This is an import they should have here.

You should have a variable access Mate X that's located in the Styles folder if everything is correct.

You can go to your.

Localhost eight thousand eighty.

And you should see here is a nice application, and that's application, we'll be working on it.

I will finish it here after the lecture can take a look at what we have here, what you think we'll

be implementing.

And in the next lecture, I'll be talking about what will be implementing and I will show you the individual

part of this application and it'll be finally started working on something related to the Fugees.

So that's going to be it.

Thank you for what you're going to see at the next lecture.

Yes.