Setup process node, npm, gulp tasks, scss lint, bourbon, neat

nodeJS, npm, gulp tasks

Installation

1. https://nodejs.org/en/
2. Download
3. Install
4. Check if node and npm are available in Command Prompt. Restart Command Prompt if it was open before/during installation. 1. Run node –v 2. Run npm –v
   
5. Navigate(in Command Prompt) to your project folder where "package.json" is("starter-template" folder in "front-end-toolkit" repository’s case)
6. Run npm install. Wait for installation to complete. "node-modules" folder should be created during installation.
7. Run npm list --depth 0 to see if everything is installed.
   
8. Use gulp
9. Run gulp --tasks to see available tasks
10. Choose task and run gulp <task-name>, f.e. gulp watch-all
    

WebStorm interface and Gulp Tasks

1. Ability to add gulp tasks interface in case gulpfile.js is not in project root
2. Gulp tasks interface
3. You can run commands in terminal

SCSS lint

Installation

1. http://rubyinstaller.org/downloads/
2. Download
3. Start Installation
4. Check "Add Ruby executables to your PATH"
   
5. Install
6. Go to Command Prompt, run ruby -v, run gem -v
   
7. If gem -v fails, you might need to install rubygems - https://rubygems.org/pages/download
8. Run gem install scss-lint
9. Run scss-lint -v to check if it is installed
   

scss-lint setup in WebStorm

1. Download plugin
   
2. Set scss-lint executable location
   
3. Choose config or use the one in project root
4. Results:
   

For use in console

All steps for Windows, jump to step 5 on other OS:

1. http://rubyinstaller.org/downloads/ ruby devkit for windows
2. Extract
3. cd to directory
4. Run ruby dk.rb init
5. Run ruby dk.rb install
6. Run gem install windows-pr
7. Run gem install win32console (needs ruby devkit)
8. Run gem install rainbow (needs win32console & windows-pr) (required for colorful output on Windows)
9. Run in console or WebStorm terminal scss-lint scss/site
10. Results:
    

Config contents(.scss-lint.yml)

linters:
  Indentation:
    width: 4

Bourbon

http://bourbon.io/

@import 'bourbon';

Settings

Should be set before @import 'bourbon'; in order to take effect

For Helper Functions such as em(), rem()

$em-base: 14px; - This should be the same size as your body font-size. Setting default is 16px.

Neat

http://neat.bourbon.io/

@import 'neat';

Settings

Should be set before @import 'neat'; in order to take effect

Recommended

$border-box-sizing: false !default; - to prevent html {box-sizing: border-box;} *, *::after, *::before {box-sizing: inherit;}

Column Settings

$gutter: 1em; - http://thoughtbot.github.io/neat-docs/latest/#gutter

$max-width: em(1200px) !default; - http://thoughtbot.github.io/neat-docs/latest/#max-width

Visual Grid

Useful for debugging

$visual-grid: true !default; - http://thoughtbot.github.io/neat-docs/latest/#visual-grid