Merge pull request #43 from synapticism/develop

xsynaptic · web-flow · commit dc7f26d25175 · 2016-09-01T21:58:36.000+08:00
Merge recent changes
diff --git a/gulpconfig.js b/gulpconfig.js
@@ -1,43 +1,42 @@
 // ==== CONFIGURATION ==== //
 
 // Project paths
-var project     = 'voidx'                 // The directory name for your theme; change this at the very least!
-  , src         = './src/'                // The raw material of your theme: custom scripts, SCSS source files, PHP files, images, etc.; do not delete this folder!
-  , build       = './build/'              // A temporary directory containing a development version of your theme; delete it anytime
-  , dist        = './dist/'+project+'/'   // The distribution package that you'll be uploading to your server; delete it anytime
-  , assets      = './assets/'             // A staging area for assets that require processing before landing in the source folder (example: icons before being added to a sprite sheet)
-  , bower       = './bower_components/'   // Bower packages
-  , composer    = './vendor/'             // Composer packages
-  , modules     = './node_modules/'       // npm packages
-;
+var project     = 'voidx',                // The directory name for your theme; change this at the very least!
+    src         = './src/',               // The raw material of your theme: custom scripts, SCSS source files, PHP files, images, etc.; do not delete this folder!
+    build       = './build/',             // A temporary directory containing a development version of your theme; delete it anytime
+    dist        = './dist/'+project+'/',  // The distribution package that you'll be uploading to your server; delete it anytime
+    assets      = './assets/',            // A staging area for assets that require processing before landing in the source folder (example: icons before being added to a sprite sheet)
+    bower       = './bower_components/',  // Bower packages
+    composer    = './vendor/',            // Composer packages
+    modules     = './node_modules/';      // npm packages
 
 // Project settings
 module.exports = {
 
   browsersync: {
-    files: [build+'/**', '!'+build+'/**.map'] // Exclude map files
-  , notify: false // In-line notifications (the blocks of text saying whether you are connected to the BrowserSync server or not)
-  , open: true // Set to false if you don't like the browser window opening automatically
-  , port: 3000 // Port number for the live version of the site; default: 3000
-  , proxy: 'localhost:8080' // We need to use a proxy instead of the built-in server because WordPress has to do some server-side rendering for the theme to work
-  , watchOptions: {
+    files: [build+'/**', '!'+build+'/**.map'], // Exclude map files
+    notify: false, // In-line notifications (the blocks of text saying whether you are connected to the BrowserSync server or not)
+    open: true, // Set to false if you don't like the browser window opening automatically
+    port: 3000, // Port number for the live version of the site; default: 3000
+    proxy: 'localhost:8080', // We need to use a proxy instead of the built-in server because WordPress has to do some server-side rendering for the theme to work
+    watchOptions: {
       debounceDelay: 2000 // This introduces a small delay when watching for file change events to avoid triggering too many reloads
     }
   },
 
   images: {
     build: { // Copies images from `src` to `build`; does not optimize
-      src: src+'**/*(*.png|*.jpg|*.jpeg|*.gif|*.svg)'
-    , dest: build
-    }
-  , dist: {
-      src: [dist+'**/*(*.png|*.jpg|*.jpeg|*.gif|*.svg)', '!'+dist+'screenshot.png'] // The source is actually `dist` since we are minifying images in place
-    , imagemin: {
-        optimizationLevel: 7
-      , progressive: true
-      , interlaced: true
-      }
-    , dest: dist
+      src: src+'**/*(*.png|*.jpg|*.jpeg|*.gif|*.svg)',
+      dest: build
+    },
+    dist: {
+      src: [dist+'**/*(*.png|*.jpg|*.jpeg|*.gif|*.svg)', '!'+dist+'screenshot.png'], // The source is actually `dist` since we are minifying images in place
+      imagemin: {
+        optimizationLevel: 7,
+        progressive: true,
+        interlaced: true
+      },
+      dest: dist
     }
   },
 
@@ -47,102 +46,109 @@ module.exports = {
 
   scripts: {
     bundles: { // Bundles are defined by a name and an array of chunks (below) to concatenate; warning: this method offers no dependency management!
-      footer: ['footer']
-    , header: ['header']
-    , pageloader: ['pageloader', 'footer']
-    }
-  , chunks: { // Chunks are arrays of paths or globs matching a set of source files; this way you can organize a bunch of scripts that go together into pieces that can then be bundled (above)
+      footer: ['footer'],
+      header: ['header'],
+      pageloader: ['pageloader', 'footer']
+    },
+    chunks: { // Chunks are arrays of paths or globs matching a set of source files; this way you can organize a bunch of scripts that go together into pieces that can then be bundled (above)
       // The core footer chunk is loaded no matter what; put essential scripts that you want loaded by your theme in here
       footer: [
-        modules+'timeago/jquery.timeago.js' // The modules directory contains packages downloaded via npm
-      , src+'js/responsive-menu.js'
-      , src+'js/footer.js'
-      ]
-    , header: [
-        modules+'svg4everybody/dist/svg4everybody.js'
-      , src+'js/header.js'
-      ]
+        modules+'timeago/jquery.timeago.js', // The modules directory contains packages downloaded via npm
+        src+'js/responsive-menu.js',
+        src+'js/footer.js'
+      ],
+      header: [
+        modules+'svg4everybody/dist/svg4everybody.js',
+        src+'js/header.js'
+      ],
       // The pageloader chunk provides an example of how you would add a user-configurable feature to your theme; you can delete this if you wish
       // Have a look at the `src/inc/assets.php` to see how script bundles could be conditionally loaded by a theme
-    , pageloader: [
-        modules+'html5-history-api/history.js'
-      , modules+'spin.js/spin.js'
-      , modules+'spin.js/jquery.spin.js'
-      , modules+'wp-ajax-page-loader/wp-ajax-page-loader.js'
-      , src+'js/page-loader.js'
+      pageloader: [
+        modules+'html5-history-api/history.js',
+        modules+'spin.js/spin.js',
+        modules+'spin.js/jquery.spin.js',
+        modules+'wp-ajax-page-loader/wp-ajax-page-loader.js',
+        src+'js/page-loader.js'
       ]
-    }
-  , dest: build+'js/' // Where the scripts end up in your theme
-  , lint: {
+    },
+    dest: build+'js/', // Where the scripts end up in your theme
+    lint: {
       src: [src+'js/**/*.js'] // Linting checks the quality of the code; we only lint custom scripts, not those under the various modules, so we're relying on the original authors to ship quality code
-    }
-  , minify: {
-      src: build+'js/**/*.js'
-    , uglify: {} // Default options
-    , dest: build+'js/'
-    }
-  , namespace: 'x-' // Script filenames will be prefaced with this (optional; leave blank if you have no need for it but be sure to change the corresponding value in `src/inc/assets.php` if you use it)
+    },
+    minify: {
+      src: build+'js/**/*.js',
+      uglify: {}, // Default options
+      dest: build+'js/'
+    },
+    namespace: 'x-' // Script filenames will be prefaced with this (optional; leave blank if you have no need for it but be sure to change the corresponding value in `src/inc/assets.php` if you use it)
   },
 
   styles: {
     build: {
-      src: src+'scss/**/*.scss'
-    , dest: build
-    }
-  , compiler: 'libsass' // Choose a Sass compiler: 'libsass' or 'rubysass'
-  , cssnano: {
+      src: src+'scss/**/*.scss',
+      dest: build
+    },
+    compiler: 'libsass', // Choose a Sass compiler: 'libsass' or 'rubysass'
+    cssnano: {
       autoprefixer: {
-        add: true
-      , browsers: ['> 3%', 'last 2 versions', 'ie 9', 'ios 6', 'android 4'] // This tool is magic and you should use it in all your projects :)
+        add: true,
+        browsers: ['> 3%', 'last 2 versions', 'ie 9', 'ios 6', 'android 4'] // This tool is magic and you should use it in all your projects :)
       }
-    }
-  , rubySass: { // Requires the Ruby implementation of Sass; run `gem install sass` if you use this; Compass is *not* included by default
-      loadPath: ['./src/scss', bower, modules] // Adds Bower and npm directories to the load path so you can @import directly
-    , precision: 6
-    , sourcemap: true
-  }
-  , libsass: { // Requires the libsass implementation of Sass (included in this package)
-      includePaths: ['./src/scss', bower, modules] // Adds Bower and npm directories to the load path so you can @import directly
-    , precision: 6
-    , onError: function(err) {
+    },
+    rubySass: { // Requires the Ruby implementation of Sass; run `gem install sass` if you use this; Compass is *not* included by default
+      loadPath: [ // Adds Bower and npm directories to the load path so you can @import directly
+        './src/scss',
+        modules+'normalize.css',
+        modules+'scut/dist',
+        modules,
+        bower
+      ],
+      precision: 6,
+      sourcemap: true
+    },
+    libsass: { // Requires the libsass implementation of Sass (included in this package)
+      includePaths: [ // Adds Bower and npm directories to the load path so you can @import directly
+        './src/scss',
+        modules+'normalize.css',
+        modules+'scut/dist',
+        modules,
+        bower,
+      ],
+      precision: 6,
+      onError: function(err) {
         return console.log(err);
       }
     }
   },
 
   theme: {
     lang: {
-      src: src+'languages/**/*' // Glob pattern matching any language files you'd like to copy over; we've broken this out in case you want to automate language-related functions
-    , dest: build+'languages/'
-    }
-  , php: {
-      src: src+'**/*.php' // This simply copies PHP files over; both this and the previous task could be combined if you like
-    , dest: build
+      src: src+'languages/**/*', // Glob pattern matching any language files you'd like to copy over; we've broken this out in case you want to automate language-related functions
+      dest: build+'languages/'
+    },
+    php: {
+      src: src+'**/*.php', // This simply copies PHP files over; both this and the previous task could be combined if you like
+      dest: build
     }
   },
 
   utils: {
-    clean: [build+'**/.DS_Store'] // A glob pattern matching junk files to clean out of `build`; feel free to add to this array
-  , wipe: [dist] // Clean this out before creating a new distribution copy
-  , dist: {
-      src: [build+'**/*', '!'+build+'**/*.map']
-    , dest: dist
-    }
-  , normalize: { // Copies `normalize.css` from `node_modules` to `src/scss` and renames it to allow for it to imported as a Sass file
-      src: modules+'normalize.css/normalize.css'
-    , dest: src+'scss'
-    , rename: '_normalize.scss'
-    }
+    clean: [build+'**/.DS_Store'], // A glob pattern matching junk files to clean out of `build`; feel free to add to this array
+    wipe: [dist], // Clean this out before creating a new distribution copy
+    dist: {
+      src: [build+'**/*', '!'+build+'**/*.map'],
+      dest: dist
+    },
   },
 
   watch: { // What to watch before triggering each specified task; if files matching the patterns below change it will trigger BrowserSync or Livereload
     src: {
-      styles:       src+'scss/**/*.scss'
-    , scripts:      src+'js/**/*.js' // You might also want to watch certain dependency trees but that's up to you
-    , images:       src+'**/*(*.png|*.jpg|*.jpeg|*.gif|*.svg)'
-    , theme:        src+'**/*.php'
-    , livereload:   build+'**/*'
-    }
-  , watcher: 'livereload' // Modify this value to easily switch between BrowserSync ('browsersync') and Livereload ('livereload')
+      styles:       src+'scss/**/*.scss',
+      scripts:      src+'js/**/*.js', // You might also want to watch certain dependency trees but that's up to you
+      images:       src+'**/*(*.png|*.jpg|*.jpeg|*.gif|*.svg)',
+      theme:        src+'**/*.php',
+      livereload:   build+'**/*'
+    },
+    watcher: 'livereload' // Modify this value to easily switch between BrowserSync ('browsersync') and Livereload ('livereload')
   }
 }
diff --git a/gulpfile.js/tasks/browsersync.js b/gulpfile.js/tasks/browsersync.js
@@ -1,9 +1,8 @@
 // ==== BROWSERSYNC ==== //
 
-var gulp        = require('gulp')
-  , browsersync = require('browser-sync')
-  , config      = require('../../gulpconfig').browsersync
-;
+var gulp        = require('gulp'),
+    browsersync = require('browser-sync'),
+    config      = require('../../gulpconfig').browsersync;
 
 // BrowserSync: be sure to setup `proxy` in `/gulpconfig.js`
 // Quick start: connect all your devices to the same network (e.g. wifi) and navigate to the address output in the console when you run `gulp`
diff --git a/gulpfile.js/tasks/images.js b/gulpfile.js/tasks/images.js
@@ -1,9 +1,8 @@
 // ==== IMAGES ==== //
 
-var gulp        = require('gulp')
-  , plugins     = require('gulp-load-plugins')({ camelize: true })
-  , config      = require('../../gulpconfig').images
-;
+var gulp        = require('gulp'),
+    plugins     = require('gulp-load-plugins')({ camelize: true }),
+    config      = require('../../gulpconfig').images;
 
 // Copy changed images from the source folder to `build` (fast)
 gulp.task('images', function() {
diff --git a/gulpfile.js/tasks/livereload.js b/gulpfile.js/tasks/livereload.js
@@ -1,9 +1,8 @@
 // ==== LIVERELOAD ==== //
 
-var gulp        = require('gulp')
-  , plugins     = require('gulp-load-plugins')({ camelize: true })
-  , config      = require('../../gulpconfig').livereload
-;
+var gulp        = require('gulp'),
+    plugins     = require('gulp-load-plugins')({ camelize: true }),
+    config      = require('../../gulpconfig').livereload;
 
 // Start the livereload server; not asynchronous
 gulp.task('livereload', ['build'], function() {
diff --git a/gulpfile.js/tasks/main.js b/gulpfile.js/tasks/main.js
@@ -5,9 +5,6 @@ var gulp = require('gulp');
 // Default task chain: build -> (livereload or browsersync) -> watch
 gulp.task('default', ['watch']);
 
-// One-off setup tasks
-gulp.task('setup', ['utils-normalize']);
-
 // Build a working copy of the theme
 gulp.task('build', ['images', 'scripts', 'styles', 'theme']);
 
diff --git a/gulpfile.js/tasks/scripts.js b/gulpfile.js/tasks/scripts.js
@@ -1,10 +1,9 @@
 // ==== SCRIPTS ==== //
 
-var gulp        = require('gulp')
-  , plugins     = require('gulp-load-plugins')({ camelize: true })
-  , merge       = require('merge-stream')
-  , config      = require('../../gulpconfig').scripts
-;
+var gulp        = require('gulp'),
+    plugins     = require('gulp-load-plugins')({ camelize: true }),
+    merge       = require('merge-stream'),
+    config      = require('../../gulpconfig').scripts;
 
 // Check core scripts for errors
 gulp.task('scripts-lint', function() {
diff --git a/gulpfile.js/tasks/styles.js b/gulpfile.js/tasks/styles.js
@@ -1,10 +1,9 @@
 // ==== STYLES ==== //
 
-var gulp          = require('gulp')
-  , gutil         = require('gulp-util')
-  , plugins       = require('gulp-load-plugins')({ camelize: true })
-  , config        = require('../../gulpconfig').styles
-;
+var gulp          = require('gulp'),
+    gutil         = require('gulp-util'),
+    plugins       = require('gulp-load-plugins')({ camelize: true }),
+    config        = require('../../gulpconfig').styles;
 
 // Build stylesheets from source Sass files, post-process, and write source maps (for debugging) with rubySass
 gulp.task('styles-rubysass', function() {
diff --git a/gulpfile.js/tasks/theme.js b/gulpfile.js/tasks/theme.js
@@ -1,9 +1,8 @@
 // ==== THEME ==== //
 
-var gulp        = require('gulp')
-  , plugins     = require('gulp-load-plugins')({ camelize: true })
-  , config      = require('../../gulpconfig').theme
-;
+var gulp        = require('gulp'),
+    plugins     = require('gulp-load-plugins')({ camelize: true }),
+    config      = require('../../gulpconfig').theme;
 
 // Copy PHP source files to the `build` folder
 gulp.task('theme-php', function() {
diff --git a/gulpfile.js/tasks/utils.js b/gulpfile.js/tasks/utils.js
@@ -1,18 +1,9 @@
 // ==== UTILITIES ==== //
 
-var gulp        = require('gulp')
-  , plugins     = require('gulp-load-plugins')({ camelize: true })
-  , del         = require('del')
-  , config      = require('../../gulpconfig').utils
-;
-
-// Used to get around Sass's inability to properly @import vanilla CSS; see: https://github.com/sass/sass/issues/556
-gulp.task('utils-normalize', function() {
-  return gulp.src(config.normalize.src)
-  .pipe(plugins.changed(config.normalize.dest))
-  .pipe(plugins.rename(config.normalize.rename))
-  .pipe(gulp.dest(config.normalize.dest));
-});
+var gulp        = require('gulp'),
+    plugins     = require('gulp-load-plugins')({ camelize: true }),
+    del         = require('del'),
+    config      = require('../../gulpconfig').utils;
 
 // Totally wipe the contents of the `dist` folder to prepare for a clean build; additionally trigger Bower-related tasks to ensure we have the latest source files
 gulp.task('utils-wipe', ['setup'], function() {
diff --git a/gulpfile.js/tasks/watch.js b/gulpfile.js/tasks/watch.js
@@ -1,9 +1,8 @@
 // ==== WATCH ==== //
 
-var gulp        = require('gulp')
-  , plugins     = require('gulp-load-plugins')({ camelize: true })
-  , config      = require('../../gulpconfig').watch
-;
+var gulp        = require('gulp'),
+    plugins     = require('gulp-load-plugins')({ camelize: true }),
+    config      = require('../../gulpconfig').watch;
 
 // Watch (BrowserSync version): build stuff when source files are modified, let BrowserSync figure out when to reload
 // Task chain: build -> browsersync -> watch
diff --git a/package.json b/package.json
diff --git a/readme.md b/readme.md
diff --git a/src/functions.php b/src/functions.php
diff --git a/src/scss/_config.scss b/src/scss/_config.scss
diff --git a/src/scss/style.scss b/src/scss/style.scss
