Follow Andrew.

You can check down in the description and they'll be links to my channel where I do video tutorials about Web design, Web development technology, CSS, html photo shop, URU X and other related technologies.

I've been developing websites for over 20 years now, and s o go ahead and check out my child if you like what you see here and come see some other stuff Now, in this particular video tutorial, we're going to be learning how to create an entire custom bootstrap team for an admin style panel from scratch.

And it's sort of divided into three separate parts.

The first part we're going to be setting up in P.

M and Web pack so that we can configure bootstraps source files that are written in SAS and kind of setting, setting up some automatic work flows to help us when we development the sec part.

Second part of the tutorial, we're going to be looking at critic just some basic bootstrap templates, things that are common in admin forms like forms.

Uh, something will tables, cards, widgets, things like that you may find inside of a typical admin style theme.

And then the third part of the tutorial, we're going to be customizing the bootstrap experience by adding some custom CSS overriding some of the bootstrap Java script or rather, the bootstrap SAS files to have some sort of custom look and feel and lay out and design toe are bootstrap had men thing, so that's kind of the three parts.

Again, check down to the description.

If you want to skip ahead to any particular section back and forth throughout this video, I help you learn something.

So come follow along.

Now the first thing we need to do here is set up a project folder.

So I've just got a simple folder here set up in visual studio code is what I'll be using for the editor, and it's just called H Q.

Dash Admin is my master folder.

And inside of this folder, we're going to be creating several files that configuration files to start off.

So what we're gonna go ahead and do is we're gonna open up our terminal window, and we're gonna make sure that we add a couple of files here.

So the first thing we'll do is do get in it and that is going to create a regular empty git repositories.

So we contract changes here to our files and whatnot.

The next thing I wanna do is say in P m in it.

And that's going to pull in the node package manager into our folders that we can pull in various packages and import those into our project.

So the package name.

I'm just gonna leave here at H Q admin.

You can see.

I'm just gonna follow the prompts here.

Version Juan description will just call admin.

Theme entry point will leave at.

We're actually gonna call our entry point Js slash ap dot Js is where our entry point is.

I'm going to be not gonna leave any text commands.

We're not gonna have a git repositories set up quite yet.

Keywords will just say admin theme, and the author will just sees Andrew Wilson and we'll leave the license at default and will hate yes for all of that.

And then that, uh, creates a couple of files for us.

Now you can see it says I can update to a new version from 56 to 561 so make sure you have the latest version.

Probably want to run an MP and run this command right here.

Before you start this tutorial in, make sure you're on the latest version of note so you can see what that did for us.

Isn't credited filing here called Package Dodge a Sean.

And this package has all those values that we're gonna be using throughout this tutorial.

Gonna be adding quite a bit to this here in a minute.

But that gets the initial things set up nicely for us.

Now, the next thing I wanna do here is gonna create just a file here, and this file is gonna be a dot Get ignore file, so dot G i t ignore.

And we want to add into this file the node underscore modules directory.

This way.

Get Won't track all of these scripts that we import into the node modules.

Director, we don't want those as part of our repositories, so we'll just add that one in there for now.

And that's probably good enough in our get ignore file for right now.

Next.

Let's go ahead and we're gonna install Web pack.

So we're gonna be using Web pack as the package manager, which is gonna automatically bundle up all of our JavaScript files into a single job script file.

It's gonna compress it for us is gonna automatically take our CSS and sass and converted to CSS and write that and compress just gonna do several things for us.

We're gonna be using the Web pack package manager in this tutorial.

So let's go ahead and install that next.

So again, down here in our terminal, we'll run a couple of commands here.

We're gonna say in Pee Wee, let's make sure you're actually down in the eternal gonna say in P M and install Web pack.

Now we could run all these commands which Dash, Dash saved Dev.

We could run all these commands on one single line.

However, gonna do most of them.

I'm going to do most of them individually so you can kind of see what they're doing.

So this is gonna install Web pack for us.

This will take just a minute.

Has it downloads here?

The next command we're gonna be running after this Web PAC Command is the Web PAC command line tool.

So in order to do that, we say in p m install Web pack dash seal I dash Dash save death That saved Dev Command makes it so that this rights to the development dependencies in our package dot Jason file so that they're not included as part of the production of dependencies because this stuff is course only used during development.

So we'll go ahead and add that one.

Give a second for that guy to install.

Next, we're gonna say in P M install Web pack Dash Dev, Dash server saved Dev, And this is gonna be the development server that automatically will spawn when we're creating our files.

It has supports, like hot reloading and a few things like that.

So every time we hit, command us and save a file, it'll automatically re compressed re compile our SAS, butt out the files and refresh the browser for us.

So that's kind of a nice ah feature there that we're going to be using in that package.

Uh, next thing going to do is install in P m in stall.

Uh, let's see here.

This one's going to be the font.

Awesome.

So we're gonna say at under the repositories called Fort Awesome slash fund.

Awesome dash free.

There's a free and a pro version We're gonna be using the free.

And then this save Dev is well, so font Awesome is the icon font that is open source and free that we're gonna be using.

Yes, none of us open source, but it's free.

We're gonna be using that to generate all the icons for the various settings and switches and toggles inside of our main theme.

So the command we used to sort of crunch and make Web packed do its thing is N p x Web pack dash, dash config.

And then it's just the default name there, which is web pack dot config dot Js.

This is actually optional.

It assumes that's the default name.

So you don't need a pash the dash dash config value.

Unless you've changed your name for some reason.

But you run that command and this will go ahead and take all the configuration settings you have inside of your Web pack, run them all and then spit out the output, uh, stuff.

So of course, we don't have anything in our Web pack config dot Js file, But I just wanted to show you that a command that you can use.

Okay, uh, next, let's go ahead and run a couple more commands here.

We're gonna continue installing things.

Uh, next we need to install a thing called fibers.

Now, the next couple of things.

Ah, we're gonna be basing our theme off of bootstraps.

We're gonna also be pulling in Bootstrap s.

So let's come down in here going to say in P m install fibers, dust, ash save Dev, and we'll pull that one in, and then we're going to be installing Sass s A s s.

So we'll grab it next soon as this finishes up here.

Okay, then npm install sash and then same thing here into our de fire mint.

And the next couple of things we're going to install are going to be dealing with live reloading.

Are CSS pulling in CSS, the post CSS loader.

A few of the things that basically are required for bootstrap in order to import and customize bootstrap.

We need these little files because we're gonna be working with the raw SAS files and bootstrapping.

These things required.

So in the P m.

Let's see here in stall.

So we're gonna be working with one called SAS Loader.

And here I'm gonna do a couple at once.

We're gonna be doing the node sass lips, and we're going to be doing the CSS CSS loader.

We're gonna need the auto prefix ir the post CSS loader Aiken type this right, It's post CSS dash loader, and we'll save all those two Davis oil, See if I typed all that out, right?

Okay, so this is gonna pull in all these little different packages that it kind of are required for working with bootstrap.

And the next plug in we're gonna grab is one specifically used for pulling out your CSS file and writing it to an individual file.

So Webb, packed by default when it configures and packages of your Java script files, it also takes all of your CSS and at jams that inside of Java script and then hot loads that are pushes that into the browser via Java script within line style, Tex.

So if you don't like all of your CSS jammed inside a javascript, this next little plug in is a plug in that will take your CSS, export it out and write it as a regular dot CSS file, which is how I like it.

So in P m install many dash CSS dash extract, dash plug in saved Deb.

Okay, We'll wait for a second for that.

And, uh, I'll see you have one or two more here, but that will probably do it for now, so Ah, the most of our files are now in place and load it up.

Now, let's go ahead and check the node modules, and you can see just how many things came in from all those commands.

We have all sorts of stuff in here that is packaged as part of all those imports s o.

The one thing here that we are missing is actual bootstrap itself.

So we're gonna end, uh, pull in bootstrap.

Next.

So we do that with in P m install bootstrap.

And this will pull in all of the SAS files, CSS files and also all the Java script files that are required from bootstrap.

Now you can see here when we installed Bootstrap.

It tells us that bootstrap requires a peer of Jake, weary and popper.

In other words, Jake Weary and Popper are both dependencies that are required for bootstrap toe work.

uh, if you're gonna be working with Java script files, so we need to had those files.

So let's go ahead and pull it in those guys.

So in order to do that, we can say in P m install and we're gonna save Dash.

Dash saved Jake weary and popper dot Js.

Now, we're not doing save death here because these need to be These are actually production files that are not part of our development files.

So that's why we're not saying saved up.

Same thing with the bootstrap dependency we just pretty installed.

We want that required package, not deaf package.

Okay, so now we have bootstraps.

So let's go ahead and peek over here at our package dot g.

Ace on file, and we can see kind of what this ah is doing here.

We have a bit of a problem, so it looks like our package dot jace on file is not getting up to and the issue here.

Um, maybe I just have a cold one, so it's just Yeah, there we go.

I was just looking at a hallowed file that was a little confused there, So you can see now are packaged got Jason.

File is updated with quite a bit of things here.

So you can see here is all of our development dependencies, with all these things we just barely added.

And then here's are required dependencies, which were the bootstrap in those two files we just added there as well.

So that is mostly set for our Web pack.

You are sorry, our package dot jace on file.

And now we can go ahead and start the process of building out this theme, importing our files, setting up our web pack file.

So let's go ahead and do that next.

So, ah, let's jump over and create a food few files we need.

So we need to come over here and set up a source file.

So we're gonna set up a new folder that's gonna be source, and this is gonna be the folder that houses are raw assets and inside of source again.

You can really set this and configure this however you want.

Um, I'm just going to set a folder called Java Script.

I'm also going to do a new folder called SAS, which is gonna hold all of our CSS and SAS files.

We're gonna be using to modify and build this theme out.

So that's really all we need there.

And then inside of our JavaScript folder, we're gonna create a new folder called ap dot Js.

So that's going to service the main, uh, file that Web pack looks forward to run its commands.

And then we're gonna do a new file in here also called custom dot gs.

And that's where we'll write any scripts or things like that.

We need to write for our application that we want to import into this main file.

So there's a couple of those boilerplate files.

Ah, Now let's go ahead and set up our SAS files.

We're gonna set up a new file here.

So the first file we're just gonna call main dot s C.

S s.

So this is gonna be the main SAS file that houses all of our imports, were importing all sorts of different CSS SAS files all over the place.