Coding

Bootstrap 4 Theme Customization (with Sass) | BOOTSTRAP 4 TUTORIAL

  • 00:00:01 welcome to this video great to have you
  • 00:00:04 back in this series you'll learn a lot
  • 00:00:06 about bootstrap for in the other videos
  • 00:00:08 in this video I will show you how you
  • 00:00:10 can customize it to your needs
  • 00:00:12 we'll use sass for this a superset to
  • 00:00:15 CSS which allows us to change some
  • 00:00:18 default settings for bootstrap like the
  • 00:00:20 border-radius as you can see here or the
  • 00:00:22 primary color all set conveniently with
  • 00:00:25 sass variables and thereafter we import
  • 00:00:27 and overwrite what we need from the
  • 00:00:29 bootstrap package sounds complicated it
  • 00:00:32 actually isn't so let's dive into that
  • 00:00:34 and let's see how that works
  • 00:00:38 so let's dive right into customizing
  • 00:00:41 this and for DES we'll start on the
  • 00:00:43 official bootstrap documentation page
  • 00:00:45 get bootstrap comm there if you click on
  • 00:00:48 documentation you can click on theming
  • 00:00:52 here on the main page theming here you
  • 00:00:55 find instructions on how you may adjust
  • 00:00:57 the theme or the general look of
  • 00:01:00 bootstrap so to say because bootstrap 4
  • 00:01:03 uses sass behind the scenes now Assassin
  • 00:01:07 case you don't know is basically like a
  • 00:01:10 super set to CSS it's a language
  • 00:01:13 building up on CSS which offers you some
  • 00:01:17 extra features and I'll dive into sass
  • 00:01:20 in just a second and bootstrap for the
  • 00:01:23 team behind it used sass because it
  • 00:01:26 basically makes writing styles easier
  • 00:01:28 everything is compiled to normal CSS
  • 00:01:31 code before it's getting shipped though
  • 00:01:33 so normal CSS code is running in the
  • 00:01:36 browser and normal CSS code is what
  • 00:01:40 we're importing here
  • 00:01:41 with that bootstrap link here however
  • 00:01:45 behind the scenes that uses sass during
  • 00:01:47 the build process and this is exactly
  • 00:01:49 where we need to hook in if we want to
  • 00:01:52 adjust the colors let's say or the
  • 00:01:56 default sizes margins and so on assumed
  • 00:01:59 by bootstrap then we have to override
  • 00:02:03 some defaults which are set up in that
  • 00:02:05 sass code and basically recompile the
  • 00:02:09 bootstrap package to CSS again this is
  • 00:02:12 what we'll do and this is what you find
  • 00:02:14 instructions on on this page so here you
  • 00:02:17 basically find an example structure how
  • 00:02:20 this might look like in your project how
  • 00:02:22 you can override the SAS code or using s
  • 00:02:26 CSS which is a variant of sass so to say
  • 00:02:29 and this is exactly what we will do now
  • 00:02:31 one thing you can already see here is
  • 00:02:33 that it kind of needs bootstrap locally
  • 00:02:38 to do that we need to get the raw source
  • 00:02:41 code behind bootstrap the SAS code and
  • 00:02:44 we can easily get that by installing it
  • 00:02:46 as a local dependency using NPM NPM is
  • 00:02:50 notes package manager
  • 00:02:52 and you get it automatically when
  • 00:02:54 installing note J s we're not going to
  • 00:02:57 write any node.js code but it ships with
  • 00:02:59 that package manager which is the
  • 00:03:01 de-facto standard tool for managing
  • 00:03:04 development dependencies
  • 00:03:06 now I already got that installed and
  • 00:03:08 with that you can go back into your
  • 00:03:09 project open your terminal or command
  • 00:03:12 line either the normal one or like I did
  • 00:03:15 here the one integrated into your IDE
  • 00:03:17 and navigate into that project folder in
  • 00:03:20 that terminal now you can run npm init
  • 00:03:23 using that node package manager tool
  • 00:03:25 which will basically put this project
  • 00:03:27 under control of npm you're then asked a
  • 00:03:30 couple of questions you have to assign a
  • 00:03:32 project name and so on and you can
  • 00:03:33 basically always accept the default of
  • 00:03:36 course you can also find unit to your
  • 00:03:38 needs and once you did all that and
  • 00:03:40 confirmed you should see that there is a
  • 00:03:42 package.json file in your project now
  • 00:03:44 this basically is used by NPM to control
  • 00:03:48 well your project in which dependencies
  • 00:03:50 you have now with that edit you can now
  • 00:03:53 run another command npm install to
  • 00:03:55 install a new dependency and that
  • 00:03:57 dependencies bootstrap so enter
  • 00:03:59 bootstrap here and I'll add – – save –
  • 00:04:03 also store an entry in the package –
  • 00:04:06 JSON file this basically makes sharing
  • 00:04:08 the project easier thereafter it will
  • 00:04:10 now also give you that package locked or
  • 00:04:12 JSON file which stores the exact version
  • 00:04:14 which was installed and then packaged up
  • 00:04:16 Jason you also see that bootstrap was
  • 00:04:18 added as a dependency now with that we
  • 00:04:21 got it locally and we also get this node
  • 00:04:24 modules folder here now now in that
  • 00:04:27 folder you should see that bootstrap
  • 00:04:28 folder and in that bootstrap folder you
  • 00:04:31 have the dist folder with the finished
  • 00:04:33 and and readily compiled bootstrap code
  • 00:04:35 but you also get the s CSS folder and
  • 00:04:38 this holds all the raw code now you
  • 00:04:41 could of course go into such a file here
  • 00:04:44 and start editing stuff there don't do
  • 00:04:46 that it wouldn't get compiled that's the
  • 00:04:49 first problem you'll run into you just
  • 00:04:51 because you edited here it won't affect
  • 00:04:53 the compiled and finished CSS code and
  • 00:04:55 additionally you shouldn't touch this
  • 00:04:58 because if you ever need to reinstall
  • 00:05:00 your project and reinstall that
  • 00:05:01 dependency well you'll overwrite your
  • 00:05:04 changes so we'll
  • 00:05:05 follow a different approach we'll create
  • 00:05:07 our own Maine dot s CSS file a file
  • 00:05:11 where we will write our own CSS code and
  • 00:05:14 also override the bootstrap defaults now
  • 00:05:17 in order to be able to write SAS code or
  • 00:05:19 s CSS code we need a SAS compiler and in
  • 00:05:23 many projects you'll have web pack with
  • 00:05:26 SAS loader in there we could do that
  • 00:05:29 here too but we don't really need web
  • 00:05:30 pack so what I'll do is I'll just go to
  • 00:05:33 SAS – Lang comm and there if you click
  • 00:05:37 on documentation you can learn more
  • 00:05:38 about SAS and especially you can also
  • 00:05:41 learn how to install it under using SAS
  • 00:05:44 you find installation steps for Windows
  • 00:05:47 you need to install Ruby first for Mac
  • 00:05:49 and Linux you already got that we're not
  • 00:05:51 going to write any Ruby code but it it
  • 00:05:53 uses the Ruby package manager basically
  • 00:05:56 to install SAS so you should just run
  • 00:05:59 this gem installed SAS command with Ruby
  • 00:06:02 installed to install SAS on your machine
  • 00:06:04 and once you got that you can run it as
  • 00:06:06 a tool from your command line to compile
  • 00:06:09 SAS or SPSS files to normal CSS files
  • 00:06:12 now this is not a SAS course or videos
  • 00:06:15 if you want to learn more about that
  • 00:06:17 definitely check out tutorials dedicated
  • 00:06:19 to SAS what I want to do here is I just
  • 00:06:24 want to use it to well overwrite my
  • 00:06:27 bootstrap defaults and for that we can
  • 00:06:29 go back to the bootstrap documentation
  • 00:06:30 and there you see that one easy way of
  • 00:06:34 overwriting bootstrap is by importing
  • 00:06:36 everything from that bootstrap folder
  • 00:06:38 the alternative is that we only import
  • 00:06:40 what we need but for that you need to
  • 00:06:42 make sure that you really import
  • 00:06:44 everything you do use in your page
  • 00:06:46 thereafter so I will go with the import
  • 00:06:49 everything approach basically what we
  • 00:06:51 already do and then you add this import
  • 00:06:53 in your main door a CSS file with this
  • 00:06:56 you can now from the terminal in your
  • 00:06:59 project folder run SAS main dot s CSS
  • 00:07:02 main dot CSS and this will overwrite the
  • 00:07:06 main dot CSS file so let me quickly also
  • 00:07:08 grab the styles we have set up there let
  • 00:07:11 me add them after this import and now
  • 00:07:13 hit enter and this now gives you your
  • 00:07:17 main dot CSS file which
  • 00:07:19 is way bigger now because now it
  • 00:07:21 includes the entire bootstrap package
  • 00:07:23 it's also not minified so that would be
  • 00:07:26 something you have to do with some extra
  • 00:07:29 build step we won't do it here I want to
  • 00:07:31 focus on just the customization part the
  • 00:07:34 key thing is that now we got all the
  • 00:07:36 bootstrap styles and that may not see us
  • 00:07:38 as file of course again we could edit
  • 00:07:40 them there but we shouldn't do that
  • 00:07:41 instead let's just import this main dot
  • 00:07:44 CSS file so I will go to my index.html
  • 00:07:48 file get rid of that bootstrap import
  • 00:07:50 here
  • 00:07:51 from the CDM we don't need that anymore
  • 00:07:53 because we got everything and may not
  • 00:07:54 CSS this also means that if we save all
  • 00:07:57 the files and we go back to our project
  • 00:07:59 and if I reload it should look exactly
  • 00:08:03 as it did before because even though
  • 00:08:05 we're not importing bootstrap from a CDN
  • 00:08:07 anymore we still get the entire
  • 00:08:09 bootstrap code imported because it's now
  • 00:08:11 all in our main dot CSS file we can
  • 00:08:14 check this in our browser developer
  • 00:08:16 tools in the head section
  • 00:08:18 we only got that import to main dot CSS
  • 00:08:20 and if we click on sources there we can
  • 00:08:23 see that may not CSS since the indeed
  • 00:08:25 has all these bootstrap data fields now
  • 00:08:28 for one we can also see that bootstrap
  • 00:08:30 seems to use CSS variables here
  • 00:08:33 however we will override the sass
  • 00:08:36 variables and we do that in our main dot
  • 00:08:39 s CSS file where we import bootstrap
  • 00:08:41 there we now have to make sure that we
  • 00:08:44 overwrite any colors or whatever we want
  • 00:08:46 to change bootstrap uses so again back
  • 00:08:50 in your official Docs we find more
  • 00:08:52 information on that we find how we can
  • 00:08:55 set some default colors we have to do
  • 00:08:57 that before we import bootstrap because
  • 00:09:00 we want to declare our own styles before
  • 00:09:02 we import the bootstrap Styles
  • 00:09:03 bootstraps variables in the SAS code are
  • 00:09:06 actually configured in a way that they
  • 00:09:09 won't overwrite our map values if we set
  • 00:09:12 them but if we don't set them then the
  • 00:09:13 bootstrap defaults will be used and this
  • 00:09:16 is how we can set colors for theme
  • 00:09:19 colors we also got that theme colors map
  • 00:09:21 and why don't we just give it a try so
  • 00:09:24 let's copy that theme colors map it's
  • 00:09:26 basically a bit like a JavaScript object
  • 00:09:28 you could say and let's import it or add
  • 00:09:30 it in front of that bootstrap import
  • 00:09:32 now there let's set primary maybe to you
  • 00:09:35 a purple and danger to maybe a different
  • 00:09:41 red simply like a dark red and now keep
  • 00:09:45 in mind primary is a color we are using
  • 00:09:48 in our project for dead submit button
  • 00:09:51 here button primary right now if we have
  • 00:09:55 a look at our project it looks like this
  • 00:09:57 it's blue
  • 00:09:58 now we overwrite this here with theme
  • 00:10:01 colors primary so now what we can do is
  • 00:10:04 we can re-execute that sass compilation
  • 00:10:07 command and once this finishes we should
  • 00:10:10 be able to reload our page and now you
  • 00:10:13 see it's purple and the hover effect is
  • 00:10:15 automatically adjusted to because
  • 00:10:18 bootstrap behind the scenes uses this
  • 00:10:20 variable in a couple of places to set up
  • 00:10:22 a hover style and a default style for
  • 00:10:24 the button and also for that button
  • 00:10:26 outline for the alert which we could
  • 00:10:29 have given a primary style to as you saw
  • 00:10:31 in an earlier video in this series so
  • 00:10:33 wherever we can use that primary color
  • 00:10:36 it's now going to be purple and of
  • 00:10:38 course you cannot just change the
  • 00:10:39 primary color indeed you can find out
  • 00:10:42 what you can change by going to the
  • 00:10:44 bootstrap SCSS folder and in there you
  • 00:10:47 have this variable stud a CSS file
  • 00:10:49 underscore variables in there you
  • 00:10:52 actually see all the variables which
  • 00:10:54 tribe uses and they all have this
  • 00:10:56 default flag so that your changes
  • 00:10:59 actually aren't overwritten madam
  • 00:11:00 they're only used if you don't set them
  • 00:11:03 so if they should be used as a default
  • 00:11:05 and there you see all the colors you can
  • 00:11:07 override you can in general alright what
  • 00:11:09 is blue in bootstrap world or as we did
  • 00:11:13 it you can go to the colors map and in
  • 00:11:16 there you can also override some colors
  • 00:11:19 excuse me theme colors was it there you
  • 00:11:21 can override primary and so on you
  • 00:11:23 cannot just override colors you can also
  • 00:11:26 override the DD dimensions or the sizes
  • 00:11:30 bootstrap uses if you scroll through the
  • 00:11:33 fall you'll see a lot of things used by
  • 00:11:35 bootstrap like the breakpoints and so on
  • 00:11:37 or what a default border radiuses and
  • 00:11:40 you can change all of that
  • 00:11:42 not in this file but in your file you
  • 00:11:45 simply grab the
  • 00:11:46 at border-radius here for example added
  • 00:11:49 in front of the import that's always
  • 00:11:51 important and then change it from the
  • 00:11:53 default which is thought to five REM
  • 00:11:55 change it to let's say ten REM if you
  • 00:12:01 now save this and recompile your code
  • 00:12:04 that's always important recompile the
  • 00:12:06 CSS code if you now reload you see the
  • 00:12:10 inputs are way more around it because we
  • 00:12:13 overrode this default border-radius
  • 00:12:15 and that is really something I encourage
  • 00:12:17 you to play around with there's a lot
  • 00:12:19 you can do with that now coming back to
  • 00:12:21 something else we saw in the docs that
  • 00:12:23 part that you only import what you need
  • 00:12:25 this is actually good because it allows
  • 00:12:28 you to shrink the size of CSS code your
  • 00:12:31 users have to download right now we used
  • 00:12:33 an approach where your users download
  • 00:12:36 everything everything all the times now
  • 00:12:39 if you know you only use the grid and
  • 00:12:42 you only use form inputs and buttons
  • 00:12:45 then you can actually just import these
  • 00:12:48 parts of bootstrap because if you have a
  • 00:12:50 look at the bootstrap scss folder you
  • 00:12:53 see it's actually split up into buttons
  • 00:12:56 into forums and then to grid for example
  • 00:12:59 so let's do that let's import what we
  • 00:13:02 need we got free required imports which
  • 00:13:05 we always need you can see them here in
  • 00:13:07 the docs so let's grab these and insert
  • 00:13:09 them here these are the default
  • 00:13:10 functions variables and mix-ins used by
  • 00:13:13 bootstrap you can override that stuff
  • 00:13:15 but you probably don't overwrite
  • 00:13:17 everything so make sure that you have
  • 00:13:19 the defaults for the parts you don't
  • 00:13:20 overwrite and you do import these
  • 00:13:23 defaults by adding these imports and now
  • 00:13:25 let's import the other parts which we
  • 00:13:27 need like for example the grid this is
  • 00:13:30 how that import would look like but then
  • 00:13:32 we in our case also need the buttons and
  • 00:13:35 we need the forms and as a side note you
  • 00:13:38 might notice that we omit that
  • 00:13:40 underscore which is part of the file
  • 00:13:41 name this is simply automatically added
  • 00:13:44 by SAS so to say so you have to import
  • 00:13:47 without the underscore now with that all
  • 00:13:50 added we can recompile again now it's
  • 00:13:53 also faster of you saw that and in our
  • 00:13:56 main on CSS file it's leaner now it
  • 00:13:59 still has a lot of code
  • 00:14:00 there but actually it only has two grid
  • 00:14:03 related code the forms at the button
  • 00:14:04 related drug code if you for example
  • 00:14:06 search for alert in there you won't find
  • 00:14:09 any alert classes because we didn't
  • 00:14:11 include alerts this also has one hour
  • 00:14:13 implication if we now reload our page
  • 00:14:16 there's one thing that should be broken
  • 00:14:18 right now the navigation bar
  • 00:14:20 so let's reload and indeed forum looks
  • 00:14:23 good
  • 00:14:23 button looks good but the default Styles
  • 00:14:26 like the text that's broken anti
  • 00:14:28 navigation bar as mentioned is broken
  • 00:14:30 now the reason for this of course is
  • 00:14:32 that we didn't include the navigation
  • 00:14:34 bar here the nav bar we didn't include
  • 00:14:36 that so let's go back that's always
  • 00:14:39 include the nav bar and regarding the
  • 00:14:43 default styles are that you've old
  • 00:14:46 textile dad actually is the reboot
  • 00:14:49 package which sets some default styles
  • 00:14:52 for the browser with that we can
  • 00:14:54 recompile everything reload and the text
  • 00:14:58 is fixed the nav bar is kind of fixed
  • 00:15:00 I'd say now the reason for the invisible
  • 00:15:03 nav bar is that we also need to include
  • 00:15:06 utilities here because we're using some
  • 00:15:09 utility features in the nav bar dad if
  • 00:15:12 we go back here it is again our response
  • 00:15:16 if nature is only kind of working though
  • 00:15:18 for example I'd right here you see this
  • 00:15:21 is not really working as it should for
  • 00:15:23 that we need to include the transitions
  • 00:15:26 so that we can play this animation to
  • 00:15:28 expand or well remove our mobile nav bar
  • 00:15:32 with that if we get recompile and then
  • 00:15:34 reload we can already see it now this is
  • 00:15:37 working here and now we go back to the
  • 00:15:40 state where we were before now as you
  • 00:15:44 see it can be tricky to import
  • 00:15:46 everything you need I also had to look
  • 00:15:48 up for example the transition thing or
  • 00:15:50 into utilities it's easy to overlook
  • 00:15:52 this if you think just eat the navbar
  • 00:15:53 and one other important thing you can
  • 00:15:57 always look into these files of course
  • 00:15:59 you can look in there for example the
  • 00:16:01 type package we're not importing this
  • 00:16:03 but here we also seem to set some
  • 00:16:06 typography related things so we might
  • 00:16:08 also want to import that after reboot
  • 00:16:10 may be so reboot set some browser
  • 00:16:13 defaults in general but the
  • 00:16:14 type package here then set some general
  • 00:16:16 typography related settings for
  • 00:16:18 bootstrap so dad is also something we
  • 00:16:20 might want to import even though I don't
  • 00:16:22 see a directive friends here but you can
  • 00:16:26 always look into these Falls you can
  • 00:16:27 find out which variables two different
  • 00:16:30 features their use and you can look into
  • 00:16:32 the variables files in general as
  • 00:16:34 explained and then you can always
  • 00:16:35 override the things there after import
  • 00:16:38 what you need on your project and they
  • 00:16:40 have four improve your bundle your file
  • 00:16:42 size and tweak it to your needs so this
  • 00:16:45 is how you can customize bootstrap for
  • 00:16:48 or projects using bootstrap for again
  • 00:16:51 this could also be implemented into a
  • 00:16:53 web pack workflow where you just compile
  • 00:16:56 your sass file differently in the end I
  • 00:16:58 hope this was helpful and then with all
  • 00:17:01 these videos you now understand how you
  • 00:17:04 can actually work with bootstrap and add
  • 00:17:07 it to your next project