updated workflow and file structure some

.editorconfig

@@ -11,7 +11,7 @@ trim_trailing_whitespace = true
 insert_final_newline = true
 
 [*.php]
-indent_size = 4
+indent_style = tab
 
 [*.scss]
 indent_size = 4

build/Gruntfile.js → Gruntfile.js

@@ -11,7 +11,7 @@ module.exports = function(grunt) {
 		config: {
 			bower: 	 			'bower_components',
 			sass: 	 			'scss',
-			assets: 		 	'../assets',
+			assets: 		 	'assets',
 
 			cssbanner: '/*\n'+
 								'Plugin Name: <%= pkg.plugin.name %>\n'+
@@ -28,49 +28,69 @@ module.exports = function(grunt) {
 								 ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>\n' +
 								 '*/\n'
 		},
-
-		sass: {                              // Task
-			dist: {                            // Target
-				options: {                       // Target options
-					style: 'compact',
-					loadPath: [
-						'<%= config.bower %>/bourbon/dist'
-					]
-				},
+    jshint: {
+      options: {
+        "bitwise": true,
+        "browser": true,
+        "curly": true,
+        "eqeqeq": true,
+        "eqnull": true,
+        "esnext": true,
+        "immed": true,
+        "jquery": true,
+        "latedef": true,
+        "newcap": true,
+        "noarg": true,
+        "node": true,
+        "strict": false,
+        "trailing": true,
+        "undef": true,
+        "globals": {
+          "jQuery": true,
+          "alert": true,
+          "tinymce": false
+        }
+      },
+      all: [
+        'Gruntfile.js',
+        '<%= config.assets %>/js/*.js',
+        '!<%= config.assets %>/**/*.min.*'
+      ]
+    },
+		sass: {
+      options: {
+        style: 'compact',
+        includePaths: ['<%= config.bower %>/bourbon/dist']
+      },
+			dev: {
 				files: {
 					'<%= config.assets %>/css/dm-style.css': 'scss/dm-style.scss'
 				}
 			}
 		},
-
 		autoprefixer: {
 			options: {
 				browsers: ['last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12']
 			},
-			dist: {
+			dev: {
 				src: '<%= config.assets %>/css/dm-style.css',
 				dest: '<%= config.assets %>/css/dm-style.css'
 			}
 		},
-
-		// CSS minification + Add banner for WordPress
 		cssmin: {
-			css: {
+			dist: {
 				files: {
 					'<%= config.assets %>/css/dm-style.min.css': ['<%= config.assets %>/css/dm-style.css']
 				}
 			}
 		},
-
-		// Uglify
 		uglify: {
 			min: {
 				files: {
-					"<%= config.assets %>/js/editor.min.js": ["js/editor.js"]
+					"<%= config.assets %>/js/editor.min.js": ["<%= config.assets %>/js/editor.js"]
 				}
 			}
 		},
-
 		usebanner: {
 			css: {
 				options: {
@@ -96,8 +116,6 @@ module.exports = function(grunt) {
 				}
 			}
 		},
-
-		// image optimization
 		imagemin: {
 			img: {
 				options: {
@@ -112,8 +130,6 @@ module.exports = function(grunt) {
 				}]
 			}
 		},
-
-		// Watch for file changes
 		watch: {
 			options: {
 				livereload: false
@@ -134,18 +150,19 @@ module.exports = function(grunt) {
 				tasks: ['stylesheets','scripts','usebanner']
 			}
 		}
-
 	});
 
 	// register task
 	grunt.registerTask('stylesheets', [
+    'jshint',
 		'sass',
 		'autoprefixer',
 		'cssmin'
 	]);
 
 	// register task
 	grunt.registerTask('scripts', [
+    'jshint',
 		'uglify'
 	]);
 

build/js/editor.js → assets/js/editor.js

@@ -1,3 +1,13 @@
+/*
+ * Device Mockups v1.3.1 (https://wordpress.org/plugins/device-mockups/)
+ * Copyright 2014 Justin Peacock
+*/
+
+/*
+ * Device Mockups v1.3.1 (https://wordpress.org/plugins/device-mockups/)
+ * Copyright 2014 Justin Peacock
+*/
+
 (function() {
     tinymce.PluginManager.add('DM_tc_button', function( editor, url ) {
         editor.addButton( 'DM_tc_button', {
@@ -84,7 +94,7 @@
                 },
                 {
                     text: 'Stacking',
-                    value: '[device type="macbook" orientation="" width="" link="" stacked="open"][/device][device type="iphone" orientation="" width="" link="" stacked="closed" position="closed"][/device]',
+                    value: '[device type="macbook" link="" stacked="open"][/device][device type="iphone5" orientation="" link="" stacked="closed" position="right"][/device]',
                     onclick: function() {
                         editor.insertContent(this.value());
                     },

deploy.sh

@@ -55,6 +55,15 @@ svn propset svn:ignore "deploy.sh
 LICENSE
 README.md
 build
+Gruntfile.js
+scss
+html
+ai
+bower.json
+package.json
+bower_components
+node_modules
+.editorconfig
 .git
 .gitignore" "$SVNPATH/trunk/"
 
@@ -97,4 +106,4 @@ svn commit --username=$SVNUSER -m "Tagging version $NEWVERSION1"
 echo "Removing temporary directory $SVNPATH"
 rm -fr $SVNPATH/
 
-echo "*** FIN ***"
+echo "*** FIN ***"

build/package.json → package.json

@@ -19,15 +19,17 @@
   },
   "dependencies": {
     "grunt": "^0.4.5",
-    "grunt-autoprefixer": "~0.7.2",
-    "grunt-contrib-cssmin": "~0.7.0",
-    "grunt-contrib-sass": "^0.7.3",
-    "grunt-contrib-uglify": "^0.4.0",
-    "load-grunt-tasks": "~0.2.1"
+    "load-grunt-tasks": "~0.2.1",
+    "time-grunt": "~0.4.0",
+    "node-sass": "~0.9.3"
   },
   "devDependencies": {
-    "grunt": "^0.4.5",
+    "grunt-sass": "~0.8.1",
     "grunt-banner": "^0.2.3",
+    "grunt-autoprefixer": "~0.7.2",
+    "grunt-contrib-cssmin": "~0.7.0",
+    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-uglify": "^0.4.0",
     "grunt-contrib-imagemin": "~0.4.0",
     "grunt-contrib-watch": "~0.5.3"
   }

build/scss/_globals.scss → scss/_globals.scss

@@ -1,4 +1,4 @@
-%dm-device {
+@mixin dm-device {
     position: relative;
     width: 100%;
     padding-bottom: 61.775701%;
@@ -36,7 +36,7 @@
     }
 }
 
-%dm-browser {
+@mixin dm-browser {
     position: relative;
     width: 100%;
     padding-bottom: 61.775701%;

build/scss/browsers/_chrome.scss → scss/browsers/_chrome.scss

@@ -2,7 +2,7 @@
    Chrome
    ========================================================================== */
 .dm-browser {
-    @extend %dm-browser;
+    @include dm-browser;
     &[data-device="chrome"] {
         & > .device {
             background-image: url("../img/chrome.png");

build/scss/browsers/_firefox.scss → scss/browsers/_firefox.scss

@@ -2,7 +2,7 @@
    Firefox
    ========================================================================== */
 .dm-browser {
-    @extend %dm-browser;
+    @include dm-browser;
     &[data-device="firefox"] {
         & > .device {
             background-image: url("../img/firefox.png");

build/scss/browsers/_safari.scss → scss/browsers/_safari.scss

@@ -2,7 +2,7 @@
    Safari
    ========================================================================== */
 .dm-browser {
-    @extend %dm-browser;
+    @include dm-browser;
     &[data-device="safari"] {
         & > .device {
             background-image: url("../img/safari.png");

build/scss/devices/_imac.scss → scss/devices/_imac.scss

@@ -2,7 +2,7 @@
    iMac
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="imac"] {
         padding-bottom: 81.230769%;
         & > .device {

build/scss/devices/_ipad.scss → scss/devices/_ipad.scss

@@ -2,7 +2,7 @@
    iPad
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="ipad"] {
         padding-bottom: 128.406276%;
         &[data-orientation="portrait"] {

build/scss/devices/_iphone5.scss → scss/devices/_iphone5.scss

@@ -2,7 +2,7 @@
    iPhone 5
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="iphone5"] {
         padding-bottom: 200.477897%;
         &[data-orientation="portrait"] {

build/scss/devices/_iphone5s.scss → scss/devices/_iphone5s.scss

@@ -2,7 +2,7 @@
    iPhone 5s
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="iphone5s"] {
         padding-bottom: 210.477897%;
         &[data-orientation="portrait"] {

build/scss/devices/_iphone6-plus.scss → scss/devices/_iphone6-plus.scss

@@ -2,7 +2,7 @@
    iPhone 6 Plus
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="iphone6-plus"] {
         padding-bottom: 200.477897%;
         &[data-orientation="portrait"] {

build/scss/devices/_iphone6.scss → scss/devices/_iphone6.scss

@@ -2,7 +2,7 @@
    iPhone 6
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="iphone6"] {
         padding-bottom: 200.477897%;
         &[data-orientation="portrait"] {
@@ -37,7 +37,7 @@
         & > .device > .screen,
         &[data-orientation="portrait"] > .device > .screen {
             top: 12.2%;
-            bottom: 12.1%%;
+            bottom: 12.1%;
             left: 6.6%;
             right: 6.6%;
         }

build/scss/devices/_lumia-920.scss → scss/devices/_lumia-920.scss

@@ -2,7 +2,7 @@
    Lumia 920
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="lumia920"] {
         padding-bottom: 172.796353%;
         &[data-orientation="portrait"] {

build/scss/devices/_macbook.scss → scss/devices/_macbook.scss

@@ -2,7 +2,7 @@
    Macbook Pro
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="macbook"] {
         padding-bottom: 61.775701%;
         & > .device {

build/scss/devices/_nexus.scss → scss/devices/_nexus.scss

@@ -2,7 +2,7 @@
    Nexus 7
    ========================================================================== */
 .dm-device {
-    @extend %dm-device;
+    @include dm-device;
     &[data-device="nexus7"] {
         padding-bottom: 156.521739%;
         &[data-orientation="portrait"] {