create account

[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js by cryptogecko

View this thread on steemit.com
· @cryptogecko · (edited)
$1.01
[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js
#### Repository
https://github.com/twbs/bootstrap.git

#### What Will I Learn?
- You will learn to set up the starter pack to help you build bootstrap themes.
- You will learn how to write gulp code to automate simple development tasks.

#### Requirements
1. Desktop/PC
2. Node.js
3. A text-editor
4. Git Bash if you're on windows, or terminal if you're on Linux or Mac

#### Difficulty
Basic - We will be covering every aspect of developing elegant and beautiful bootstrap themes from scratch, so you don't need to have any experience.

#### Tutorial Contents

You can read the introduction of this series here: [Bootstrap 4 From Scratch: Introduction](https://busy.org/@cryptogecko/bootstrap-4-from-scratch-with-cryptogecko-1-introduction). We will be building 5 projects using this starter pack in the future tutorials.

If you do not know what bootstrap is, you can read more about it here: [Bootstrap 4 From Scratch: Bootstrap](https://busy.org/@cryptogecko/bootstrap-4-from-scratch-with-cryptogecko-2-what-is-bootstrap)

<center>![Bootstrap 4](https://cdn-images-1.medium.com/max/1600/1*pRis6DDZP8tKCa_eJG7s1w.jpeg)</center>

##### Glossary
> **Git** - Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source-code management in software development, but it can be used to keep track of changes in any set of files.

> **Gulp** - Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something.

> **Node.js** - Node.js is an open-source, cross-platform JavaScript run-time environment built on Chrome's V8 JavaScript engine that executes JavaScript code outside of a browser.

> **Sass** - Sass (Syntactically awesome style sheets) is a style sheet language

<br/>

Let us first set up our initial environment for bootstrap development. To have a more professional workflow throughout this tutorial series we will be using SASS which is a CSS pre-processor, we will be working with GULP to compile the SASS. So, in order to do this, we will be installing Node.js.

Node.js comes with NPM (Node Package Manager), and it is used to install all the required packages to run our website, including bootstrap. 

I have also installed the Visual Studio Code text editor on my desktop. Now, I would suggest using it. But, it is fine if you use any other editor.

I am also be using GIT BASH, which is a better command line for windows. It is available for Linux an Mac as well, but the terminal provided for these operating systems should be just fine, you do not need really need to install GIT.

This entire tutorial series is going to be cross-platform, which means you don't need to have a particular operating system to follow along.

All right so let's get started, we will build our bootstrap 4 starter pack that we will be using throughout this tutorial series. 

Before we start building our starter pack we have to create a new folder for our pack. So let us first create a folder anywhere on our PC. You can name it anything you like, I will be naming it bs4starterpack. After the folder has been created, you need to open the folder and right click anywhere to access the options, and then you have to open GIT BASH in this folder. Linux and Mac users can use the terminal to follow along, it will work just fine.

The first thing we are going to do is to generate a package.json file, which is like a manifest file, and it is going to hold all the dependencies. We can generate the package.json file using "npm init" command in the terminal. To use the npm command you should have node.js installed on your PC.

This command will ask you a couple questions, if you do not want to see them, you can just type npm init -yes. The yes flag forces the command to generate the package.json file with default values.

Now, we have to install the dependencies for our project, let's type

````
npm install bootstrap font-awesome jquery popper.js --save
````

and run it by pressing the enter button. These are the dependencies we will be needing in our project. The save flag saves the data about our dependencies in the package.json file.

Now, let's install our development dependencies, which include gulp, gulp-sass, which is a plugin to compile our SASS, and then browser-sync, which will allow us to have a development server that autoloads. So for that, we are going to type

````
npm install gulp gulp-sass browser-sync --save-dev
````

because these are our dev dependencies and only needed for the development purpose. So, these dependencies will also be added to our package.json file but as dev dependencies.

After you have installed all of the requires dependencies, your file should look something like this, accept few things:

````
{
  "name": "bs4starterpack",
  "version": "1.0.0",
  "description": "Bootstrap Starter Pack to create elegant and beautiful themes",
  "main": "index.js",
  "scripts": {
    "start": "gulp"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/ravigohel/bs4starterpack.git"
  },
  "keywords": [
    "bootstrap",
    "gulp",
    "sass",
    "themes"
  ],
  "author": "example@gmail.com",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/ravigohel/bs4starterpack/issues"
  },
  "homepage": "https://github.com/ravigohel/bs4starterpack#readme",
  "dependencies": {
    "bootstrap": "^4.1.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.4"
  },
  "devDependencies": {
    "browser-sync": "^2.26.3",
    "gulp": "^3.9.1",
    "gulp-sass": "^4.0.2"
  }
}

````

Now, the last thing we are going to install is the gulp command line interface, and we want to install it globally so that we can access it from anywhere. So we will type "npm install -g gulp-cli", the g flag tells the npm to install it globally.

So these are the dependencies we need for our projects. So what we need to do now is to create a new source folder in our work folder. We will name it "src", and this is where all of our stuff will go, for example, our HTML files, our CSS and sass files. Inside the src folder create a new folder and name it "SCSS", and this is where our sass files will go. SASS is just a CSS pre-compiler that allows us to use things like variables in our CSS, we can nest styles, and the way we are building this, it's going to take our SASS file and just compile it automatically to a regular CSS file to include it in our HTML.

So let us now start working on the gulp file. As I said earlier that gulp is a task runner, and it can be used to do literally hundreds or maybe thousands of different things. We are going to use it for us to compile SASS, we are going to use it to move certain files from the Node Modules folder, like our Bootstrap, CSS files to our source folder. We are also going to use it to run our development server with browser-sync.

So, let's create a new file in our work folder, and name it gulpfile.js, and copy the below code in this file. Don't worry the code is very easy to understand, as the comments written above the code is self-explanatory.

````
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');

// Compile SASS & Inject Into Browser
gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});

// Move JS Files to src/js
gulp.task('js', function(){
    return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/popper.js/dist/umd/popper.min.js'])
        .pipe(gulp.dest("src/js"))
        .pipe(browserSync.stream());
});

// Watch SASS & Server
gulp.task('serve', ['sass'], function(){
    browserSync.init({
        server: "./src"
    });

    gulp.watch(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'], ['sass']);
    gulp.watch("src/*.html").on('change', browserSync.reload);
});

// Move Fonts Folder to src/fonts
gulp.task('fonts', function(){
    return gulp.src('node_modules/font-awesome/fonts/*')
        .pipe(gulp.dest("src/fonts"));
});

// Move Fonts Awesome CSS to src/css
gulp.task('fa', function(){
    return gulp.src('node_modules/font-awesome/css/font-awesome.min.css')
        .pipe(gulp.dest("src/css"));
});

//Run all the tasks
gulp.task('default', ['js', 'serve', 'fa', 'fonts']);
````

In the first three lines of code, we are just bringing in the dependencies we installed earlier, because we will be using them here to automate some tasks.

````
// Compile SASS & Inject Into Browser
gulp.task('sass', function(){
    return gulp.src(['node_modules/bootstrap/scss/bootstrap.scss', 'src/scss/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest("src/css"))
        .pipe(browserSync.stream());
});
````

The first task is compiling the sass files and injecting them into the browser. The way we define the gulp task is to simply use gulp.task command then we name it and then we are using a function that runs. So in the function, we are returning a telling it the source of all the sass files we want it to compile. The pipe plugin compiles the sass files into regular css files and moves the compiled css files to the destination we provided, in this case "src/css". And, the browserSync pluging synchronizes any change made to the sass file, and shows them into our browser.

The same thins is done with the javascript files, we are first telling the gulp task to bring the files and move them to a specific location. We are bringing the jquery, popper and bootstrap javascript files to our "src/js" folder.

Next we are watching any changes made to the sass files or the html files in our src folder. If any change is made to these files, the browser will reload, and then we can see the changes made in the browser.

Next two tasks are bringing in the fonts files to our "src/fonts" folder, and font awesome css files are brought into "src/css" folder.

The last task is calling all the tasks at once and running it. So that when we run gulp, it will run all the default tasks we need. We are passing a parameter of an array of the different tasks we want to run. If you've followed along, you should have installed gulp-cli globally, and now we should be able to run "gulp" in our command line. What it does is, it will go through all the tasks and it will complete them using the instructions given in the ''gulpfile.js" and it will open a development server on port 3000 in our browser.

Now, create an index.html file in the "src" folder, this is where we will be importing the css and js files, and this file will become our homepage in our future projects.

````
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap 4 Starter Pack</title>
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Bootstrap 4 Starter Pack</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, tempora ipsa! Eveniet fuga perspiciatis rem hic cumque asperiores autem inventore nobis! Reiciendis, rerum praesentium temporibus totam dolore magni tempore qui.</p>
    
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>
````

Now, let's run gulp command in our terminal, and you will see that the gulpfile has created a css, js and fonts folder for us to work with.

Now, I just want to prepare this starter pack for our first project. What we're going to do is go to our bs4starterpack and you should get rid of the node_modules folder with the package-lock.json file. You should also remove the js, css, and fonts folders from the src folder, beacuse when we run "npm install" command, these filse will be brought into these folders again. So, you don't need to worry about them. Now, you can save this folder somewhere on your desktop.

#### Proof of Work Done
https://github.com/ravigohel/bs4starterpack.git
👍  , , , , , , , , , , , , , , , , , , ,
properties (37)
authorcryptogecko
permlinktutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack
categoryutopian-io
json_metadata{"community":"busy","app":"busy/2.5.6","format":"markdown","tags":["utopian-io","tutorials","bootstrap","gulp","sass"],"users":["cryptogecko","gmail.com"],"links":["https://github.com/twbs/bootstrap.git","https://busy.org/@cryptogecko/bootstrap-4-from-scratch-with-cryptogecko-1-introduction","https://busy.org/@cryptogecko/bootstrap-4-from-scratch-with-cryptogecko-2-what-is-bootstrap","https://github.com/ravigohel/bs4starterpack.git"],"image":["https://cdn-images-1.medium.com/max/1600/1*pRis6DDZP8tKCa_eJG7s1w.jpeg"]}
last_update2018-10-26 14:05:03
created2018-10-26 11:01:21
active2018-10-29 21:25:24
last_payout2018-11-02 11:01:21
depth0
children4
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.772 SBD
curator_payout_value0.236 SBD
author_rewards972
net_votes16
root_authorcryptogecko
root_permlinktutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation1,149,651,904,714
promoted0.000 SBD
body_length0
reblogged_by[]
author_curate_reward""
vote details (20)
@mcfarhat ·
$8.15
Thank you for your contribution. Below is our feedback:
- If you want to reference bootstrap repo at the start of your tutorial, following our template, use the [official boostrap repo here](https://github.com/twbs/bootstrap)
- As bootstap can be used with any coding language, we would suggest you highlight in the title that you are building this using node.js as your server side scripting.
- I would also suggest you place commands within markdown code syntax, for visually differentiating them in an easier manner, such as 
`npm install gulp gulp-sass browser-sync --save-dev`
- While we liked your work, doing a quick google search yields very similar concepts and codes. We suggest you work on some more innovative tutorials and content.

Looking forward to future more innovative tutorials by you.

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/8/32213414).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
👍  , , , , , , , , ,
properties (37)
authormcfarhat
permlinkre-cryptogecko-tutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack-20181026t124249136z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"links":["https://github.com/twbs/bootstrap","https://join.utopian.io/guidelines","https://review.utopian.io/result/8/32213414","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"}
last_update2018-10-26 12:43:06
created2018-10-26 12:43:06
active2018-10-29 21:25:24
last_payout2018-11-02 12:43:06
depth1
children2
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value6.162 SBD
curator_payout_value1.986 SBD
author_rewards7,733
net_votes10
root_authorcryptogecko
root_permlinktutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation76,023,534,513,760
promoted0.000 SBD
body_length0
reblogged_by[]
author_curate_reward""
vote details (10)
@cryptogecko ·
hello @mcfarhat,

I have made the changes you suggested here. I will make sure that the future tutorials are much more innovative and easy to understand. Thank you so much for reviewing this. :)

I wanted to make one thing clear that, this is an open source project. Where I am trying to create a bunch of templates using the bootstrap that can be used by our community. Cheers!<br/><div class="pull-right promo"><sub><p>This comment was made from https://merasteem.com</p></sub></div>
👍  , ,
properties (37)
authorcryptogecko
permlinkre-mcfarhat-re-cryptogecko-tutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack-20181027t192609263z
categoryutopian-io
json_metadata{"community":"merasteem","app":"merasteem/0.1.0","format":"markdown","tags":["utopian-io"],"users":["mcfarhat"],"links":["/@mcfarhat"],"image":[]}
last_update2018-10-27 19:26:12
created2018-10-27 19:26:12
active2018-10-27 19:26:12
last_payout2018-11-03 19:26:12
depth2
children0
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
author_rewards0
net_votes3
root_authorcryptogecko
root_permlinktutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation1,149,651,904,714
promoted0.000 SBD
body_length0
reblogged_by[]
author_curate_reward""
vote details (3)
@utopian-io ·
Thank you for your review, @mcfarhat!

So far this week you've reviewed 1 contributions. Keep up the good work!
properties (36)
authorutopian-io
permlinkre-re-cryptogecko-tutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack-20181026t124249136z-20181029t212521z
categoryutopian-io
json_metadata"{"app": "beem/0.20.9"}"
last_update2018-10-29 21:25:24
created2018-10-29 21:25:24
active2018-10-29 21:25:24
last_payout2018-11-05 21:25:24
depth2
children0
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
author_rewards0
net_votes0
root_authorcryptogecko
root_permlinktutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation114,034,894,885,138
promoted0.000 SBD
body_length0
reblogged_by[]
@steem-ua ·
#### Hi @cryptogecko!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
**Feel free to join our [@steem-ua Discord server](https://discord.gg/KpBNYGz)**
properties (36)
authorsteem-ua
permlinkre-tutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack-20181026t130635z
categoryutopian-io
json_metadata"{"app": "beem/0.20.7"}"
last_update2018-10-26 13:06:36
created2018-10-26 13:06:36
active2018-10-26 13:06:36
last_payout2018-11-02 13:06:36
depth1
children0
net_rshares0
vote_rshares0
children_abs_rshares0
cashout_time1969-12-31 23:59:59
max_cashout_time1969-12-31 23:59:59
total_vote_weight0
reward_weight10,000
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
author_rewards0
net_votes0
root_authorcryptogecko
root_permlinktutorial-bootstrap-4-from-scratch-with-cryptogecko-3-bootstrap-starter-pack
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
allow_repliestrue
allow_votestrue
allow_curation_rewardstrue
beneficiaries[]
root_title"[Tutorial] Bootstrap 4 From Scratch with @cryptogecko #3 - Bootstrap Starter Pack Using Node.js"
pending_payout_value0.000 SBD
total_pending_payout_value0.000 STEEM
author_reputation18,843,049,539,024
promoted0.000 SBD
body_length0
reblogged_by[]