added some sprite generation notes

README.md

@@ -13,47 +13,66 @@ This will allow me to easily add new frameworks and lessen the burden of managin
 * CSS Autoprefixing
 * Sourcemapping of CSS and JS (when using Browserify)
 * Minification of CSS and JS
-* Image minification **(requires JPEGmini but can be turned off)**
+* Image minification **(requires the [JPEGmini app](http://www.jpegmini.com/) but can be turned off)**
 * Stub JS code depending on what/if a framework is chosen
 * Options
   * Browserify with Watchify
   * ES6 (Babel)
   * jQuery
   * Backbone with Lodash
   * React (with additional React ESLint enabled)
-  * CSS sprite generation
+  * CSS sprite generation (including retina support and auto-resizing of @2x sprites down to regular size [requires [ImageMagick](http://www.imagemagick.org/)])
   * Icon font support (in conjunction with [IcoMoon](https://icomoon.io/))
 
 ## Usage
 1. If you don't already have Yeoman installed you'll need to install it as well.
-  * `npm install yo -g`
+  * `sudo npm install yo -g`
 1. Install the generator.
-  * `npm install generator-threshold -g`
+  * `sudo npm install generator-threshold -g`
 1. Start Gulp to run a local development server.
   * `gulp`
 
-#### One Step Install/Run
-`npm i -g yo generator-threshold && gulp`
+**One Step Install/Run**
+`sudo npm i -g yo generator-threshold && gulp`
 
 ## Creating Icons
 **IMPORTANT: You should have selected "Use icon font?" when running the generator and you MUST be running the `gulp` task while performing the below steps for everything to work correctly.**
 
 1. Create your SVGs in whichever way you prefer.
-1. Import the SVGs into the [IcoMoon App](https://icomoon.io/app) and export them with your preferred settings.
+1. Import the SVGs into the [IcoMoon app](https://icomoon.io/app) and export them with your preferred settings.
 1. The app generates a zip file (`icomoon.zip`) which you can extract.
 1. Drag the extracted folder (`icomoon`) into the `fonts` directory of your project, overwriting the one currently there.
 1. The `icons` task is executed automatically and outputs the appropriate Sass file in `/sass/vendor/_icomoon.scss`.
 1. Import the file generated in the previous step into `/sass/_base.scss` (`@import "vendor/icomoon";`).
 1. You can use the icon in markup as such: `<i class="icon-star"></i>`
-1. You can also use the icon in your Sass using the mixin (which should be imported into `/sass/_base.scss` before use as well): `@include icon($icon-[name]);`
+1. You can also use the icon in your Sass using the mixin (which should be imported into `/sass/_base.scss` before use as well) and corresponding icon variable: `@include icon($icon-[name]);`
   * All icons have names associated with them when the Gulp task creates the appropriate files. These are based on the original SVG file name.
   * If you created an icon named `big-star.svg` then the resulting icon Sass variable will be `$icon-big-star`.
   * You can now use this variable in the icon mixin. (`@include icon($icon-big-star);`)
   * It is recommended to name your files using kebab case (name-of-icon.svg).
+1. If you update your icon set, simply overwrite the resulting zip in the same way as step 4 above and you're all set to use your new icons.
 
 ## Creating Sprites
+**IMPORTANT: You should have selected "Use CSS sprites?" when running the generator for the steps below to work correctly.**
+
+### Automatic 1x Creation (optional)
+A task is included (`gulp resize-sprites`) that will resize the @2x versions of your sprites automatically so you don't have to create them manually.  This requires [ImageMagick](http://www.imagemagick.org/) to be installed. If you'd rather not do this and create your 1x sprites manually, skip this section and put your 1x images in `/sprites/source-1x`.
+
+1. Save your individual sprite PNG files into `/sprites/source-2x`.
+  * If Gulp is not currently running you will need to run the `gulp resize-sprites` task manually.
+  * If Gulp is running while you update the folder with new images, the task will run automatically during the watch task and create the 1x images.
+1. To use the newly generated sprite right away you will have to stop Gulp and run it again so that the `sprites` task is run to create the new spritesheets.
+
+### Spritesheets
+The spritesheets get generated every time you run Gulp (or manually run the `sprites` task). Usage is as follows:
+
+1. The first time you generate sprites you'll have to import two Sass files into `/sass/_base.scss`:
+  * @import "sprites/sprites-1x";
+  * @import "sprites/sprites-2x";
+  * *You only have to do this once.*
 
 ## Roadmap
+* Fill out ES5 and ES6 boilerplates for all included JS frameworks
 * Add generator input for different types of licenses to automatically generate them
 
 ## License

app/index.js

@@ -46,15 +46,19 @@ module.exports = generators.Base.extend({
                 default: '[email protected]'
             },
             {
-                type: 'confirm',
-                name: 'browserify',
-                message: 'Use Browserify?',
-                default: true
+                type: 'list',
+                name: 'esv',
+                message: 'ECMAScript version?',
+                choices: [
+                    'ES5',
+                    'ES6'
+                ],
+                default: 'ES6'
             },
             {
                 type: 'confirm',
-                name: 'babel',
-                message: 'Use Babel?',
+                name: 'browserify',
+                message: 'Use Browserify?',
                 default: true
             },
             {
@@ -94,12 +98,13 @@ module.exports = generators.Base.extend({
             this.name = answers.name;
             this.email = answers.email;
             this.useBrowserify = answers.browserify;
-            this.useBabel = answers.babel;
+            this.esv = answers.esv.toLowerCase();
             this.usejQuery = answers.jquery;
             this.useBackbone = answers.backbone;
             this.useReact = answers.react;
             this.useSprites = answers.sprites;
             this.useIconFont = answers.icons;
+            this.useBabel = (this.esv === 'es6') ? true : false;
 
             if (this.useBackbone) {
                 this.usejQuery = true;
@@ -166,10 +171,10 @@ module.exports = generators.Base.extend({
         }
 
         if (this.useBackbone) {
-            this.fs.copy(this.templatePath('backbone/collections'), this.destinationPath('js/collections'));
-            this.fs.copy(this.templatePath('backbone/models'), this.destinationPath('js/models'));
-            this.fs.copy(this.templatePath('backbone/routers'), this.destinationPath('js/routers'));
-            this.fs.copy(this.templatePath('backbone/views'), this.destinationPath('js/views'));
+            this.fs.copy(this.templatePath('backbone/' + this.esv + '/collections'), this.destinationPath('js/collections'));
+            this.fs.copy(this.templatePath('backbone/' + this.esv + '/models'), this.destinationPath('js/models'));
+            this.fs.copy(this.templatePath('backbone/' + this.esv + '/routers'), this.destinationPath('js/routers'));
+            this.fs.copy(this.templatePath('backbone/' + this.esv + '/views'), this.destinationPath('js/views'));
         }
 
         if (this.useSprites) {
@@ -192,8 +197,6 @@ module.exports = generators.Base.extend({
         // test sprite usage in sass (may need actual sprites mixin)
         // also check gulp.spritesmith for better way to do retina
         //
-        // test icon font task and implementation
-        //
         // maybe a checkbox for different licenses and have them in a licenses folder
         // in templates and based on which is selected gets copied to LICENSE?
     },

app/templates/.eslintrc

@@ -3,7 +3,6 @@
         "browser": true,
         "node": false
     },<% if (useBabel) { %>
-    "parser": "babel-eslint",
     "settings": {
         "ecmascript": 6
     },<% } %><% if (useReact) { %>

app/templates/gulp/tasks/resize-sprites.js

@@ -20,5 +20,5 @@ gulp.task('resize-sprites', function() {
         .pipe(rename(function(path) {
             path.dirname = path.dirname.substring(0, path.dirname.length - 3) + '-1x';
         }))
-        .pipe(gulp.dest(src));
+        .pipe(gulp.dest(config.sprites));
 });

app/templates/gulp/tasks/sprites.js

@@ -5,7 +5,7 @@ var gulp = require('gulp'),
     spritesmith = require('gulp.spritesmith'),
     merge = require('merge-stream'),
 
-    tmpl = '../utils/spritesmith.template.mustache',
+    tmpl = './gulp/utils/spritesmith.template.mustache',
     padding = 5;
 
 gulp.task('sprites', function() {

app/templates/gulp/tasks/watch.js

@@ -12,8 +12,8 @@ gulp.task('watch', ['lint'<% if (useBrowserify) { %>, 'browserify'<% } %>], func
     gulp.watch(config.sass + '/**/*.scss', ['sass']);
     gulp.watch([
         config.js + '/**/*.js',
-        '!' + config.js + '/libs/**/*.js',
-        <% if (useBrowserify) { %>'!' + config.js + '/bundle.js',<% } %>
+        '!' + config.js + '/libs/**/*.js',<% if (useBrowserify) { %>
+        '!' + config.js + '/bundle.js',<% } %>
         '!' + config.js + '/**/*.min.js'
     ], ['lint']);
 });

app/templates/licenses/UNLICENSE.txt

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <http://unlicense.org/>

app/templates/sass/defaults/_paths.scss

@@ -1 +1,2 @@
 $path-fonts: "../fonts" !default;
+$path-images: "../images" !default;

app/templates/sass/mixins/_background-retina.scss

@@ -1,10 +1,4 @@
 /**
- * @section Mixins
- * @subsection background-retina
- * @description Creates a retina-ready background image from the given sources.
- *
- * @mixin background-retina($normal, $retina, $retinaWidth, $retinaHeight, $contain: false, $size: false)
- *
  * Retina Backgrounds for Compass
  * by:              Gaya Kessler
  * last update:     03/11/14
@@ -15,19 +9,17 @@
  * Usage:
  * 1. create background image for pixel ratio 1 screens and put it somewhere in your images folder.
  * 2. create background image for pixel ratio 2 screens and put it somewhere in your images folder.
- * 3. include the background-image property in your Sass
+ * 3. include the background-image mixin in your Sass
  */
 @mixin background-retina($normal, $retina, $retinaWidth, $retinaHeight, $contain: false, $size: false) {
-    $path: "../images/";
-
-    background-image: url($path + $normal);
+    background-image: url($path-images + "/" + $normal);
 
     @if $size {
         background-size: $size;
     }
 
     @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
-        background-image: url($path + $retina);
+        background-image: url($path-images + "/" + $retina);
 
         @if $contain == true {
             background-size: contain;

package.json

@@ -1,7 +1,19 @@
 {
   "name": "generator-threshold",
+  "description": "A Yeoman generator for my front-end workflow with many great options to get you up and running quickly.",
   "version": "0.1.0",
-  "description": "",
+  "homepage": "https://github.com/reintroducing/generator-threshold",
+  "author": {
+    "name": "Matt Przybylski",
+    "email": "[email protected]",
+    "url": "http://www.reintroducing.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:reintroducing/generator-threshold.git"
+  },
+  "license": "MIT",
+  "main": "app/index.js",
   "files": [
     "app"
   ],