Initial setup

.babelrc

@@ -0,0 +1,4 @@
+{
+  "plugins": ["transform-runtime"],
+  "presets": ["es2015", "stage-0"]
+}

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,189 @@
+{
+  "ecmaFeatures": {
+    "arrowFunctions": true,
+    "classes": true,
+    "generators": true,
+    "modules": true,
+    "superInFunctions": true
+  },
+  "env": {
+    "browser": true,
+    "amd": true,
+    "es6": true,
+    "node": true
+  },
+  "globals": {
+    "arguments": true,
+    "window": true,
+    "gapi": true,
+    "angular": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "arrow-parens": 2,
+    "arrow-spacing": [
+      2,
+      {
+        "before": true,
+        "after": true
+      }
+    ],
+    "brace-style": [
+      2,
+      "1tbs",
+      {
+        "allowSingleLine": false
+      }
+    ],
+    "comma-dangle": [
+      1,
+      "never"
+    ],
+    "comma-spacing": [
+      1,
+      {
+        "before": false,
+        "after": true
+      }
+    ],
+    "comma-style": [
+      2,
+      "last"
+    ],
+    "consistent-this": [
+      2,
+      "self"
+    ],
+    "constructor-super": 2,
+    "curly": 2,
+    "default-case": 2,
+    "dot-location": [
+      2,
+      "property"
+    ],
+    "eol-last": 2,
+    "eqeqeq": [
+      2,
+      "smart"
+    ],
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "key-spacing": [
+      1,
+      {
+        "beforeColon": false,
+        "afterColon": true
+      }
+    ],
+    "max-nested-callbacks": [
+      1,
+      4
+    ],
+    "new-cap": 1,
+    "new-parens": 1,
+    "newline-after-var": [
+      2,
+      "always"
+    ],
+    "no-array-constructor": 2,
+    "no-class-assign": 2,
+    "no-cond-assign": 2,
+    "no-const-assign": 2,
+    "no-constant-condition": 2,
+    "no-delete-var": 2,
+    "no-dupe-args": 2,
+    "no-dupe-class-members": 2,
+    "no-dupe-keys": 2,
+    "no-duplicate-case": 2,
+    "no-else-return": 1,
+    "no-empty": 2,
+    "no-eq-null": 2,
+    "no-eval": 2,
+    "no-ex-assign": 2,
+    "no-extend-native": 2,
+    "no-extra-boolean-cast": 2,
+    "no-extra-parens": 1,
+    "no-extra-semi": 2,
+    "no-floating-decimal": 2,
+    "no-func-assign": 2,
+    "no-implied-eval": 2,
+    "no-inner-declarations": 2,
+    "no-lonely-if": 2,
+    "no-loop-func": 2,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multi-spaces": 1,
+    "no-multi-str": 2,
+    "no-multiple-empty-lines": [
+      1,
+      {
+        "max": 2
+      }
+    ],
+    "no-negated-in-lhs": 2,
+    "no-nested-ternary": 2,
+    "no-new": 2,
+    "no-new-func": 2,
+    "no-new-object": 2,
+    "no-new-wrappers": 2,
+    "no-obj-calls": 2,
+    "no-redeclare": 2,
+    "no-script-url": 2,
+    "no-self-compare": 2,
+    "no-spaced-func": 1,
+    "no-sparse-arrays": 2,
+    "no-this-before-super": 2,
+    "no-trailing-spaces": 1,
+    "no-undef": 2,
+    "no-undef-init": 2,
+    "no-underscore-dangle": 2,
+    "no-unexpected-multiline": 2,
+    "no-unneeded-ternary": 2,
+    "no-unreachable": 2,
+    "no-unused-vars": 1,
+    "no-use-before-define": 1,
+    "one-var": [
+      2,
+      "never"
+    ],
+    "quote-props": [
+      1,
+      "as-needed"
+    ],
+    "quotes": [
+      2,
+      "single"
+    ],
+    "radix": 2,
+    "semi": [
+      2,
+      "always"
+    ],
+    "semi-spacing": [
+      1,
+      {
+        "before": false,
+        "after": true
+      }
+    ],
+    "keyword-spacing": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [
+      2,
+      "never"
+    ],
+    "space-infix-ops": 2,
+    "space-unary-ops": 2,
+    "strict": 0,
+    "use-isnan": 2,
+    "wrap-regex": 2,
+    "yoda": [
+      2,
+      "never"
+    ]
+  }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.tmp
+dest

README.md

@@ -0,0 +1,9 @@
+# Vue.js Material
+
+## Introduction
+
+## Still in development
+
+## License
+
+MIT

gulpfile.babel.js/config.js

@@ -0,0 +1,32 @@
+import path from 'path';
+
+let gulp = {
+  path: 'gulp',
+  scripts: [path.normalize('gulpfile.babel.js/**/*.js')]
+};
+
+let src = {
+  path: 'src',
+  assets: path.normalize('src/assets'),
+  files: path.normalize('src/**/*.{txt,xml,html,json,jpg,png,gif,svg,ico}'),
+  images: path.normalize('src/**/*.{jpg,png,gif,svg}'),
+  imagesFolder: path.normalize('src/assets/images'),
+  html: path.normalize('src/**/*.html'),
+  scripts: path.normalize('src/assets/scripts/**/*.js'),
+  stylesheet: path.normalize('src/assets/**/core.scss'),
+  stylesheets: path.normalize('src/assets/**/*.scss')
+};
+
+let dest = {
+  path: 'dest',
+  scripts: path.normalize('dest/assets/scripts/**/*.js'),
+  images: path.normalize('dest/**/*.{jpg,png,gif,svg}'),
+  imagesFolder: path.normalize('dest/assets/images'),
+  stylesheets: path.normalize('dest/assets')
+};
+
+export default {
+  gulp,
+  src,
+  dest
+};

gulpfile.babel.js/index.js

@@ -0,0 +1,36 @@
+import runSequence from 'run-sequence';
+import gulp from 'gulp';
+import './tasks/clean';
+import './tasks/copy';
+import './tasks/browserify';
+import './tasks/sass';
+import './tasks/eslint';
+import './tasks/watch';
+import './tasks/uglify';
+import './tasks/report';
+
+gulp.task('default', () => {
+  runSequence(
+    'clean',
+    [
+      'browserify',
+      'eslint-all',
+      'sass',
+      'copy'
+    ],
+    'watch'
+  );
+});
+
+gulp.task('build', () => {
+  runSequence(
+    'clean',
+    [
+      'copy',
+      'browserify-build',
+      'sass-build'
+    ],
+    'uglify',
+    'report'
+  );
+});

gulpfile.babel.js/tasks/browser-sync.js

@@ -0,0 +1,32 @@
+import _browsersync from 'browser-sync';
+import gulp from 'gulp';
+import config from '../config';
+
+let browserSync = _browsersync.create();
+
+gulp.task('browserSync', () => {
+  browserSync.init({
+    notify: false,
+    logLevel: 'silent',
+    logSnippet: false,
+    port: 9000,
+    ghostMode: {
+      clicks: true,
+      scroll: true,
+      links: true,
+      forms: true
+    },
+    server: {
+      baseDir: [config.dest.path]
+    },
+    ui: {
+      port: 9001,
+      weinre: {
+        port: 9002
+      }
+    },
+    watchTask: true
+  });
+});
+
+export default browserSync;

gulpfile.babel.js/tasks/browserify.js

@@ -0,0 +1,90 @@
+import gulp from 'gulp';
+import util from 'gulp-util';
+import uglify from 'gulp-uglify';
+import path from 'path';
+import watchify from 'watchify';
+import babelify from 'babelify';
+import envify from 'envify/custom';
+import vueify from 'vueify';
+import xtend from 'xtend';
+import prettyTime from 'pretty-hrtime';
+import browserify from 'browserify';
+import uglifyify from 'uglifyify';
+import source from 'vinyl-source-stream';
+import buffer from 'vinyl-buffer';
+import config from '../config';
+import browserSync from './browser-sync';
+
+let app = 'main.js';
+let entry = path.normalize(config.src.path + '/assets/scripts/' + app);
+
+gulp.task('browserify', () => {
+  let b = watchify(browserify(xtend(watchify.args, {
+    debug: true,
+    watch: true,
+    fast: true,
+    fullPaths: true,
+    keepAlive: true,
+    detectGlobals: false,
+    ignoreWatch: true,
+    noparse: ['node_modules/**/*.js'],
+    entries: entry,
+    transform: [
+      envify({
+        NODE_ENV: 'development'
+      }),
+      vueify,
+      babelify.configure()
+    ]
+  })));
+
+  let bundle = () => {
+    let bundleTimer = process.hrtime();
+
+    return b.bundle()
+      .on('error', (error) => {
+        let dirname = path.join(__dirname, '..', '..', 'src') + '/';
+
+        if (error.fileName) {
+          util.log(util.colors.red(error.name)
+            + ': ' + util.colors.yellow(error.fileName.replace(dirname, ''))
+            + ': ' + 'Line ' + util.colors.magenta(error.lineNumber)
+            + ' & ' + 'Column ' + util.colors.magenta(error.columnNumber || error.column)
+            + ': ' + util.colors.blue(error.description));
+        } else {
+          util.log(util.colors.red(error.name) + ': ' + util.colors.yellow(error.message.replace(dirname, '')));
+        }
+      })
+      .pipe(source(app))
+      .pipe(buffer())
+      .pipe(gulp.dest(path.normalize(config.dest.path + '/assets/scripts')))
+      .pipe(browserSync.stream())
+      .on('finish', () => {
+        util.log('Browserify', util.colors.cyan(app), 'after', util.colors.magenta(prettyTime(process.hrtime(bundleTimer))));
+      });
+  };
+
+  b.on('update', bundle);
+
+  return bundle();
+});
+
+gulp.task('browserify-build', () => {
+  let bundleTimer = process.hrtime();
+
+  return browserify(entry)
+    .transform(envify({
+      NODE_ENV: 'development'
+    }))
+    .transform(vueify)
+    .transform(babelify.configure())
+    .transform(uglifyify)
+    .bundle()
+    .pipe(source(app))
+    .pipe(buffer())
+    .pipe(uglify())
+    .pipe(gulp.dest(path.normalize(config.dest.path + '/assets/scripts')))
+    .on('finish', () => {
+      util.log('Browserify', util.colors.cyan(app), 'after', util.colors.magenta(prettyTime(process.hrtime(bundleTimer))));
+    });
+});

gulpfile.babel.js/tasks/clean.js

@@ -0,0 +1,7 @@
+import gulp from 'gulp';
+import del from 'del';
+import config from '../config';
+
+gulp.task('clean', () => {
+  return del([config.dest.path]);
+});

gulpfile.babel.js/tasks/copy.js

@@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import changed from 'gulp-changed';
+import config from '../config';
+
+gulp.task('copy', () => {
+  return gulp
+    .src(config.src.files)
+    .pipe(changed(config.dest.path))
+    .pipe(gulp.dest(config.dest.path));
+});

gulpfile.babel.js/tasks/eslint.js

@@ -0,0 +1,27 @@
+import gulp from 'gulp';
+import eslint from 'gulp-eslint';
+import changed from 'gulp-changed-in-place';
+import config from '../config';
+
+gulp.task('eslint-all', () => {
+  return gulp
+    .src(config.gulp.scripts.concat(config.src.scripts))
+    .pipe(eslint())
+    .pipe(eslint.format());
+});
+
+gulp.task('eslint-gulp', () => {
+  return gulp
+    .src(config.gulp.scripts)
+    .pipe(changed())
+    .pipe(eslint())
+    .pipe(eslint.format());
+});
+
+gulp.task('eslint', () => {
+  return gulp
+    .src(config.src.scripts)
+    .pipe(changed())
+    .pipe(eslint())
+    .pipe(eslint.format());
+});

gulpfile.babel.js/tasks/report.js

@@ -0,0 +1,12 @@
+import gulp from 'gulp';
+import path from 'path';
+import size from 'gulp-size';
+import config from '../config';
+
+gulp.task('report', () => {
+  return gulp
+    .src(path.normalize(config.dest.path + '/**/*'))
+    .pipe(size({
+      title: 'Size of'
+    }));
+});

gulpfile.babel.js/tasks/sass.js

@@ -0,0 +1,43 @@
+import gulp from 'gulp';
+import sass from 'gulp-sass';
+import cssImport from 'gulp-import-css';
+import moduleImporter from 'sass-module-importer';
+import sourcemaps from 'gulp-sourcemaps';
+import cssnano from 'gulp-cssnano';
+import autoprefixer from 'gulp-autoprefixer';
+import browserSync from './browser-sync';
+import config from '../config';
+
+gulp.task('sass', () => {
+  return gulp
+    .src(config.src.stylesheet)
+    .pipe(sourcemaps.init())
+    .pipe(
+      sass({
+        importer: moduleImporter(),
+        outputStyle: 'expanded'
+      }).on('error', sass.logError)
+    )
+    .pipe(cssImport())
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(config.dest.stylesheets))
+    .pipe(browserSync.stream());
+});
+
+gulp.task('sass-build', () => {
+  return gulp
+    .src(config.src.stylesheet)
+    .pipe(
+      sass({
+        importer: moduleImporter()
+      }).on('error', sass.logError)
+    )
+    .pipe(cssImport())
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      flexbox: 'no-2009',
+      cascade: false
+    }))
+    .pipe(cssnano({ discardComments: {removeAll: true} }))
+    .pipe(gulp.dest(config.dest.stylesheets));
+});

gulpfile.babel.js/tasks/uglify.js

@@ -0,0 +1,10 @@
+import gulp from 'gulp';
+import path from 'path';
+import uglify from 'gulp-uglify';
+import config from '../config';
+
+gulp.task('uglify', () => {
+  return gulp.src(path.normalize(config.dest.path + '/assets/scripts/main.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest(path.normalize(config.dest.path + '/assets/scripts')));
+});

gulpfile.babel.js/tasks/watch.js

@@ -0,0 +1,31 @@
+import gulp from 'gulp';
+import watch from 'gulp-watch';
+import runSequence from 'run-sequence';
+import config from '../config';
+import browserSync from './browser-sync';
+
+let watchConfig = {
+  verbose: true
+};
+
+gulp.task('watch', ['browserSync'], () => {
+  watch(['.eslintrc', '.eslintignore'], watchConfig, () => {
+    runSequence('eslint-all');
+  });
+
+  watch(config.gulp.scripts, watchConfig, () => {
+    runSequence('eslint-gulp');
+  });
+
+  watch(config.src.scripts, watchConfig, () => {
+    runSequence('eslint');
+  });
+
+  watch(config.src.stylesheets, watchConfig, () => {
+    runSequence('sass');
+  });
+
+  watch(config.src.files, watchConfig, () => {
+    runSequence('copy', browserSync.reload);
+  });
+});

package.json

@@ -0,0 +1,56 @@
+{
+  "projectName": "Vue.js Material",
+  "name": "vuejs-material",
+  "description": "Material Design for Vue.js",
+  "developers": "Marcos Moura",
+  "version": "0.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/marcosmoura/vue-material.git"
+  },
+  "authors": [
+    "Marcos Moura <marcosvmmoura@gmail.com>"
+  ],
+  "devDependencies": {
+    "babel": "^6.5.2",
+    "babel-core": "^6.7.4",
+    "babel-eslint": "^6.0.4",
+    "babel-plugin-transform-runtime": "^6.6.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-stage-0": "^6.5.0",
+    "babel-runtime": "^6.6.1",
+    "babelify": "^7.2.0",
+    "browser-sync": "^2.11.2",
+    "browserify": "^13.0.0",
+    "del": "^2.2.0",
+    "envify": "^3.4.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-babel": "^6.1.2",
+    "gulp-changed": "^1.3.0",
+    "gulp-changed-in-place": "^2.0.3",
+    "gulp-cssnano": "^2.1.1",
+    "gulp-eslint": "^2.0.0",
+    "gulp-imagemin": "^3.0.1",
+    "gulp-import-css": "^0.1.2",
+    "gulp-sass": "^2.2.0",
+    "gulp-size": "^2.1.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.3",
+    "gulp-util": "^3.0.7",
+    "gulp-watch": "^4.3.5",
+    "pretty-hrtime": "^1.0.2",
+    "run-sequence": "^1.1.5",
+    "sass-module-importer": "^1.2.0",
+    "stringify": "^5.1.0",
+    "uglifyify": "^3.0.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "vueify": "^8.5.4",
+    "watchify": "^3.7.0",
+    "xtend": "^4.0.1"
+  },
+  "dependencies": {
+    "vue": "^1.0.25"
+  }
+}

src/assets/scripts/main.js

@@ -0,0 +1 @@
+import Vue from 'vue';

src/assets/stylesheets/core.scss

@@ -0,0 +1,15 @@
+/* Common mixins */
+@import 'utils/mixins';
+
+
+/* Commons */
+@import 'utils/commons';
+
+
+/* Variables */
+@import 'variables';
+
+
+/* Core Styles */
+@import 'structure';
+@import 'type';

src/assets/stylesheets/utils/commons.scss

@@ -0,0 +1,96 @@
+/*  Apply the border-box box model to HTML and inheriting
+    to all children elements
+   ========================================================================== */
+
+html {
+  box-sizing: border-box;
+
+  *,
+  *:before,
+  *:after {
+    box-sizing: inherit;
+  }
+}
+
+
+
+/*  Always hide an element when it has the `hidden` HTML attribute.
+   ========================================================================== */
+
+[hidden] {
+  display: none !important;
+}
+
+
+
+/*  Fluid Media
+   ========================================================================== */
+
+audio,
+img,
+svg,
+object,
+embed,
+canvas,
+video,
+iframe {
+  max-width: 100%;
+  height: auto;
+  font-style: italic;
+  vertical-align: middle;
+}
+
+
+
+/*  Remove figure extra margin
+   ========================================================================== */
+
+figure {
+  margin-right: auto;
+  margin-left: auto;
+
+  > img {
+    display: block;
+  }
+}
+
+
+
+/*  Remove outline from button
+   ========================================================================== */
+
+button:focus {
+  outline: none;
+}
+
+
+
+/*  Suppress the focus outline on links that cannot be accessed via keyboard.
+    This prevents an unwanted focus outline from appearing around elements
+    that might still respond to pointer events.
+   ========================================================================== */
+
+[tabindex="-1"]:focus {
+  outline: none !important;
+}
+
+
+
+/*  Remove extra vertical spacing when nesting lists
+   ========================================================================== */
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/*  Remove spacing between table cells
+   ========================================================================== */
+
+table {
+  empty-cells: show;
+}

src/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-title" content="Vue.js Material">
+    <meta name="application-name" content="Vue.js Material">
+    <meta http-equiv="cleartype" content="on">
+    <meta name="description" content="Material Design for Vue">
+
+    <title>Vue.js Material</title>
+
+    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
+    <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
+    <link href="assets/stylesheets/core.css" rel="stylesheet">
+  </head>
+
+  <body>
+
+    <script src="assets/scripts/main.js"></script>
+  </body>
+</html>