Create your own classes on bootstrap with SASS

hey guys how are you this is German speaking again so in the last video we're talking about bootstrap and sass and how you can use your the same the same classes to create your own colors so in this video I wanna I just wanted to talk to you because somebody said that I'm still using the same I'm still using the same classes I'm still using I was using primary secondary danger as those clubs are building within bootstrap and you can also do create your own classes and change those that are primary with another class that you want so you can for example if you want to remember your own classes because you are a fan of in this case like Avengers as you can see you can create your own classes okay I'm sorry can't see so here we have Captain America Hulk Iron Man Black Widow Nick Fury Thor and Pepper Potts so you can see if we inspect this you can see that it says right there BTN which is the class from bootstrap and BTN primary who's supposed to be primary so we changed it for BTN captain - America and that's because it was creating my own classes using SAS alright so that's what we're gonna do today so this is the one and this is the wonderful working on so now let's do this this part how do you how do you do that what we're gonna do is that we're gonna create our own theme theme colors and then we're going to have it right here populated with the colors Cemil a fellow there and then we're gonna call the first one Captain America hold on and then the one that I have is zero zero is a six step back and then a coma here all right not a semicolon because that would be CSS and then the next one that I have is Iron Man and we have ff0000 coma and then we have Hulk which is a green one and that's the green that I I was looking for another the exact green from Hulk okay all of these colors where from the one that I was looking for not the real colors five c00 Cobra then we have Black Widow which has a movie coming over very soon dying to take my wife and see it she loves Black Widow it was like so this one is 63 so it's it's green 63 all right I know it's Black Widow and I have this gray but help me out here alright let's just concentrate guys yeah four and then this one is F F 2 F 0 0 coma and then we have pepper potts pepper peppermint it's a nice Linux distro and then 3 6 2 bc f good and we have light yeah we have light because you notice that the background from the jumbotron is different from the actual Jumbotron so I changed it so that's going to be light and this one is e9e nine oh sorry p99 there you go alright so now we're gonna have the jumbotron padding and that is gonna be one brand okay and this just put that as default and then we're gonna have a Jumbotron background which is for this light that we created : and then we're gonna put oh no wait a minute no that's not that was another one we have to create let me just do it so I can show you gray 100 so gray 100 is a variable that you can find here no okay a CSS and on the variables if you type Jumbotron you can see that I'm sorry you can see that the gray 100 is this type of gray but I changed it and now what I'm doing is that I have to create this variable here so dollar sign gray - then I have to put this one and that one was [Music] f3f3f3 so now I can create this one here so this this this variable is getting it from here so if I want to change it in the future I just need to change it here yeah that's not something that people do I just want to do it because I was just testing it yeah it's pretty cool now I didn't like the font family you can notice that this one has a different the a different fund from this one okay I think this one is Ariel Sam serious and this one is Roberto so what I'm gonna do here is that I'm gonna grab the font-family and then base and then I'm going to create robot oh good so that's it okay it's going on here so what it was doing was that I put a column there and I put a coma here and it was supposed to be a semi column so it was not getting the information from the contras I was not adding the colors the value to to these these new classes and I'm creating so I changed Captain America and Iron Man on here you can see that on the index I put now BTN Captain America and then Iron Man and if you click on save and you come here you're gonna see that it has a different color now so let's change the others I was supposed to be halted so if I change Captain America Iron Man for Hulk and then here Iron Man and then here black widow Widow and then here we have Nick I think it was Nick that I used so here is Thor and then here is pepper we could become save and then we go back or Nick is not there because the class that I was using for Nick I didn't create it so Nick Nick Fury is course black all right black I go safe very good so now you can see Nick so that's how you can create your own classes and change your the colors to use it throughout your project and this is good because for example if your project is based on two different colors like black and yellow and you still want to use the the class is that the the bootstrap has then you can create your own themes and give it your own the same the colors that you can't remember because sometimes you just primary secondary and all that you cannot remember but you can create your own colors and use them throughout your projects so thank you so much guys for watching see you in the next one a bye

Channel: Coding for the Soul

Views: 223

Rating: 5 out of 5

Keywords:

Id: aKB7uweSmug

Length: 9min 2sec (542 seconds)

Published: Thu Feb 27 2020