Placeholder Image

字幕列表 影片播放

  • Hi, I'm Andrew from the YouTube channel.

  • 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.

  • We're gonna create a fairly modular layout so that it's easy to sort of find, you know, we'll have a button element is gonna be in our button styles.

  • If we have a card element, it'll be in our cards styles we're gonna be setting are several components.

  • So let's go ahead and set up those folders for the components.

  • So we're gonna set up a new folder here, and we're just going to call this folder app as it's gonna hope house all of the CSS files for our app.

  • We're gonna set up another file here that is called Underscore viers dot es si es eso.

  • This file is gonna hold all of our SAS variables.

  • We'll set up another one here and this one specifically we're just gonna call it customize dash bootstrap dot s C.

  • S s.

  • And this file in specifics is going to house the variables that we're gonna use to override specific things inside of the bootstrap SAS files.

  • So this variable is gonna be our own variables that we do various thing with various things within the customized bootstrap will be spooked straps, specific variables.

  • So what kind of separate those two out like so?

  • All right, so we have our main, we have those.

  • We have our app, and we're gonna be creating inside of our app three folders.

  • So we're gonna be creating a folder called Components That's where we're gonna house all of our various components.

  • We're gonna have another one called pages.

  • This will be a folder.

  • Where will House Page Specific CSS.

  • So, like, if we have a log in page for our admin theme that really doesn't belong with all the other CSS.

  • So that's where we're kind of house.

  • Things like that long in pages.

  • Um, a contact pages, maybe things like that.

  • And then one Maurin here, we'll do a new folder.

  • We're just gonna call this guy vendor, and this is where we'll store any CSS that specifically created to override vendor packages.

  • So, one example we're going to be using here two minutes.

  • We're gonna be using the Pace JavaScript library, which ah, unable to just sort of have a loader to show the load progress of your page as it renders.

  • And it comes with its own SAS files so we can use ah, this vendor folder to sort of override and customize the look and feel and colors of those loading bars.

  • That air package based third party package is so that's where we'll put that type of stuff.

  • Okay, so that's pretty much this set up for our ah SAS folder.

  • So all that stuff's going inside of the SAS folder and we'll be creating all those SAS file, Of course, here in just a minute.

  • Next, let's go ahead and create our front end.

  • So that's just gonna be inside of our demo.

  • And we're just gonna create a new folder here and literally call it a demo.

  • I just don't think I just said that wrong.

  • So this is gonna be like our distribution.

  • A lot of times you see this called Dissed, which is the files that are distributed.

  • I'm just gonna call mine demo again.

  • You can set this up.

  • Really?

  • However you want so inside of our demo, we need a few things.

  • So we're gonna create a couple of folders here.

  • We need a CSS folder, which is gonna How's our output in CSS?

  • We need a fuller here for our fonts.

  • These air gonna be extracted an output from phantasm and we need a new fuller here for our Java script, which is going to be whoops.

  • I think I could do that as a sub folder.

  • I did key Ansel.

  • We want to move it up into demo Yes.

  • And our JavaScript file, Of course, House all of our Jeolla script files that we have.

  • And then we need one file here.

  • New file.

  • We need an actual index dot html file and this file is gonna be our are of course, applications.

  • HTML will live here, so and that's kind of the basic set up for our distribution.

  • Our demo folder.

  • That's really all we need inside of there.

  • Um, if we did have, for example, in our javascript file, we could create a new folder here, and we could call this like, plug ins or something and then all of the external JavaScript that comes from vendors we could stick inside of there if we wanted Thio lead to that.

  • And inside of our JavaScript folder, we now need our output file, which is going to be our app dot Js output file.

  • But Web packs gonna create that force and stick it in there so we actually don't need to create that file.

  • But that's eventually where it's gonna go.

  • It's okay.

  • So all of those files are now in place and let's go ahead and build out our ah html file so that we can begin the process of running Web pack first, see if it actually loads up.

  • So let's go ahead and jump over here now to our source.

  • Fuller, We're gonna come in our Javascript folder here and into our app dot Js.

  • And the first thing we're gonna do is run the import command because we need to bring in bootstrap.

  • That's one of our require dependencies.

  • What?

  • And we need to import everything inside of our SAS folder.

  • So right, everything inside of here we basically want to bring in.

  • So we're gonna say ah dot, dot slash sass is its back a directory from this Java script folder.

  • So hence the dot dot slash Then we need to ah, bring in our custom stuff.

  • So we're gonna import don't slash custom.

  • So that's gonna bring in anything, you know, that we're right inside of our custom stuff and package all that into a single single job script file.

  • So those are the three things we need inside of our app dot Js.

  • So that should be good There.

  • Okay, the next thing we need to do is configure our web pack, shove a script.

  • So we're gonna come in here to wed pack Js and add in all the configuration so we can finally run Web pack it's gonna do.

  • It's being import bootstrap and then create our files.

  • So let's go ahead and add this next.

  • Okay, now there's gonna be quite a bit of code inside of this configuration file, so well, kind of go through it beast by piece.

  • We can't understand this.

  • So the first thing I wanna do is at a constant of path.

  • He cools require path, and this is just what's required here for Web pack.

  • Then we actually need to add another constant for Web pack itself and will I require went back and then we're gonna add another one, and this is gonna be the many CSS.

  • This is the plug in.

  • We added earlier, uh, extract plug in whoops equals.

  • The chances I make a title in any of this are very high.

  • Um, just so you're aware.

  • So this is the plugging that we downloaded is gonna extract our CSS, and then here we're going to do our module thought exports.

  • So this is all the configuration settings for all of the various modules and things like that.

  • Okay, so we're gonna start with the one called DEV Server.

  • So this is basically just key value pairs here in this little ah, it's a chase on type of object.

  • So deaf server eyes going to have the following consideration.

  • So it's gonna have a content base, and then we're gonna say path, not resolve.

  • And this is gonna automatically find the path where this file exists.

  • Us.

  • We're gonna say directory name demo.

  • So it's gonna look for its current directory and then into the demo folder.

  • That's where the depth survey is gonna be served from.

  • We're gonna see compress.

  • True.

  • So it's gonna compress our files.

  • What's this one over here has to be a common not a semicolon because these Darla values and I'm going to say public path is set to demo as well.

  • So, again, this is gonna be whatever you set your minds being served from this demo folder right here.

  • If you call this dissed or something, you would, of course, update these for that.

  • And then right to disk is true.

  • Now, this one got me.

  • Initially, I was having some issues with Web pack where it wasn't updating my SAS files when I would say that kind of looked like it was what?

  • It actually wasn't working.

  • So I had to actually add this flag right to disk.

  • True.

  • And that solved that issue for me.

  • Ah, so that's pretty much it for the deaf server values.

  • So that's gonna make it so that our depth server, you know, uses those values when it serves this.

  • Um, then we're gonna add in here the entry point for everything here is dot source slash Js slash hap thought Js again.

  • This is not standard standard.

  • I think it's just, uh, Kimura was Standard is in next dot job script or something like that.

  • Ah, the output how to put is going to be so the file name.

  • It's just gonna be apt dot jazz for me and the path where I want that guy output is gonna be We can just save path thought resolve again.

  • We'll get it fixed that for me.

  • Directory name, and it's gonna be under demo slash Js.

  • So that's where mine is gonna live.

  • And that's probably nonstandard as well.

  • And the public path variable weaken set, too.

  • Dimel.

  • Whoops.

  • Demo.

  • I actually think the Dev server might use this public path variable when it, uh, does this thing, so I might not need to declare it twice, but Okay, so that's good enough there.

  • Next, let's go ahead and work on the module.

  • So this is gonna be some various rules we're setting up.

  • That's gonna happen.

  • Basically, these are instructions we want web packed to use when we run it.

  • So we're gonna be using this key called Rules, and it's made up of a bunch of configuration values.

  • So the 1st 1 is going to be test, and it's going to be Let's see if I type this radically here again, this is gonna be ah, a miracle.

  • If everything goes off perfectly in the first go by, So s C.

  • S s.

  • I don't need that one.

  • Come on.

  • And then we're going to saying use and use is going to be set up.

  • A bunch of these is well, so the 1st 1 will be this This 1st 1 we're gonna be is the plug, and it's gonna be used to extract the CSS into a separate file.

  • So we're gonna say loader, many CSS extract pull again loader.

  • So that's what we need for that.

  • And then the next one is going to be the loader for the CSS loader, which is gonna load in our CSS the next one.

  • And again, I'll have these files.

  • Ah, somewhere you can download.

  • So copy paste here is really gonna be your friend.

  • But I wanted to kind of go through this piece by piece by piece for I don't know, because I'm crazy for sanity sake.

  • Ah, this next one is gonna be used to process our CSS with post CSS, which I think is actually required to make the bootstrap stuff work.

  • So we're gonna say loader, CSS loader.

  • Uh, sorry.

  • This is the post CSS loader post CSS loader, and we're gonna be passing in a few options here.

  • So the options key and then the first thing is gonna be our plug ins.

  • And then we have a function here.

  • Shun fuckin spelled it correctly, and I'm just going off my notes.

  • Of course, because I don't have all this memorized.

  • Have to look this stuff up return.

  • They were gonna require auto prefix ir and auto prefix ir.

  • Not sure where that's hyphenate today.

  • I think it's that I, between my notes have it.

  • Anyway.

  • Auto prefix ir is the plug in this required for bootstraps SAS files to compile correctly.

  • So that's why we need this.

  • All right, that's it for the post.

  • CSS.

  • Next, we're gonna load up our SAS loader, so we need one more here, and this is going to be our Loder.

  • And this is gonna be our SAS loader to process our SAS files, and that's pretty much most of the way done for Web pack.

  • We just need a couple of little more things down here at the bottom.

  • We're gonna set up.

  • Ah, some code that's going to make it so that our Web fonts get extracted and saves two disc, be the file loader and then set up, um, Jake query what they provide plug in, which is gonna make it so that r J query dollar sign is a global very well, because what pack?

  • I don't think I don't know how it packages your job scripted.

  • It messes up with global variable.

  • So that is going to allow for that.

  • Okay.

  • And that we're going to add it's getting so big, I can't even see That's gonna be added right after.

  • See the rules command.

  • I believe I'm just double checking here.

  • Yeah, so after all of our rules.

  • So this is where the this helps tremendously.

  • The bracket matching, highlighting envious code.

  • So after our rules, we're gonna set up a another section here, and this is gonna be called test.

  • So this is gonna be the thing we're testing for all the Web Pontes.

  • So this is gonna be ah, a little rejects here slash dot A couple of these.

  • Okay, so I'm gonna look b e e o t files.

  • We're gonna be looking for w o FF files.

  • We're gonna be looking for war W o ff two files.

  • We're going to be looking at T t F files for me looking SPG files, and that's it for that.

  • And so all of those files are all of the different ways that font awesome packages its funds because every single browser requires a different font format.

  • It's kind of ridiculous.

  • So they're sort of stored in a 1,000,000 different ways.

  • And then the browser will pick the correct fought, depending on its needs.

  • Correct fund files.

  • Okay, so that's why we need Thio have so many of those.

  • And I do not know what this regular expression means.

  • Somebody else probably does.

  • I grabbed this from, uh I can't regulate this from somewhere, and then, Okay, so that is supposedly the rejects that will do that for us.

  • I'm just double checking my no, here really quick to see if I see any obvious typos.

  • Okay, Now we're gonna say use, and this is going to be so we have here, um, the loader is going to be the file loader, and the options are going to be name will be set to Whoops.

  • Name like this will be set to the name and then the dot extension.

  • So this is how we want our file names.

  • So it's gonna be the name of the extension will come in Just how they found essentially.

  • And then the output path.

  • It's gonna be dark, not slash funds.

  • Now, this is kind of important because it depends on how you where you store your font files, but for where I stored mine in my demo or distribution directory.

  • This is the correct ah path, if you will, in a public path is the same in my case.

  • So essentially one of these store one of these references where the files are and the other one is what actually gets listed in your CSS file when it references the bond family that says, Where's the fun family it's gonna be?

  • Say dot, dot, slash So it's a relative file path based on your CSS files location.

  • So that's a very important to note.

  • Okay, so that's pretty much it for the huh tests.

  • Now we just need at our last two things, which is our, um after our modules, so clear appear so after this guy.

  • Now we're going to load in the plug ins.

  • So plug ins and let's say new gonna load the mini CSS extractor pull again first, and it's going to be passed in the following options file name.

  • And this just dot the slash CSS slash app does.

  • Yes, says so.

  • That's the file name that it's going to create and save that to that location as well when it extracts the CSS.

  • And what's one more plug in here?

  • We're gonna say, knew Web pack dot provide pull again and this guy's going to be passed the options.

  • This is where we're gonna make our global variable.

  • So we're gonna say the dollar sign is for J Query.

  • And also Jake weary like this.

  • Actually, I don't need to be unquote just This is just a key, Jake Query like this is going to be for Jaqui areas.

  • Well, okay, so that I think pretty much does it for that plug.

  • I'm just double checking here because I feel like I am a event.

  • The wrong spot.

  • Yes, I did.

  • So this plug ins goes after the module, not the mud jewel exports added in the wrong spot.

  • So right after this guy, like so?

  • So then I think we are good.

  • But again, the chances of this all compiles correctly is gonna be a miracle.

  • But of course I'll have this file.

  • Listen, you can download if things don't go.

  • Probably easiest since it was to skip to this point in the video.

  • But I wanted to kind of go over that.

  • All right, so we're gonna save.

  • And the one thing I did notice is that I forgot.

  • We need the file loader plug in, and I don't know if I installed that with my last NPM commands s.

  • So we're gonna go ahead and do that right there in P m.

  • Install file loader.

  • Let's see if it's already don't have just added again, so it really doesn't matter.

  • Two.

  • But I don't know if I did that before, so heads up there.

  • Okay.

  • Uh, now we have that web packed file all set.

  • We can actually run the command.

  • I showed you earlier to see if all of that stuff will compile.

  • Now, in order for this to work, we need to set up a index file inside of our demo.

  • So we do have our index dot html, but let's go ahead and set up a little bit of boilerplate code here in this file first.

  • So we'll come in to this index that html file, and we're just gonna just envy s code.

  • If you just do talking hit type, it fills out all that boilerplate for you with the Emmett script.

  • Super Super Nice.

  • So this is really all we need here.

  • Um, for this.

  • The only thing we want to do is we're gonna create also a link, so we'll say leak rail equal style sheet because we wanna link to the style sheet that web packs gonna be creating for us.

  • Uh, h ref is going to be set to CSS slash app dot CSS.

  • I'm actually gonna put a slash in front us because we're gonna be using development silver.

  • So I want that to be route relative and close that guy off And then also where you want to add inside of here down in our footer.

  • Uh, not our foot or really before closing body tag, I guess a link to the Java script file.

  • So script and we're gonna set Theseus ore ce on this one is going to be in dat slash Js slash app dot Js That's the public path for our demo or a distribution folder.

  • And that should be good.

  • So we don't think need anything else in here.

  • Let's just throw ourselves ahead or one tag for a hello world Finally, and let's see if we can get this guy to run.

  • So what we need to do here is now, uh, execute that command.

  • So let's come.

  • I'm gonna try toe back up here in my history.

  • That's the one right there.

  • So MPX West, Pac Dash convicts.

  • So this is gonna make Web pack.

  • Look at our Web pack dot j Saw nor Jason.

  • Everyone say that file.

  • I like Jason personally and then execute all this stuff.

  • So when we hit return here, not return there.

  • Down here.

  • This is gonna have Web pack.

  • Try to do this.

  • So we haven't air It says ah can't resolve source.

  • J s ap dot J s and I think I see the issue here.

  • So if we go to our Web pack file, you can see that I said the source is supposed to be dot slash source.

  • So I had ah, missy to slash their to go into that directory.

  • So let's go ahead and fix that and run it again.

  • So will he return here, See if we gets more errors.

  • So we got another one.

  • Can't resolve dot, dot, slash sass in our job script file.

  • So in this guy, so dot not slash sass.

  • So maybe it's because we don't have any files.

  • Anything inside here, Let's go and try that.

  • Let's add something to our actual SAS file and see if that helps.

  • So let's just say body background color red so We'll say that and come down here.

  • I don't think this is good.

  • Solve this issue.

  • All right, listen, Charles, you tater okay?

  • The issue here is that we can't just go to a folder.

  • I need to specify file, so I'm gonna come to slash slash main dot s e s s so that should come in and grab that main file.

  • So let's come down here and run web back again.

  • Okay, We have some more errors.

  • Let's track these down 1st 1 says cannot find module auto prefix ir.

  • So Ah, we possibly spelled that home so earlier.

  • And the came up with the auto prefix air hyphenated eso.

  • Let's try that and run this again.

  • Right?

  • You found the issue here.

  • Uh, so the thing is, this does auto prefix or does need to be included without a hyphen.

  • Like my notes, the problem is earlier when we installed the N.

  • P.

  • M.

  • Apparently there's two packages ones auto dash prefix her and the other one's just auto prefix ir.

  • I installed the one with the dash, which is incorrect.

  • We need the one without the dash.

  • So you need to install auto prefix ir without a dash back at Save Dev.

  • Then once you have that guy installed, let's just go ahead and run Web pack here again one more time.

  • You can see now it runs through everything without a problem, and it compiles out.

  • So let's go ahead and see what Web pack did for us.

  • So we're gonna come over here to our output.

  • So it's coming to demo.

  • You can see that we haven't app dot Js file that Web pack has created for us with tons and tons of stuff.

  • So we have in here.

  • This is basically all the Java script that is from Bootstrap.

  • You can see here says, Oh, there's all sorts of things in here, but bootstraps job scripts In here we have our CSS.

  • So it compiled and modified our CSS body background color red, and everything is good to go.

  • So inside of our source.

  • Whoops.

  • Our demo.

  • We have all of that stuff in place.

  • Now, the one thing we need to add inside of our output folder is a place for our web fonts.

  • So we're eventually going to be adding in here, uh, to our demo.

  • We'll just create a new folder right here.

  • We're just gonna call this guy spots because this will be housing.

  • Um, all of the funds so perfect that actually worked.

  • So now what we can do is we can use in p.

  • M.

  • So instead of having to type this command every single time Ah, we can make it's so that we could just say in P m Ron build and everything will sort of flow for us.

  • So what we have to do is we're gonna come back to our packages dot j Saw on file now, and we're gonna come up here to our ah scripts section, and we're gonna add a couple of things right here.

  • So we're going to add in the one called Build, and it's going to execute the command ***.

  • And then if we have one called start Dev, we'll say this guy is going to execute the command Web pack Dash Dev Dash server for us.

  • Okay, So in other words, we can come down here to our terminal and let's go ahead and clear this out.

  • Whoops.

  • Not there.

  • So we can say Web pack because we installed this module earlier, Dev Dash server and hit return.

  • Oh, we don't have to insult a wimp active, sir.

  • Sure, we did have installed so many things I can't remember.

  • Um, let's go ahead and just double check that really quick and okay, We definitely did.

  • So, uh, what the problem was I was using the wrong command.

  • So the command we eat is actually this It's known modules slash dot Been slash Weap active server.

  • So we have to go to the right directory for real.

  • Execute this command.

  • So when we do this command, this will launch this death server here.

  • So what the depths server does is it launches a server.

  • You can set up some of these things, but notice how it's being served for my slash demo.

  • That's my distribution folder automatically for me.

  • And then it sets up a little deaf server.

  • So I can just copy this and we'll pull up fire fox here and just paste that in there.

  • And you can see that.

  • Sure enough, it's pulling up everything from my dessert.

  • So there's my index, such my CSS fonds javascript, and it's all sitting right there, as you would expect, so that is pretty slick.

  • Now, typing that command over and over and over again, right?

  • Every single time Now, typing that command over and over and over gets a little bit cumbersome.

  • So what we can do is I'm gonna gonna get out of that Deva server.

  • That's why we added this command right here.

  • So we can say in P M Ah, run, build.

  • And then we say start death.

  • And now when we do that, we couldn't error as I typed it wrong.

  • It's in p m.

  • Uh, run, not build start of its build on the other one.

  • Okay, so we can just run that command that will automatically execute the web pack Dev Silver Command up here Starter Dev Server.

  • Everything launches up, creates all of our files and everything is going to go.

  • So now we can just again jump over here to the Dev Server and it should be up and running Perfect.

  • So the one issue here is you can see in our route.

  • This should be bringing up my index dot html file, which it's not.

  • So we need to jump back here to V s code and just double check that we place that in the right spot and we did not.

  • In fact, I have no idea of where we put that.

  • I don't see it anywhere.

  • I'm pretty sure they redid.

  • We created it in the wrong, uh, in the wrong area.

  • So inside of our source.

  • Oh, what?

  • I did it.

  • I did a bunch of that stuff wrong earlier.

  • So we ah, we're just not paying attention to where I was creating those folders.

  • But our index are Java script are fonts.

  • All these guys should have been up inside of the CSS um, Demo folder way up here, So Ah, let's just fix this easily.

  • Um, we can probably There's nothing Indian if this stuff is there.

  • No, Let's just delete this one altogether.

  • So will fix this by just deleting this demo.

  • We're gonna grab this demo and move it up.

  • Not into node modules.

  • Maybe I can move it up.

  • I thought this would be easy right there.

  • Move.

  • Okay, so now our demo is back at the root.

  • It has its CSS fonds job script.

  • Okay, let's try this again.

  • So I'm gonna get out of the Web server.

  • Here's come down the bottom and let's just run that same command one more time.

  • So this should package everything up.

  • Launch our Debs server.

  • Let's just double check that it created files.

  • Sure enough, that created our CSS file.

  • It created our app.

  • There is that file R J s.

  • So that's looks like it's working correctly.

  • There's our index file is sitting inside of there.

  • So now if we go over here and refresh, there we go.

  • We're now finally seen the root of our app with our hello world and our red background color.

  • So that was about an hour of just setting up in configuring everything to actually then begin the process of developing our custom theme.

  • So now we're going to be adding in a whole bunch of CSS and some boilerplate to build a fairly robust admin theme.

  • And the admin theme I'm using is I've taken a lot of the ideas off of, Ah, another admin theme and use some of the CSS.

  • But I've also heavily customized to kind of fit my needs so linked to that down in the description for the basing that I'm basing this off of.

  • But let's go ahead and get started with that next.

  • Okay, now that everything is working for us here in our deaths ever.

  • Let's go ahead.

  • And now import Ah, in tow are SAS file off the bootstrap files will set up a very basic page, and then we'll be off to the races to create this full theme.

  • So back over here, we're gonna open up our main SAS file in our source and do some imports so we can go ahead and delete this rule.

  • We added earlier, we'll just ah, had in our little, uh, doc block here with, um but that would actually be s headed thing for that.

  • But it doesn't.

  • It does.

  • Eso we'll just say this is going to be our h Q admin theme.

  • And we could give ourselves an author, Andrew Wilson, and we can give us sells a you earl.

  • He s calling slash slash youtube dot com slash channel slash follow Andrew.

  • Anyway, you get the idea, right, So we can add in here to top.

  • Um, whoops.

  • Some of that stuff.

  • Okay, So ah, the first thing where you need to import his bootstrap itself.

  • So we're gonna just gonna do a couple comments like this.

  • So we're gonna say at import.

  • This is the sass now we're gonna import are variable.

  • That s CSS file.

  • We're going to import the customize bootstrap dot es CSS file and then we're going to add import the bootstrap itself.

  • So bootstrap S E s s s C s s hooch trap.

  • So basically, this is gonna look inside of the node module.

  • So we come over here, we confined the bootstrap files right here, and you'll see inside of there s CSS file.

  • Um, this is what it's gonna be.

  • It's gonna import all of this jazz.

  • So they have a bootstrap file in here, right?

  • This is what we're importing, and their file imports a 1,000,000 1/2 other bootstrap files.

  • So we're importing right Tom's and tons and tons of SAS files.

  • Ah, that is what that line does.

  • So that is getting us all the bootstrap files.

  • Next thing we need to do is import font.

  • Awesome.

  • So this is kind of a little bit strange here, but it's very powerful, so we're gonna say FAA we're creating a variable called FAA font path, and we're just going to set that to the path for font possums, web fonts, older.

  • So we're going to say at Fort awesome slash font Awesome dash free slash s C S s slash font awesome dot s e s s Okay, So that is tthe e.

  • Uh, that's not their height path.

  • Sit.

  • Is font awesome?

  • Dash free slash weapons.

  • We got too excited, but once.

  • Okay, so that's the path there.

  • And now we're gonna at import.

  • Essentially.

  • Now, we can, uh, copy this and kind of use part of it here.

  • So the S e s s slash front.

  • Awesome.

  • That s CSS font.

  • Awesome.

  • Five version five, which is what we're using.

  • It's quite a bit different inversion for it splits off all of the different fonts into four or five different CSS files.

  • We need to import each one of those in addition to the main font.

  • Awesome file.

  • So I'm just gonna copy this, and we're gonna go 123 more times.

  • So they have one called regular.

  • They have one called, uh, ran's, which is things like facebook icons, google icons, brand icons.

  • And then they have things called solid, which you're solid icons.

  • And if you have noticed that every time I'm hitting command s it's doing its thing right.

  • It's running this and just re compiled everything from scratch.

  • So that's pretty cool.

  • Ah, now we are going to.

  • So just to prove this, if we go over here and look at our demo file and now look at our app dot CSS Notice how it's much, much larger now, right?

  • This is all the boots draft stuff we're seeing inside of here.

  • There's all the font awesome stuff we're seeing inside here.

  • So it's just importing and compiling everything down, which is very, very handy s so that's it for funds.

  • Awesome.

  • On the next thing we want to do is, uh, just also to illustrate this.

  • If we look in our demo folder now, if I open up my fonts now that I'm importing font awesome.

  • Noticed there is all of the various actual font files themselves that will be served with the font.

  • Awesome.

  • So that's what that, um, file extractor we did inside of our web pack right down here.

  • So we tested for all these different files and then extracted them with the file loader and then stuck him all right there.

  • So that's what that little configuration setting did for us, which is really, really cool font awesome.

  • Five is, actually, but I think more trickier toe customize and to use on your own like this, but it's doable with some of these tricks.

  • All right, next section here, we're just gonna call this section are app layout.

  • So here, we're gonna at import, And this is the files that will be creating.

  • So we're gonna say app, slash components slash app.

  • So again, this file is an exist yet, but we'll be creating a master CSS file for our app on notice.

  • We got an error right there when it tried to compile because of this does not exist.

  • So we will go create it.

  • So it's open up app and we will create this file inside of our components.

  • New file ap dot s.

  • C cess underscore that and was try to let's just do a ruling here.

  • Well, I'm gonna be overridden by a lot other CSS.

  • Let's try a body just to see if this is working background dash color green.

  • And we'll add an important on this to try to override everything and save.

  • So that looks correct.

  • And let's see if this is actually working now, so it failed to compile.

  • So let's go ahead.

  • And it's from this Deb server again.

  • See if it compiles. 00:

Hi, I'm Andrew from the YouTube channel.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

通過創建一個自定義的管理主題來學習Bootstrap - 中級教程 (Learn Bootstrap by creating a custom admin theme - Intermediate Tutorial)

  • 1 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字