How to set the boilerplate

Step 1. Download the Boilerplate

dmnsgn/gulp-frontend-boilerplate

1)Download the Boilerplate above the link.

2)Rename the folder as you wish.

3)Open up the terminal

cd ~/Sites/nana

cd ~/Sites/nana

cd: Change Directory.

~: This is the starting from very root directory

Step 2. Set up the bolierplate in the terminal.

HomeBrew > Node > npm (Gulp) > npm run

1. Install Homebrew

Homebrew is a package manager which you can install Node from. We can download Homebrew as the screenshot below;

Copy and paste that a Terminal prompt

Installed Completely

+ Find out more about Homebrew?

2. Install node

brew install node

3. Install Gulp : Gulp is a task manager you can download through npm.

npm install --global gulp-cli

4. Run npm

npm run init

• //npm is runing on node.

5. Launch it

npm run dev

It will serve the page on the localhost/IP address.

5. Register Atom

It will open only Atom

atom .

It will open the nana directory containing all the subfolders & subfiles.

I am going to work on the src (source) folder. When gulping, it will compile files into dist folder.

6. Delect Font style

I’m not going to use imported fonts. I’m going to use better way. Let’s just change this line to comment.

*Just let you know

main.scss

Everything starts from main. It is the kinds of the root for Sass. In Sass, you can import other files into main.scss. When gulping, it will compile files into dist folder.

@import ‘node_modules/normalize.css/normalize’;

They said node_modules is plugin. What normalize does is it actually reset all the default style. Browser has a different default style compare to other browser; chrome, safari or firefox… But this specific line remove all the default style. So we can actually start from non-style. We can create our own style. Don’t touch this line.

@import ‘node_modules/sass-easing/_easings’;

Easing is kinds of animation.

dmnsgn/sass-easing

Easing reference

http://easings.net