Bootstrap 4 by Example - Installation & Dev. Environment

hey everyone Gary Simon here welcome to this 100% free brand new course on learning bootstrap for by example now why learn by example well personally that's how I really learn best I don't like those courses they're all fundamental based and then last for hours I like to learn by example and to actually learn by doing so what we're going to be doing is first outlining you know how do we integrate bootstrap for and its various ways to do that and then throughout the rest of the course we're just going to learn by doing and it's going to really give you a lot of confidence going forward alright so in this initial part we're going to go ahead and do a preview and a look at the project that we're going to learn how to build with bootstrap for all right let's get started oh but real quick before we begin make sure you check out my site course cetera com where you're going to find a bunch of courses on modern design and development a lot are free and others you can access for the cost of buying me like expect each month that did now also it probably wouldn't hurt to subscribe here on YouTube to be sure to make sure the notifications are turned on alright let's get back to it alright let's go ahead and launch our project that I will show you how to build 100% okay so this is the layout that we're going to be building from scratch using bootstrap for now as you can see we have a nice hero section here then some secondary supporting content that will help us understand the grid system which it's also using font awesome icons as you can see and also from here we have a form section at the bottom now if we take this browser and shrink it in will see that it is fully responsive and of course our navigation works as well and even though this isn't like a massive layout with a ton of content we're going to be covering a lot of ground as it pertains to bootstrap for so you're going to learn how to integrate bootstrap for with a modern development workflow structured with gulp which is a JavaScript task runner don't worry if you've never heard of it before I'll explain it you're going to learn how to customize bootstrap for sass settings and ultimately how to use the power of bootstrap for classes to minimize the amount of CSS that you need to write so let's go ahead and get started now like other similar frameworks you're able to install bootstrap for project through two different methods now one is quick and dirty and the other on is most preferable but it takes a bit more time now the key differences between each of these methods is the time it takes to get started versus the file size and loading time and there are a couple other differences that we will take a look at shortly so the quick way and this is method is the most ideal when you're working on a prototype or a wireframe it allows you to quickly and easily get up and running with bootstrap or by simply copying and pasting literally four lines of HTML onto a page now the downside to this method is a lack of customization options as it's strictly CSS and not sass and also load times now when you use this method you're importing the entire bootstrap library which is almost always unnecessary this results in unnecessary file sizes thus longer load times now still if you're working on a prototype or a project where the load time isn't a factor this is the quickest way to get started so assuming you have an HTML page you simply copy and paste the following line between the head tags and then you include the necessary JavaScript includes just before the closing body tag and that's it so you're now able to write HTML and Haunter and harness the power of boot shop for now in this course however we're not going to use this method we're going to set up a more robust development environment and use the sass version of bootstrap for all right so again bucho 4 it comes in two different flavors it's straight up CSS which is what the CDN uses method that we just discussed uses and sass now sass is a preprocessor processor that allows you to write more dynamic CSS and then takes this sass CSS and compiles it down just to standard CSS so bootstrap for sass allows you to make more customizations and choose which elements of the bootstrap four framework you would like to include based on your project projects needs so this ultimately leads to a reduced file size which is necessary for your websites or apps performance so a popular package manager is NPM or the node package manager and you're going to need to install nodejs which includes the node package manager so if you've never installed before you go to node.js or you click on downloads and we choose Windows or Mac installer and you download it and just run through the typical setup process and then once that's done you can load up your command line and you could type in NPM pipe and V and it will give you a version number all right so assume you have it installed and you're all ready to go let's go ahead and create a directory so m'kay derp game layout alright now we're going to CD into it alright great so here we've created a new folder now let's go ahead and type in NPM and knit to create a package.json file so NPM in it alright now it's going to prompt us with a series of questions now I'm going to just hit enter for all these alright so now we're back at our prompt here alright so the purpose of this package a JSON file is that it creates a configuration for our project so when we install bootstrap 4 for instance it's going to add a package name along with the version to this file and that way in the future if you need to install this project on another environment such as a server you can run NPM install and it will download all the necessary packages and dependencies based on this package dot JSON file alright so let's go ahead and install bootstrap for with p.m. install so let me clear this out and I type an NPM install bootstrap and right now it's at alpha six so I'm going to put in an at four point zero point zero - alpha dot six and then we're going to add two dashes and save which will save it as a dependency in our package JSON file alright as you can see it's very quick and so also at the time of writing this by the way bootstrap four may be officially released or maybe perhaps it has come out with another alpha or at least command it candidate so you can just google bootstrap for in see which version it's at and you can install that as needed okay now if you hop it into a code editor I'm using Visual Studio code which is a hundred percent free and google it and download it and we're in our game loud folder and we can see we have our package adjacent that the npm init command ran notice under dependencies we see bootstrap with the version number and then we also have a node modules folder with three different folders inside of it so first we have bootstrap and this contains the CSS and sass version of our bootstrap 4 we also have jQuery which is used by bootstrap in various components and then we also have tether which is a library for element positioning so each of these folders must be added to our project but we don't currently have a project to work with so in the next section that's what we're going to work with and get set up is a development environment alright so we already have a project with bootstrap integrated so let's create a more robust environment that we can use while we work on our bootstrap for project so in the project root folder we're going to create a new folder called source so let's collapse this we're going to create a new folder here we'll call this SRC alright and inside of we're going to create four more folders so with that folder selected we'll create a new folder here called assets and this is where our graphics and such will go we'll also create another one called CSS this is where our compiled CSS will go we'll also create another one called s CSS which is the sass file extension that we will use and then finally we'll create another one called J s for JavaScript all right so now what we want to do is inside of the source folder we're going to create a new index.html alright so come out here new file index.html alright so oops currently that is not in source make sure that's in source there we go and now for the written version of this tutorial or this lesson you can go ahead and copy I'll provide that in a project files if you're not watching this in YouTube for instance and paste this right here alright so there's a few things happening that's worth mentioning so let's go ahead I'm going to hit ctrl B to get rid of that sidebar so everything is pretty much standard here we have our head and inside of here the parts to really pay attention to are right here and so the first one is we're importing a Google web font right here called railway so that's what we're going to be using and then also we have font awesome right here which provides you with very easy to use icons we'll be using that we're also referencing I forward slash CSS bootstrap CSS of course this file doesn't exist currently and then also a style dot CSS which is where some custom CSS rule sets will go and then inside of our body just before the closing body tag is our JavaScript references so we have jQuery which is required for bootstrap for we have tether which is also required and then of course we have bootstrap Minjae s all right so of course this these files right here don't exist yet and neither do these two files so what we need to do in order to remedy that is before we get to that portion actually I'm jumping ahead we're going to go create another file in our s CSS or sass folder we're going to call it here style dot s CSS and inside of it we're going to create a variable and a simple rule set for the body so the variable is BG color I'm just setting it to blue and then in the body in the background we're setting it to this variable right here so the background of our website will be just this standard you know kind of ugly blue and blue color and this is just for test test purposes just to make sure that the SAS preprocessor is working and I converting how we want it to so that leads us to the next section all right and that's working with gulp all right so gulp is a Java Script task runner and it's going to help us solve this empty folder issue along with SAS compiling in life browser reloading so to get started we have to hop back into the command line and use NPM so let's go ahead and save these two files here by the way all right so what we need to do is use NPM to install gulp with browser sync as well and another package called gulp - sass and then we're going to save it as a development dependency all right so hit enter and let that run through all right so once that's finished let's go ahead and hop back into our code editor and for our code editor we're going to take a look real quick and back in the node modules remember there was just three folders there before well now there are after refreshing many many many more as you can see these are all other packages that those three packages that we installed rely on and of course you'll find in here somewhere embedded in here you'll find the gulp and the goal as and the other package that we installed so that command that we're in for NPM install you know all it does is just place a bunch of folders inside of the net node modules folder that we saw so we actually have to to use gulp we have to create a gulp file TAS in the projects route so I will just click on package real quick make sure we're in the project route and I'll create a new file called gulp file Jas ok so the first thing we need to do is create variables that reference the three packages that we just installed so again following the written version of this tutorial I'm going to paste in those three right here so the way this is set up is we have a bar gulp browser sync and sass and we're using require and this is a reference to the actual folder name of the package name that's located in node modules all right simple enough now of course if you've never really touched gulp or even much Java Script this is going to look a little bit foreign but don't worry with a little time and persistence you'll be able to understand it so the next thing that we have to do is create a task so gulp is setup you know once again it's a task runner so the first thing we need to do is to take our sass files and convert them into CSS that a browser can actually read so to do that I'm going to create a task here and I'm going to paste this right in alright so the first thing we use the gulp task method and we're naming this particular task tat sass right here sorry I'm kind of losing my speech there inside of it we create a function inside we return a gulp dot source method and all this here is just telling us is where is the location of these sass files that we want to work with so we're passing an array because we have two different locations so we have our node modules bootstrap a CSS bootstrap CSS version so this is the bootstrap sass and then also separated by a comma we have a source in our SSS folder which we created and then we're saying we're using the wild-card asterisk to say any sass file inside of this SCSS right there we could if we know if we knew we are only working with one file for instance we could just make this style SDSS which is the name that we gave it up here and then after that we used a pipe method to say okay next what we want to happen is we're going to actually use sass which will convert this sass into CSS then we use another pipe to say that next what we want to happen we want to take that result and we're going to use gulp destination or D est and this is where it's going to take that CSS that it just created or compiled and it's going to place it in a source CSS folder which again we created and then we're going to use a bi pipe here for browser sink which is in reference to this variable up there and dot stream and this will notify the browser and we'll reload okay so hopefully you kind of get it we not done yet though we have to you know because bootstrap 4 does use JavaScript we're going to take the JavaScript and necessary JavaScript files from the bootstrap and also jquery folders also tether as well and we're going to move them into the GS folder that we created so the next section on the paste is right here so we're creating a task called j/s we're going to return at the gulp source so again the same thing as up here we're just referencing the location of these Jas files so we have the bootstrap file jQuery and tether right here then we're just saying we're not actually doing anything to it we're not running any type of minification or whatever which you can if you want we're just moving it into a source J's folder and then again we're running this here to notify the browser all right and then finally we have two more tasks to create the first one right here this is a task called serve and we're passing in this time in the second argument we're passing in an array which just contains a reference to SAS so SAS will run automatically when serve is ran you'll see how that works momentarily then we're using browsersync dot in it to initialize a server that's starting in our source folder so this is a local static server that will run on localhost 3000 you'll see that momentarily as well and then we have gulp watch right here we have two of these that's going to watch our bootstrap file if we make changes or any changes as well in the source s CSS folder that we're going to be writing in so every time we make an update where we save it it's going to reload the browser essentially and that way we don't have to mainly hit refresh and we're also it's also going to run SAS the SAS tasks up here and then also if we make change to HTML on any type of change and if we update it or save then we're going to reload the browser okay then finally just one line down here is called tasks the default gulp task means if somebody if we just type in gulp in the command line then what's going to run well two different things that we specified here in this array we have a j/s task in the serve task so when we run gulp it's going to start the server it's going to launch our browser and it's also going to run this j/s here to move files from node modules into our source j/s folder so let's save it and let's go back to the command line and we did everything correctly this should work so let me clear this and just type gulp alright and there we go so your browser should load up if I hit control shift I make sure you go to console there's no errors that means bootstrap is now fully loaded and ready to go

Channel: DesignCourse

Views: 72,897

Keywords: bootstrap 4 tutorial, bootstrap 4, bootstrap 4 course, learn bootstrap, bootstrap tutorial, bootstrap course

Id: UAHfAbc8JkY

Length: 19min 44sec (1184 seconds)

Published: Wed Jun 07 2017