berlinsky / artemis

A starter kit for a responsive flexbox layout app

Web Application Starter Kit

-- With Gulp, ES6, Browser-sync

Features and Components

1. Compile sass with gulp-sass
2. Add vendor prefixes with Autoprefixer
3. Create SCSS source map with gulp-sourcemaps
4. Compress CSS file with cssnano
5. Lint Javascript with ESLint
6. Transpile JS ES6 / ES7 with Bebelify
7. Create JS source map with exorcist
8. Bundle JS file with vinyl-source-stream
9. Live reload application with Browser-sync
10. Gulp-uglify: only used in production environment
11. Watch changes with watchify for html, scss, and js files
12. Run the default task by invoking gulp
13. Apply rest.scss as the starting point

Web Application Basic Structure

1. Flexbox layout

Import JQuery in ES6 Syntax

  import $ from 'jquery';

Steps to use the starter kit

#1 Clone the project

#2 Install the NPM packages:

npm install

#3 Start the app by running gulp:

gulp