D4mations.com

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

[ad_1]
https://i.ytimg.com/vi/OfWdTYCJC0U/hqdefault.jpg



Using the custom SCSS file that Bootstrap provides us with, and references their variables file, I modify a handful of variables before even writing any markup.

There are a TON of variables that you can change, and it’s super easy to overwrite the ones you need. And, because I’m using SCSS, we don’t get a bloated CSS file, as it’s overwriting everything before it’s compiled, which is awesome.

I’m doing all this with Bootstrap v4 alpha 6, so fair warning that if you’re watching this in the future, a few small things may be a bit different along the way, but it shouldn’t be anything major.

If you want to follow along, you can get the PSD and images here: https://www.dropbox.com/s/i3ph72nciw75zxa/the-band-design-and-images.zip?dl=0

Bootstrap v4: https://v4-alpha.getbootstrap.com/

Node: https://nodejs.org/en/
Bower: https://bower.io/
Github Desktop: https://desktop.github.com/

—

I’m on some other places on the internet too!

If you’d like a behind the scenes and previews of what’s coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

Instagram: https://www.instagram.com/kevinpowell.co/
Twitter: https://twitter.com/KevinJPowell
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powellom/KevinJPowell

Original source

d4mer

,
, , , , , , , , , ,

6 responses to “Build a website with Bootstrap 4 – Part 2: Customizing Variables”

  1. Hi Kevin, Thanks for your videos, i really learned a lot. I just have 2 questions though. First, should I use now the npm to install the bootstrap since bower has been deprecated? Second, whats the alternative for _custom.scss since its been removed with the new release of bootstrap. Hope to hear from you soon.

  3. Hello Kevin! Thank you for the video. I am from Russia and understand everything as you tell and show. It seems to me that American developers and video bloggers are rather interesting and qualitative in telling what the Russians are.

  4. Hi Kevin, thanks for the bootstrap video series. I just started watching it today and went up to # 04. But thought I wanna clear out some doubts on video 2. It is the parts where you explain about node js, npm and bower. I always find it daunting whenever I have to work integrating multiple software . do we only access bower or use it only through our code editor as you did in the video? is that the purpose of bower? Another issue is I am not sure what was the purpose of prepros? If you could explain that a bit that would be great.

    Also, I am somewhat confused about trimming down bootstrap file part. (maybe because I have to brush up my sass.) do we only upload the customized bootstrap file at the end with main css file? sorry too many questions. But apart from these I learnt a lot so far from your videos and It s great that you talked about all the stuff including bower, nodejs, customizing bootstrap etc so that I got to know where are my weak points.

Leave a Reply