1 00:00:00,420 --> 00:00:00,990 ‫Hey, there. 2 00:00:01,110 --> 00:00:07,740 ‫Welcome back, Siobhan desired now in this picture, let us do several small changes that will help 3 00:00:07,740 --> 00:00:08,790 ‫us in the long run. 4 00:00:09,660 --> 00:00:11,160 ‫The first one is here. 5 00:00:11,160 --> 00:00:14,990 ‫We need to add some margin margin live for this particular button. 6 00:00:15,720 --> 00:00:21,300 ‫Now what I'm going to do is instead of writing this margin specifically to button, what I can do is 7 00:00:21,300 --> 00:00:26,850 ‫I can say, maybe I'm writing here for demo papers, but I can say I can create a utility. 8 00:00:26,850 --> 00:00:28,890 ‫If you remember, I can see a margin lift. 9 00:00:30,150 --> 00:00:36,900 ‫Two and had I can add something like margin to pixel to ram something like this, and I can say it will 10 00:00:36,900 --> 00:00:38,100 ‫be margin left. 11 00:00:39,190 --> 00:00:47,170 ‫Since I'm using mail and hand, I can say to them, for example, now whenever I need to add this margin 12 00:00:47,170 --> 00:00:50,350 ‫left anywhere, I can directly import this class. 13 00:00:50,440 --> 00:00:57,970 ‫So for example, if I get to my next stop menu and if I need to add this margin there, I can do that. 14 00:00:58,210 --> 00:00:59,070 ‫Save this one. 15 00:00:59,110 --> 00:00:59,790 ‫Get back here. 16 00:00:59,800 --> 00:01:00,190 ‫Care. 17 00:01:01,030 --> 00:01:02,350 ‫You can see it's working fine. 18 00:01:02,710 --> 00:01:05,790 ‫So now we have this margin live out. 19 00:01:06,190 --> 00:01:12,850 ‫These type of content works well, and we are creating a big project like Spotify, like any type of 20 00:01:13,180 --> 00:01:14,830 ‫clone or any big project. 21 00:01:15,310 --> 00:01:18,460 ‫What we can do is we can define our own utilities. 22 00:01:18,910 --> 00:01:20,560 ‫This can be related to buttons. 23 00:01:20,590 --> 00:01:24,520 ‫This can be related to phone sizes or maybe spacing anything. 24 00:01:24,860 --> 00:01:29,500 ‫If you remember about bootstrap, you already know about these small changes. 25 00:01:29,770 --> 00:01:32,230 ‫So I hope you got the basic idea. 26 00:01:32,950 --> 00:01:37,000 ‫Now what I'm going to do is I'm going to distribute everything in two files. 27 00:01:37,480 --> 00:01:40,450 ‫At this point of time, we are using these common colors. 28 00:01:40,840 --> 00:01:47,230 ‫So instead of repeating them again and again, what I can do is I can create a theme and then give these 29 00:01:47,230 --> 00:01:48,250 ‫colors name. 30 00:01:48,670 --> 00:01:54,400 ‫So if I need to utilize maybe this dark blue or light blue, I can directly call the name instead of 31 00:01:54,880 --> 00:01:56,260 ‫remembering this code. 32 00:01:56,860 --> 00:02:03,130 ‫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 33 00:02:03,130 --> 00:02:07,960 ‫going to utilize underscored and I'm going to call this as global dot csv. 34 00:02:10,700 --> 00:02:14,180 ‫Now does underscore means I'm using this file as partial. 35 00:02:14,360 --> 00:02:17,780 ‫I will write all this excess and then audit at the top. 36 00:02:18,170 --> 00:02:21,770 ‫So basically what I'm going to do is I'm going to take this global code. 37 00:02:23,770 --> 00:02:25,690 ‫Harder to save this one. 38 00:02:25,990 --> 00:02:29,380 ‫And I did top I'm going to an audit, so I'm going to board. 39 00:02:30,430 --> 00:02:33,850 ‫This should be slash and score global success. 40 00:02:34,450 --> 00:02:39,760 ‫Now this global CIUSSS code is accessible and asks, That's fine if I get back here. 41 00:02:40,300 --> 00:02:41,920 ‫Go on to be its source. 42 00:02:42,370 --> 00:02:43,990 ‫Open this dialogue CIUSSS. 43 00:02:44,350 --> 00:02:46,300 ‫You can see this code is available here. 44 00:02:51,280 --> 00:02:54,670 ‫The other thing you can do is just right click and click on Inspect. 45 00:02:55,090 --> 00:02:56,830 ‫And if you go on to network. 46 00:02:58,890 --> 00:03:05,160 ‫You know, when I took on, if I refresh this, so it's lowering all the content, and if I click on 47 00:03:05,160 --> 00:03:09,840 ‫CIUSSS, you can see the global citizens loading in behind the scene. 48 00:03:10,230 --> 00:03:11,400 ‫So don't worry about it. 49 00:03:11,880 --> 00:03:16,950 ‫Now this is one method that you can follow if you want to distribute the code into multiple files. 50 00:03:17,640 --> 00:03:21,090 ‫So that's the first part, which is our global CIUSSS. 51 00:03:21,630 --> 00:03:25,080 ‫Now we can divide content according to maybe utility as well. 52 00:03:25,320 --> 00:03:32,250 ‫So I can say extras and then keep all these buttons, all these margins separately. 53 00:03:33,000 --> 00:03:37,560 ‫So and I can create a new file and go over it underscore. 54 00:03:40,070 --> 00:03:41,780 ‫Utility darts, yes. 55 00:03:43,850 --> 00:03:47,180 ‫Now what I can do is I can take this margin. 56 00:03:48,900 --> 00:03:51,480 ‫I can also remove this container. 57 00:03:55,830 --> 00:04:01,890 ‫And then I'm going to remove all this button content because this is going to be common. 58 00:04:04,400 --> 00:04:05,600 ‫That's it for now. 59 00:04:05,790 --> 00:04:06,990 ‫So I saved this one. 60 00:04:07,070 --> 00:04:08,810 ‫I just need to import it here. 61 00:04:09,590 --> 00:04:10,940 ‫Let me say this also. 62 00:04:13,450 --> 00:04:20,080 ‫And all I could do is use a board and hand again, I can go with utility, not KSDK. 63 00:04:20,740 --> 00:04:24,840 ‫That means now I have all the global content inside this global. 64 00:04:26,230 --> 00:04:29,170 ‫I have only common content that I am going to utilize. 65 00:04:29,170 --> 00:04:35,590 ‫Maybe button, maybe margin, maybe foreign anything is that I am creating a short code, cheat code, 66 00:04:35,590 --> 00:04:42,580 ‫whatever you want to see inside my utility talks and then everything that is related to my thesis will 67 00:04:42,580 --> 00:04:43,990 ‫be here, OK? 68 00:04:44,110 --> 00:04:45,280 ‫I hope you like the idea. 69 00:04:45,730 --> 00:04:46,900 ‫Just a small change. 70 00:04:46,960 --> 00:04:47,680 ‫Nothing much. 71 00:04:48,190 --> 00:04:50,350 ‫There are various ways to import them. 72 00:04:50,390 --> 00:04:51,970 ‫We will discuss about them later. 73 00:04:52,840 --> 00:04:56,350 ‫You can also remove the import of forms from here. 74 00:04:57,510 --> 00:04:59,610 ‫And keep them inside global itself. 75 00:05:01,940 --> 00:05:03,020 ‫It looks great to me. 76 00:05:03,500 --> 00:05:11,630 ‫The next thing I'm going to do is I'm going to add our effect now since my button is inside my utility. 77 00:05:11,840 --> 00:05:17,230 ‫I can create this sound effect now since remember, this button is general for our whole page. 78 00:05:17,240 --> 00:05:19,130 ‫I can utilize this button many times. 79 00:05:19,490 --> 00:05:22,310 ‫That is why I'm keeping this button inside your ability. 80 00:05:22,700 --> 00:05:27,070 ‫If this was just a one time thing, I can create that character. 81 00:05:27,560 --> 00:05:28,730 ‫So remember this point? 82 00:05:32,100 --> 00:05:36,300 ‫Now, the next thing I'm going to follow is how what effect do my elements? 83 00:05:36,450 --> 00:05:39,480 ‫That is my dogs if I get back here. 84 00:05:41,180 --> 00:05:45,620 ‫So we have these allow me copy. 85 00:05:51,990 --> 00:05:55,920 ‫I just need to add some hour of fact, I need to change only Calypso. 86 00:05:59,390 --> 00:06:03,640 ‫Stan, let me go with something little blue if I get back here. 87 00:06:04,270 --> 00:06:05,740 ‫You can see it's working fine. 88 00:06:07,320 --> 00:06:09,060 ‫OK, this should be blue, it says. 89 00:06:09,120 --> 00:06:11,670 ‫That means the page which is active should be blue. 90 00:06:12,000 --> 00:06:14,880 ‫And then we are going to hovering and changing the color. 91 00:06:15,180 --> 00:06:20,490 ‫So what I'm going to do is I'm going to create a utility and I'm going to call this has active. 92 00:06:23,200 --> 00:06:23,770 ‫Color. 93 00:06:26,000 --> 00:06:27,110 ‫They're sure to walk away. 94 00:06:29,420 --> 00:06:36,680 ‫So if I'm adding active to any ally class, it will turn to blue. 95 00:06:38,330 --> 00:06:41,720 ‫So if I go active to any class, it will be blue itself. 96 00:06:44,270 --> 00:06:49,520 ‫And if I refresh, this is not working, this is not blue by default, like this one? 97 00:06:50,390 --> 00:06:50,960 ‫Why? 98 00:06:51,560 --> 00:06:55,400 ‫Well, if you remember the sequence, this utilities at the top. 99 00:06:57,230 --> 00:06:59,690 ‫After dark, we are changing the light. 100 00:07:00,260 --> 00:07:02,540 ‫After that, we are changing this color. 101 00:07:03,140 --> 00:07:06,830 ‫So what I have to do is I have to add important care. 102 00:07:10,140 --> 00:07:15,150 ‫That means, anyhow, change this color, and this will not. 103 00:07:15,930 --> 00:07:16,530 ‫All right. 104 00:07:17,430 --> 00:07:18,210 ‫Get back here. 105 00:07:18,630 --> 00:07:19,950 ‫Now this is working fine. 106 00:07:20,430 --> 00:07:21,780 ‫I hope you got the idea. 107 00:07:23,340 --> 00:07:25,710 ‫OK, now I just need to add some gap here. 108 00:07:26,190 --> 00:07:27,060 ‫Should be easy. 109 00:07:27,810 --> 00:07:30,350 ‫But remember, we still need to create variables. 110 00:07:32,280 --> 00:07:34,890 ‫If I jump here, let me check out our section. 111 00:07:34,920 --> 00:07:36,030 ‫Let me squeeze this. 112 00:07:37,050 --> 00:07:38,400 ‫This is not a mid section. 113 00:07:38,400 --> 00:07:39,580 ‫Squeeze this now. 114 00:07:39,600 --> 00:07:43,650 ‫This is this section, and I need to add some padding at the top and bottom. 115 00:07:44,100 --> 00:07:45,990 ‫So Intro XT. 116 00:07:47,270 --> 00:07:50,330 ‫And what I can do is I can add some space on the top. 117 00:07:50,540 --> 00:07:56,360 ‫I can go with padding and let ticked off as to them on horizontal. 118 00:07:56,360 --> 00:07:57,800 ‫I don't need anything. 119 00:07:58,340 --> 00:07:59,210 ‫And what I miss? 120 00:08:00,320 --> 00:08:01,100 ‫Get back here. 121 00:08:01,700 --> 00:08:02,660 ‫Looks good. 122 00:08:03,080 --> 00:08:05,150 ‫Yeah, you can change the button again. 123 00:08:05,180 --> 00:08:08,360 ‫I hope you got the idea, but this is working great now. 124 00:08:08,360 --> 00:08:10,160 ‫We have everything what is required. 125 00:08:10,610 --> 00:08:13,700 ‫The only thing remaining is the variable, remember. 126 00:08:14,060 --> 00:08:18,610 ‫So what I'm going to do is I'm going to create variables inside my hello. 127 00:08:18,740 --> 00:08:22,250 ‫But what I'm going to do is I'm going to create root. 128 00:08:22,760 --> 00:08:25,250 ‫And here we are, going to create multiple variables. 129 00:08:25,850 --> 00:08:27,650 ‫The first one is to index. 130 00:08:29,100 --> 00:08:36,030 ‫So if you remember, we are utilizing two or three type of color, which is this is light grey or something, 131 00:08:36,300 --> 00:08:37,440 ‫and this is dark. 132 00:08:37,980 --> 00:08:41,340 ‫So we are basically utilizing these two or three type of color. 133 00:08:41,610 --> 00:08:42,900 ‫This is also dark grey. 134 00:08:43,470 --> 00:08:44,760 ‫And then there is blue. 135 00:08:44,850 --> 00:08:46,320 ‫There will be light blue something. 136 00:08:47,100 --> 00:08:47,400 ‫What? 137 00:08:47,400 --> 00:08:48,910 ‫I'm going to do this first. 138 00:08:48,930 --> 00:08:50,430 ‫I'm going to create a team. 139 00:08:52,620 --> 00:08:54,690 ‫So this is going to be the next color. 140 00:08:56,610 --> 00:08:58,650 ‫And here, let me add the value. 141 00:09:02,020 --> 00:09:07,660 ‫So I observed this is something dark grey, and we are following this next color itself. 142 00:09:08,200 --> 00:09:12,100 ‫What you can visualize is that you scroll here. 143 00:09:13,220 --> 00:09:14,240 ‫This main line. 144 00:09:15,380 --> 00:09:17,390 ‫This is new text color. 145 00:09:20,080 --> 00:09:21,670 ‫Then there is currently. 146 00:09:23,670 --> 00:09:27,890 ‫So here I'm going to go get him fixed the. 147 00:09:29,200 --> 00:09:34,780 ‫You can give any name that you wanted, I'm utilizing the light one, which is the navigation one, 148 00:09:35,170 --> 00:09:38,080 ‫so be jumping on this later. 149 00:09:38,920 --> 00:09:39,860 ‫This is the color. 150 00:09:41,590 --> 00:09:44,300 ‫This one is so this is dark something. 151 00:09:44,320 --> 00:09:46,510 ‫Next, caller, this is done. 152 00:09:47,230 --> 00:09:49,420 ‫Then we have something like a good description. 153 00:09:50,860 --> 00:09:51,680 ‫We can say. 154 00:09:54,760 --> 00:10:03,190 ‫Team XT long now whenever we have some long text, we are going to utilize this color, which is definitely 155 00:10:03,190 --> 00:10:10,870 ‫the dullest color, I should say that description colors, so it is clear and called on to the description. 156 00:10:12,060 --> 00:10:15,510 ‫This is the color which we are going to utilize whenever we have wrong text. 157 00:10:16,780 --> 00:10:22,270 ‫Looks good to me now that's done, then we are going to have this team color, which is going to be 158 00:10:22,270 --> 00:10:24,550 ‫on blue and then that is how about blue? 159 00:10:25,150 --> 00:10:27,420 ‫We are walking with two colors with button. 160 00:10:28,500 --> 00:10:30,910 ‫If you observe this and this. 161 00:10:32,920 --> 00:10:37,660 ‫What I'm going to call this as team color because our team is defined with this blue. 162 00:10:37,880 --> 00:10:42,010 ‫I'm going to call this team and how we are going to go with color. 163 00:10:45,970 --> 00:10:47,570 ‫You can copy this from here. 164 00:10:50,070 --> 00:10:55,080 ‫The next one is Kim Kalorama, because we are going to utilize how it affects. 165 00:10:56,670 --> 00:10:57,800 ‫Let me copy this here. 166 00:11:04,210 --> 00:11:08,050 ‫There will be one more color that we will utilize later if you scroll down. 167 00:11:08,080 --> 00:11:12,400 ‫This is the background color that we might require multiple times. 168 00:11:13,210 --> 00:11:21,270 ‫So what I'm going to do is I'm going to add a character and I'm going to call this team section. 169 00:11:23,020 --> 00:11:25,570 ‫This way, we can utilize this whenever we want. 170 00:11:28,430 --> 00:11:29,150 ‫That's done. 171 00:11:29,360 --> 00:11:35,540 ‫Now, the only thing that is remaining is that you placed these colors with this very well, so I suppose 172 00:11:35,540 --> 00:11:38,960 ‫if I have this one, I can replace all of them. 173 00:11:39,170 --> 00:11:41,370 ‫Well, no, I don't need to utilize this. 174 00:11:41,420 --> 00:11:46,520 ‫All I can do is I can use the wire function and then just provide the name. 175 00:11:46,910 --> 00:11:48,830 ‫So this is color. 176 00:11:51,450 --> 00:11:53,040 ‫Similarly, I don't need this. 177 00:11:53,370 --> 00:11:58,920 ‫What I can utilize is water function and then my team color, which is our. 178 00:12:00,280 --> 00:12:07,780 ‫Looks good to me now why this is important, because if by any chance in the future, we need to change 179 00:12:08,050 --> 00:12:08,800 ‫our team. 180 00:12:09,040 --> 00:12:11,170 ‫I just need to change these colors. 181 00:12:11,650 --> 00:12:13,660 ‫Risked everything will be replaced. 182 00:12:13,780 --> 00:12:15,910 ‫Remember this point and this is important. 183 00:12:16,600 --> 00:12:19,480 ‫These five six colors define the whole team. 184 00:12:19,960 --> 00:12:20,830 ‫This will be changed. 185 00:12:20,860 --> 00:12:21,670 ‫This will be change. 186 00:12:21,680 --> 00:12:22,540 ‫This will be changed. 187 00:12:22,990 --> 00:12:25,750 ‫So let me quickly do that and then give you our demo. 188 00:12:26,140 --> 00:12:28,030 ‫So first, let me change everyone. 189 00:12:28,840 --> 00:12:30,660 ‫This is also going to be skin color. 190 00:12:34,800 --> 00:12:37,020 ‫Looks good done with this page. 191 00:12:38,340 --> 00:12:41,580 ‫That's why it is OK, we can create quite as well. 192 00:12:42,240 --> 00:12:45,480 ‫But now let me scrawl it here with my stylus. 193 00:12:45,480 --> 00:12:45,990 ‫Yes. 194 00:12:46,350 --> 00:12:55,060 ‫And I can simply call Control Edge, which is going to be replacing one, use the hash, then I'm going 195 00:12:55,060 --> 00:12:56,130 ‫to go that far. 196 00:12:58,550 --> 00:13:00,560 ‫And provide this team color. 197 00:13:04,700 --> 00:13:12,620 ‫The place a place has done, save it back here, they place nothing need to be replaced. 198 00:13:12,820 --> 00:13:13,840 ‫It looks good to me. 199 00:13:14,590 --> 00:13:15,370 ‫Get back here. 200 00:13:17,860 --> 00:13:20,830 ‫Now I had I need to replace the fast one everywhere. 201 00:13:20,980 --> 00:13:23,300 ‫Remember, don't utilize control hash and. 202 00:13:23,980 --> 00:13:26,920 ‫Otherwise it will replace this on top. 203 00:13:27,640 --> 00:13:32,230 ‫So there are chances that several stalling will try to replace the scanner with this war. 204 00:13:32,560 --> 00:13:35,020 ‫But if I do that, it will replace this also. 205 00:13:35,650 --> 00:13:37,330 ‫So remember, don't do that. 206 00:13:38,310 --> 00:13:40,020 ‫OK, let me try to do a lot here. 207 00:13:43,950 --> 00:13:45,780 ‫And they placed a single only. 208 00:13:46,850 --> 00:13:50,420 ‫See, then, I need to know what the second one, which is done. 209 00:13:59,540 --> 00:13:59,960 ‫Great. 210 00:14:00,170 --> 00:14:00,950 ‫This is done. 211 00:14:01,200 --> 00:14:02,900 ‫Then I need to do with the third one. 212 00:14:06,740 --> 00:14:09,800 ‫Hey, I'm just replacing the color with the cold. 213 00:14:11,990 --> 00:14:14,610 ‫Let me search the this. 214 00:14:16,190 --> 00:14:17,090 ‫If I can. 215 00:14:25,090 --> 00:14:27,140 ‫Get back here, Sarge. 216 00:14:27,490 --> 00:14:31,990 ‫You place him place grade and there is team. 217 00:14:32,440 --> 00:14:33,040 ‫How are? 218 00:14:37,730 --> 00:14:40,190 ‫Get back here, take place. 219 00:14:40,370 --> 00:14:42,770 ‫Nothing is ever going to get back, how even. 220 00:14:44,120 --> 00:14:49,940 ‫Nothing is ever labor created than there is section that they haven't utilized. 221 00:14:50,450 --> 00:14:51,100 ‫Looks good? 222 00:14:51,110 --> 00:14:51,950 ‫Save this one. 223 00:14:52,280 --> 00:14:57,530 ‫Save this one and see if we are using any type of product you can use hash. 224 00:14:58,280 --> 00:15:02,030 ‫So we have this hash color, which is for background. 225 00:15:02,030 --> 00:15:04,010 ‫I think we are only utilizing this for one. 226 00:15:04,010 --> 00:15:07,090 ‫So let's keep it here on. 227 00:15:07,100 --> 00:15:09,440 ‫Nothing looks good to me. 228 00:15:09,560 --> 00:15:10,640 ‫Everything looks fine. 229 00:15:11,360 --> 00:15:12,410 ‫Even in utility. 230 00:15:12,410 --> 00:15:16,610 ‫We are not utilizing any type of color, except despite great. 231 00:15:17,840 --> 00:15:21,710 ‫Now, our entire team is dependent on these five colors, five six. 232 00:15:21,930 --> 00:15:27,530 ‫I suppose if I want to change the team color, maybe I want to go with maybe something a little too 233 00:15:27,530 --> 00:15:28,040 ‫purple. 234 00:15:28,490 --> 00:15:30,740 ‫Let's go with this wild hopeful. 235 00:15:33,060 --> 00:15:34,620 ‫And this should be something like. 236 00:15:36,080 --> 00:15:38,630 ‫For example, let's dig for this color. 237 00:15:38,840 --> 00:15:42,920 ‫And if I get back, you can see now our entire team has changed. 238 00:15:43,550 --> 00:15:47,300 ‫Now this was a bizarre example how you can utilize this team. 239 00:15:47,540 --> 00:15:49,940 ‫You can see the Howard exchange, the baton exchange. 240 00:15:50,720 --> 00:15:52,310 ‫OK, I hope you got the idea. 241 00:15:52,910 --> 00:15:55,220 ‫We can also utilize the background color here. 242 00:15:55,820 --> 00:16:03,080 ‫So suppose if I take this team color itself and go on to my highlight. 243 00:16:06,080 --> 00:16:10,250 ‫And you realize this, you cannot save this one. 244 00:16:11,420 --> 00:16:12,590 ‫See, this looks good. 245 00:16:12,710 --> 00:16:15,500 ‫I can change the opacity to 0.1, maybe. 246 00:16:17,320 --> 00:16:18,550 ‫Zero point two. 247 00:16:20,830 --> 00:16:22,190 ‫See, this looks great. 248 00:16:22,210 --> 00:16:26,620 ‫We changed the entire theme of our website with just two colors. 249 00:16:26,860 --> 00:16:27,910 ‫Let me go back now. 250 00:16:29,340 --> 00:16:37,440 ‫And we are back to our previous design, so that's how these variables are important, because now we 251 00:16:37,440 --> 00:16:42,030 ‫can control our entire website with these variable itself. 252 00:16:42,570 --> 00:16:44,250 ‫Maybe we need to change the tags. 253 00:16:44,250 --> 00:16:49,170 ‫Maybe anything else I background every single thing can be controlled there. 254 00:16:49,800 --> 00:16:51,870 ‫I hope you got the idea what we just did. 255 00:16:52,560 --> 00:16:53,190 ‫So that's all. 256 00:16:53,190 --> 00:16:56,190 ‫That's all the basic thing that we really wanted to do. 257 00:16:56,190 --> 00:16:58,230 ‫Everything is done with this whole section. 258 00:16:58,890 --> 00:16:59,700 ‫Yeah, I know. 259 00:17:00,000 --> 00:17:02,580 ‫Now you can see the button size and everything else. 260 00:17:02,970 --> 00:17:06,960 ‫But now let's move towards the next section and continue our journey. 261 00:17:07,590 --> 00:17:10,500 ‫Thank you for watching, and I see you guys in the next one.