‫Hey, there.
‫Welcome back, Siobhan desired now in this picture, let us do several small changes that will help
‫us in the long run.
‫The first one is here.
‫We need to add some margin margin live for this particular button.
‫Now what I'm going to do is instead of writing this margin specifically to button, what I can do is
‫I can say, maybe I'm writing here for demo papers, but I can say I can create a utility.
‫If you remember, I can see a margin lift.
‫Two and had I can add something like margin to pixel to ram something like this, and I can say it will
‫be margin left.
‫Since I'm using mail and hand, I can say to them, for example, now whenever I need to add this margin
‫left anywhere, I can directly import this class.
‫So for example, if I get to my next stop menu and if I need to add this margin there, I can do that.
‫Save this one.
‫Get back here.
‫Care.
‫You can see it's working fine.
‫So now we have this margin live out.
‫These type of content works well, and we are creating a big project like Spotify, like any type of
‫clone or any big project.
‫What we can do is we can define our own utilities.
‫This can be related to buttons.
‫This can be related to phone sizes or maybe spacing anything.
‫If you remember about bootstrap, you already know about these small changes.
‫So I hope you got the basic idea.
‫Now what I'm going to do is I'm going to distribute everything in two files.
‫At this point of time, we are using these common colors.
‫So instead of repeating them again and again, what I can do is I can create a theme and then give these
‫colors name.
‫So if I need to utilize maybe this dark blue or light blue, I can directly call the name instead of
‫remembering this code.
‫So here what I'm going to do is I'm going to create a new file inside my see case this folder and I'm
‫going to utilize underscored and I'm going to call this as global dot csv.
‫Now does underscore means I'm using this file as partial.
‫I will write all this excess and then audit at the top.
‫So basically what I'm going to do is I'm going to take this global code.
‫Harder to save this one.
‫And I did top I'm going to an audit, so I'm going to board.
‫This should be slash and score global success.
‫Now this global CIUSSS code is accessible and asks, That's fine if I get back here.
‫Go on to be its source.
‫Open this dialogue CIUSSS.
‫You can see this code is available here.
‫The other thing you can do is just right click and click on Inspect.
‫And if you go on to network.
‫You know, when I took on, if I refresh this, so it's lowering all the content, and if I click on
‫CIUSSS, you can see the global citizens loading in behind the scene.
‫So don't worry about it.
‫Now this is one method that you can follow if you want to distribute the code into multiple files.
‫So that's the first part, which is our global CIUSSS.
‫Now we can divide content according to maybe utility as well.
‫So I can say extras and then keep all these buttons, all these margins separately.
‫So and I can create a new file and go over it underscore.
‫Utility darts, yes.
‫Now what I can do is I can take this margin.
‫I can also remove this container.
‫And then I'm going to remove all this button content because this is going to be common.
‫That's it for now.
‫So I saved this one.
‫I just need to import it here.
‫Let me say this also.
‫And all I could do is use a board and hand again, I can go with utility, not KSDK.
‫That means now I have all the global content inside this global.
‫I have only common content that I am going to utilize.
‫Maybe button, maybe margin, maybe foreign anything is that I am creating a short code, cheat code,
‫whatever you want to see inside my utility talks and then everything that is related to my thesis will
‫be here, OK?
‫I hope you like the idea.
‫Just a small change.
‫Nothing much.
‫There are various ways to import them.
‫We will discuss about them later.
‫You can also remove the import of forms from here.
‫And keep them inside global itself.
‫It looks great to me.
‫The next thing I'm going to do is I'm going to add our effect now since my button is inside my utility.
‫I can create this sound effect now since remember, this button is general for our whole page.
‫I can utilize this button many times.
‫That is why I'm keeping this button inside your ability.
‫If this was just a one time thing, I can create that character.
‫So remember this point?
‫Now, the next thing I'm going to follow is how what effect do my elements?
‫That is my dogs if I get back here.
‫So we have these allow me copy.
‫I just need to add some hour of fact, I need to change only Calypso.
‫Stan, let me go with something little blue if I get back here.
‫You can see it's working fine.
‫OK, this should be blue, it says.
‫That means the page which is active should be blue.
‫And then we are going to hovering and changing the color.
‫So what I'm going to do is I'm going to create a utility and I'm going to call this has active.
‫Color.
‫They're sure to walk away.
‫So if I'm adding active to any ally class, it will turn to blue.
‫So if I go active to any class, it will be blue itself.
‫And if I refresh, this is not working, this is not blue by default, like this one?
‫Why?
‫Well, if you remember the sequence, this utilities at the top.
‫After dark, we are changing the light.
‫After that, we are changing this color.
‫So what I have to do is I have to add important care.
‫That means, anyhow, change this color, and this will not.
‫All right.
‫Get back here.
‫Now this is working fine.
‫I hope you got the idea.
‫OK, now I just need to add some gap here.
‫Should be easy.
‫But remember, we still need to create variables.
‫If I jump here, let me check out our section.
‫Let me squeeze this.
‫This is not a mid section.
‫Squeeze this now.
‫This is this section, and I need to add some padding at the top and bottom.
‫So Intro XT.
‫And what I can do is I can add some space on the top.
‫I can go with padding and let ticked off as to them on horizontal.
‫I don't need anything.
‫And what I miss?
‫Get back here.
‫Looks good.
‫Yeah, you can change the button again.
‫I hope you got the idea, but this is working great now.
‫We have everything what is required.
‫The only thing remaining is the variable, remember.
‫So what I'm going to do is I'm going to create variables inside my hello.
‫But what I'm going to do is I'm going to create root.
‫And here we are, going to create multiple variables.
‫The first one is to index.
‫So if you remember, we are utilizing two or three type of color, which is this is light grey or something,
‫and this is dark.
‫So we are basically utilizing these two or three type of color.
‫This is also dark grey.
‫And then there is blue.
‫There will be light blue something.
‫What?
‫I'm going to do this first.
‫I'm going to create a team.
‫So this is going to be the next color.
‫And here, let me add the value.
‫So I observed this is something dark grey, and we are following this next color itself.
‫What you can visualize is that you scroll here.
‫This main line.
‫This is new text color.
‫Then there is currently.
‫So here I'm going to go get him fixed the.
‫You can give any name that you wanted, I'm utilizing the light one, which is the navigation one,
‫so be jumping on this later.
‫This is the color.
‫This one is so this is dark something.
‫Next, caller, this is done.
‫Then we have something like a good description.
‫We can say.
‫Team XT long now whenever we have some long text, we are going to utilize this color, which is definitely
‫the dullest color, I should say that description colors, so it is clear and called on to the description.
‫This is the color which we are going to utilize whenever we have wrong text.
‫Looks good to me now that's done, then we are going to have this team color, which is going to be
‫on blue and then that is how about blue?
‫We are walking with two colors with button.
‫If you observe this and this.
‫What I'm going to call this as team color because our team is defined with this blue.
‫I'm going to call this team and how we are going to go with color.
‫You can copy this from here.
‫The next one is Kim Kalorama, because we are going to utilize how it affects.
‫Let me copy this here.
‫There will be one more color that we will utilize later if you scroll down.
‫This is the background color that we might require multiple times.
‫So what I'm going to do is I'm going to add a character and I'm going to call this team section.
‫This way, we can utilize this whenever we want.
‫That's done.
‫Now, the only thing that is remaining is that you placed these colors with this very well, so I suppose
‫if I have this one, I can replace all of them.
‫Well, no, I don't need to utilize this.
‫All I can do is I can use the wire function and then just provide the name.
‫So this is color.
‫Similarly, I don't need this.
‫What I can utilize is water function and then my team color, which is our.
‫Looks good to me now why this is important, because if by any chance in the future, we need to change
‫our team.
‫I just need to change these colors.
‫Risked everything will be replaced.
‫Remember this point and this is important.
‫These five six colors define the whole team.
‫This will be changed.
‫This will be change.
‫This will be changed.
‫So let me quickly do that and then give you our demo.
‫So first, let me change everyone.
‫This is also going to be skin color.
‫Looks good done with this page.
‫That's why it is OK, we can create quite as well.
‫But now let me scrawl it here with my stylus.
‫Yes.
‫And I can simply call Control Edge, which is going to be replacing one, use the hash, then I'm going
‫to go that far.
‫And provide this team color.
‫The place a place has done, save it back here, they place nothing need to be replaced.
‫It looks good to me.
‫Get back here.
‫Now I had I need to replace the fast one everywhere.
‫Remember, don't utilize control hash and.
‫Otherwise it will replace this on top.
‫So there are chances that several stalling will try to replace the scanner with this war.
‫But if I do that, it will replace this also.
‫So remember, don't do that.
‫OK, let me try to do a lot here.
‫And they placed a single only.
‫See, then, I need to know what the second one, which is done.
‫Great.
‫This is done.
‫Then I need to do with the third one.
‫Hey, I'm just replacing the color with the cold.
‫Let me search the this.
‫If I can.
‫Get back here, Sarge.
‫You place him place grade and there is team.
‫How are?
‫Get back here, take place.
‫Nothing is ever going to get back, how even.
‫Nothing is ever labor created than there is section that they haven't utilized.
‫Looks good?
‫Save this one.
‫Save this one and see if we are using any type of product you can use hash.
‫So we have this hash color, which is for background.
‫I think we are only utilizing this for one.
‫So let's keep it here on.
‫Nothing looks good to me.
‫Everything looks fine.
‫Even in utility.
‫We are not utilizing any type of color, except despite great.
‫Now, our entire team is dependent on these five colors, five six.
‫I suppose if I want to change the team color, maybe I want to go with maybe something a little too
‫purple.
‫Let's go with this wild hopeful.
‫And this should be something like.
‫For example, let's dig for this color.
‫And if I get back, you can see now our entire team has changed.
‫Now this was a bizarre example how you can utilize this team.
‫You can see the Howard exchange, the baton exchange.
‫OK, I hope you got the idea.
‫We can also utilize the background color here.
‫So suppose if I take this team color itself and go on to my highlight.
‫And you realize this, you cannot save this one.
‫See, this looks good.
‫I can change the opacity to 0.1, maybe.
‫Zero point two.
‫See, this looks great.
‫We changed the entire theme of our website with just two colors.
‫Let me go back now.
‫And we are back to our previous design, so that's how these variables are important, because now we
‫can control our entire website with these variable itself.
‫Maybe we need to change the tags.
‫Maybe anything else I background every single thing can be controlled there.
‫I hope you got the idea what we just did.
‫So that's all.
‫That's all the basic thing that we really wanted to do.
‫Everything is done with this whole section.
‫Yeah, I know.
‫Now you can see the button size and everything else.
‫But now let's move towards the next section and continue our journey.
‫Thank you for watching, and I see you guys in the next one.