Build a website with Bootstrap 4 - Part 2: Customizing Variables

Key Takeaways

it's time to set up the variables for our bootstrap project so the custom folder the bootstrap gives us is really awesome it gives us a place where we can go in and take all of the variables they've already created and modify them for own without actually having to touch they're just over writing things and because this is all being done with sass we're not actually bloating up a file by having over rights over things it's just going to compile it after the fact so all of the things you know if I change the color of the primary to from blue to red which I'm going to be doing in this project it's going to do it before it turns into CSS so we're not bloating anything with creating needless overrides we can set it all up really easily so let's go and look at how we do that right now okay guys so I talked a lot about this custom file now one thing that's really important with this they actually made a mistake with this with if you're on the alpha 6 if you're on for some reason an older version of the Alpha this would be in the right place and if you're around on whatever the newer one is I believe it will be the beta but if it's another alpha whatever it is this custom will be somewhere else but if you're following along you've got to move it up to here was they were playing with stuff and this is the fun of dealing with pre releases sometimes they make mistakes so it's just really important you move that up there and I'll show you why once we get later on in the project but do make sure you do that if you're on the alpha 6 and now I want to use this custom folder I want to do stuff with it so what I'm going to do is I'm going to jump over to their variables file because we're going to have to do a lot of digging around in the variables file here to know what we actually want to be doing so this is a massive file and table of contents is super useful for this just so you know and I'll show you a bit how to use the table of contents properly are willing to do that right away I want to do my colors so I'm going to select it command F and hit find and it's going to bring me there so I want to overwrite some of the colors that are in here because these are not the colors that I want to be using so what I'm going to do is that let's go over to Photoshop and open up the project and first thing we can do is switch the red / because this is the red that I'm going to be using the most through the project so I can push okay on that I got my red did you guys see that on the screen I should move that over sorry about that we can copy that push okay I can shrink that back down and now with my red here now what they what we don't want to be doing is replacing this number what I want to do is go over it actually I'm going to copy that whole thing come over to custom and paste this in we remove default and it says this right at the top just remove the default that does it oh it doesn't mention it here make sure you take the default off that's going to cause problems if you don't take that off it's not going to work I'm going to take the default off let's go back to photoshop to get my red again copy e two three four zero zero it's pretty easy to remember actually and I'm going to paste that and now my red has changed so that's cool let's go see what else we can change we're going to want to change a few different things so my black is going to change now let's just take all the colors actually that's Jake all whoops too far too far let's start with all of this but we're not going to keep all of it just to make it a bit so we're not jumping back and forth my white is going to stay white so I don't need that black is going to change red I've already changed orange I don't think I need any of these other ones actually let's just go look fast white black red there's a dark gray color that I'll be using red gray black red yeah that's the only colors that I think I I'm actually going to use so I can delete all of that my red is redefine my black will be okay let's see here these I think I'm going to play with a little bit too so we'll get to there in a second my brand primary is going to get switched over to red because that's the makes the most sense to me an interesting thing they're dropping the whole brand primary success info all this starting in the next version might be gone with the beta it looks like they're going to be dropping that if you're wondering how I know that there you've started if you go to the github page and read some of the documentation and stuff in there that and yeah it looks like these are gonna get stripped out and it's they're gonna have a going to go with more the color naming system instead which is going to take some adjustment for me so brand primary is definitely going to be red for me as long as this is still here um and I guess that's the only thing we need to change right that makes it easy okay um so we'll just dump all that we can always come back in here and add something else if we have to gray let's rename my gray color as this move my black actually right that's like the darkest color I'm going to do this one as black let's just we don't need to minimize that let's just my black will become this one and my gray will be this one gray will be this one and everything else here we can get rid of and I'm going to get rid of some of those comments I don't really need them cool so those are the main things that I'll be using in there let's just go quick and look at there's any other variables enable rounded by default is on and I don't want that to be on so I'm going to turn that off so I'm gonna take that over to my custom and make this false except you have to spell false right false I don't want rounded corners my buttons and other stuff are all square so that's all of a sudden everything I had a round corner no longer has a round corner shadows gradients I'm not using transitions on that's fine find glid classes I do want print classes I do want spacing I'm not going to play with so let's go back up and look at the table of contents just to see if there's anything links I probably want to be changing right so I'm going to hit a let's go look at the body - command F find and we're on the body so body background color see yep here's some stuff I want to change I'm just going to take these two because I'm not going to have any inverse body colors and all of that anyway right right so let's jump back here paste whoops so my body background will be black and this will be white I guess my text color is white most of the time right yeah I just use pure white perfect okay so that's good good good oh just realize guys a small problem here because and this is probably why they moved the custom underneath originally and maybe they found a way to fix this but because they'd move custom underneath so you wouldn't run into problems like this because if I'm saving this here it's giving me an error that it can't it doesn't know what white is because white hasn't actually been defined yet so I do have to come in here and actually define what white is white is FFF so that should be okay I should be able to save this and everything should be compiling properly now I believe so okay so yeah that's it awesome possum we're you're good to go and I think that's all the variables we're going to need in this project I might be jumping in that file as we go through this project later on if you know I noticed that there's something missing but more or less I think that's it in the next video we're going to be doing the markup for this website and because our variables are pretty much set everything should just fall into place more or less they'll be some tweaking and some stuff that we'll definitely need to be done but a lot of our work really is done after this it's just all the details and stuff like that so if you like this video hit the thumbs up if you have any comments any questions whatsoever leave them down below and until next time try and make your corner in the internet just a little bit are awesome