Changing Colors on Bootstrap with SASS

hello guys this is German so in this video I wanted to talk about boostrap and the reason that I was watching a couple of videos on bootstrapping YouTube and I saw a lot of people saying that when you join the bootstrap bandwagon you tend to use the same tools and the same components and that that's the reason so many people so many websites are so similar because when you create these components you just go to the documentation and you copy paste those components and then you create a website the the layout just based on what you see on bootstrap and and a lot of people were saying that that's wrong and that doesn't reason to use bootstrap but then nice I realized that that that was happening to me as well but I noticed that they have something called theming and that you have to use sass and in order to manipulate the website the components the variables and all that so I'm gonna show you how easy it is to use different colors for example colors for your buttons you can see that you know that if you have used booster before you know that primary is blue you have success which is green and so on so you don't have to you can name your primary colors but use a different type of blue if you want to something that you cannot do using classes because bootstrap is a class-based system so you can create or recreate your own variables so you can have different components alright so that's what we're gonna do now I'm gonna go to get kustra bootstrap Femi and here you can see that you have to import these modules but then you have you need to have your own it is best to have your own a CSS file so you can create your CSS from there and that is going to be rendered on your main CSS file what you cannot do is just go to these a CSS files and and change the variables from there is not it's not a good idea to do that so what we're gonna do here is that we're going to open in your folder and we're gonna go to see sass learning and then we're going to create our first in that index dot HTML and then another one called main dot CSS another one called main dot CSS alright so here we're gonna create order order plate okay so here we're gonna call this one changing colors on the bootstrap nice now what we're gonna do is just to link the CSS which is main dot CSS all right I'm gonna save this one and we're gonna have an h1 here learning to use sass bootstrap okay save it I'm gonna open this with my live server and you can see here so now we are going to change our h1 and then we're gonna put here all right all right cool so now what we're gonna do is we're gonna go to bootstrap and then we're gonna go to one of the components this one is gonna be the Jumbotron I love it because it has these this little button and we're gonna use this to explain how to change it so we're gonna put our Jumbotron there cool so I'm gonna remove this right and now I'm gonna put it right here on the main scss right but what I'm gonna do is that I'm gonna go to the terminal and then I'm gonna run you come on and this is gonna be SAS space and then we're gonna say that whatever you put here I want you to put it here so that's gonna be main SCSS space main.css enter so what that does is that this creates a CSS map and now if you see if I save this and I come here is not there for some reason because they have included I haven't clicked on watch SAS and that's something that you need to download you need to you need to download set SAS live compiler exactly it says life goes live SAS compiler does the that's a plug-in that you need to download and install it right here so when you do that when you do that you click on watch and now you have it right here so if I say body body and then you said background color blue and then you come here you can see that everything is oh my god okay alright so now what I want to do is I want to I want to be able I want to be able to put my boostrap here my all my files if you go to the Jumbotron you go to a theme e this trap we're gonna need these files no modules which includes the bootstrap and so on and so on okay so what you're gonna do is you're gonna go to your terminal okay and then you're gonna click on NPM and then install the strap and that's going to download everything from here just give it a couple of seconds and there you go so now we have the no modules with the bootstrap and then the s CSS and these are the variables okay you can see that we have the blue color right here now I need to import this bootstrap which has already all the scss imported into this module so I need to import this one and when I do you're gonna see that everything is going to have the bootstrap information the CSS so I'm gonna come here and I'm gonna delete this one then I'm gonna go import okay just let me just go here alright this part right here okay there you go so let me just see your nice ass sorry about that okay so we have the index this is going one up no more use bootstrap there you go so safe and now watching is watching something is wrong okay there you go so it was watching success now look if you go to the website now you guys see that and I have my my job with Trump but I still have this blue that I don't like so let's suppose that you have this Google color picker alert and then you're gonna see that maybe you don't like this blue but you like this one and you want to use this blue for your as your primary color okay so what you could do is that you're gonna copy this right and then you're gonna go to your you're gonna go to your variables bar elbows are right here and then you're gonna substitute this one for this one and then you're gonna click on save and now if you go it's your blue but the here's the deal if you do that and in the future you want to use this variables and all that and you have to constantly changing your variables and you have a new project and another project and another project then at the end that's not gonna be good because all you want is your main CSS right so you will want to put your Neal variables right here and leave this one as they are so what you're gonna do is just to save and then just put these first here okay let me guess right here what's going on oh my goodness oh my oh my goodness oh my goodness all right so yeah okay there's our about that there you go so now what you're gonna do is I'm top of this one you're gonna create your own theme so this is called theme colors : then you open your parentheses not killer curly braces and then here you're gonna put a semicolon and here you're going to change your your classes you know that there is a class called primary so you're gonna put it in quotes and then you put primary and then you put the colon and here you're gonna put the color so the color is this one and then here you put a coma not a semicolon so what's gonna happen is I wanna click on save is gonna change you so I can do secondary and then I can create my own secondary green I can I don't know maybe this one and then I can take my own danger and then danger to be a something like this dan sure okay there you go so click on save and then what I'm gonna do is that I'm going to copy these little dude and then I'm going to name this one primary and this one secondary and this one danger okay so obviously we need to change this one for secondary and this one we're gonna change this for danger okay so if I click on safe oops what was that oops safe there you go good so you're not changing anything from here what you're doing is that you're importing everything to your main CSS and then you're creating your own colors and you can do a lot more than that for example you can notice that when you when you download your Jumbotron it has some padding and this body maybe you don't like it maybe you want this padding this padding is I think is this padding I think is maybe two Rams so if you go to the variables now first of all if you go to the Jumbotron SCSS which is there you go so you can see that the jumbotron the padding is where is it but it's not there isn't the variable so you're gonna be just me trying jumbo there you go so the jumbotron padding this is the variable is to run by default so if I do this and I come here to my men main CSS as CSS and I do this okay sorry I just closed as well all right if I do this okay I don't know some real one run can I save you see pretty good so if I put four that would be bombastic so one point one one point five years okay there you go cool so that's how you can do a lot of things with bootstrap just download your ask your sass and start just manipulating your variables you can create two folders want to change your variables and then when you feel like okay this is what you want then you copy your variables and then you copy it back to your to your main project on your main scss okay so this is it guys thank you so much for watching bye bye

Channel: Coding for the Soul

Views: 13,504

Rating: 4.6981134 out of 5

Keywords:

Id: nlxlFA69HHA

Length: 15min 14sec (914 seconds)

Published: Tue Feb 25 2020