fix(customizer): Fixes less customizer in docs

grunt/aliases.js

@@ -10,7 +10,7 @@ module.exports = function (grunt, options) {
     'default': ['before-test', 'test:single', 'after-test'],
 
     // Build with no testing
-    'build': ['ngtemplates', 'concat', 'uglify', 'fontello', 'less', 'ngdocs', 'copy:site'],
+    'build': ['ngtemplates', 'concat', 'uglify', 'fontello', 'less', 'ngdocs', 'copy:site', 'copy:less_customizer',],
 
     // Auto-test tasks for development
     'autotest:unit': ['karmangular:start'],

grunt/concat.js

@@ -7,16 +7,4 @@ module.exports = {
     src: ['src/js/core/bootstrap.js', 'src/js/**/*.js', 'src/features/*/js/**/*.js', '.tmp/template.js'],
     dest: '<%= dist %>/release/<%= pkg.name %>.js'
   },
-
-  // Concat all the less files together for the customizer
-  customizer_less: {
-    options: {
-      process: function(src, filepath) {
-        // Strip import statements since we're concatting
-        return src.replace(/\@import\s*.+?;/g, '');
-      }
-    },
-    src: 'src/less/**/*.less',
-    dest: '<%= dist %>/less/<%= pkg.name %>.less'
-  }
 };

grunt/copy.js

@@ -18,6 +18,28 @@ module.exports = function ( grunt ) {
         }
       ]
     },
+    less_customizer: {
+      files: [
+        {
+          expand: true,
+          cwd: 'src/less',
+          src: '**/*.less',
+          dest: '<%= dist %>/less'
+        },
+        {
+          expand: true,
+          cwd: 'src/features',
+          src: '**/*.less',
+          dest: '<%= dist %>/less'
+        },
+        {
+          expand: true,
+          cwd: 'node_modules/bootstrap',
+          src: '**/*.less',
+          dest: '<%= dist %>/bootstrap'
+        }
+      ]
+    },
     less_dist: {
       files: [
         {

misc/site/customizer/index.html

@@ -70,15 +70,22 @@
       </p>
     </div>
   </div>
-  
+
   <div ng-cloak class="container-fluid" id="customizerApp" ng-controller='Main'>
     <br>
 
-    <h2 class="text-center">Grid Customizer</h2>
-
+    <h1 class="text-center">Grid Customizer</h2>
     <br>
 
     <div class="row">
+      <div class="col-md-12">
+        <span class="col-xs-12 alert alert-warning text-center">
+          NOTE: The customizer currently only works with LESS defined for the core.
+          Less for the features are not currently compiled into the included download.
+          <br>
+          We are open to Pull Requests that fix this problem.
+        </span>
+      </div>
       <div class="col-md-12">
         <button type="button" class="btn btn-success" ng-click="resetVariables()">Reset Variables</button>
         &nbsp;
@@ -127,26 +134,27 @@ <h2 class="text-center">Grid Customizer</h2>
                 height: 300px;
               }
             </style>
-            
+
             <style ui-grid-style>
               {{ css }}
             </style>
-            
+
             <div class="grid" ui-grid="gridOptions"></div>
           </div>
         </div>
+        <div class="col-xs-6 col-md-8">
+          <form>
+            <label for="customLess">Custom Less</label>
+            <textarea class="form-control" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>
+          </form>
+        </div>
       </div>
-  
+
       <div class="text-error">{{ cssErr }}</div>
-
-      <br>
-
-      <label for="customLess">Custom Less</label>
-      <textarea class="col-xs-12" class="form-control" id="customLess" rows="4" ng-model="customLess" ng-change="updateCSS()" ng-init="customLess = ''"></textarea>
-
+
       <br>
       <br>
-    </div>    
+    </div>
 
     <div ng-cloak ng-show="showDownload" class="modal">
       <div class="modal-dialog">
@@ -162,7 +170,7 @@ <h3>Download CSS</h3>
             <p class="modal-message">
               <strong>Size:</strong> {{ cssSize() }}
             </p>
-    
+
             <textarea hover-select row="20" class="compiled-css col-xs-12" readonly>{{ css }}</textarea>
             <p class="modal-message">
               Hover then copy and paste the CSS.
@@ -183,8 +191,20 @@ <h3>Download CSS</h3>
     <!-- <div style="min-height: 4000px"></div> -->
   </div>
 
-  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.6.0/less.min.js"></script>
+  <script>
+  less = {
+    env: "development",
+    logLevel: 2,
+    async: false,
+    fileAsync: false,
+    poll: 1000,
+    functions: {},
+    dumpLineNumbers: "comments",
+    relativeUrls: false,
+  }
+  </script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.js"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
 
   <!--
@@ -197,7 +217,7 @@ <h3>Download CSS</h3>
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   <!--  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> -->
-  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.js"></script>
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
 
   <script>
     var s = document.createElement('script');
@@ -227,4 +247,4 @@ <h3>Download CSS</h3>
 
   <!--<script src="/js/customizer.js"></script>-->
 </body>
-</html>
+</html>

misc/site/index.html

@@ -34,6 +34,7 @@
         <ul class="nav navbar-nav">
           <li><a href="/docs/#/api"><i class="fa fa-book fa-fw"></i> API</a></li>
           <li><a href="/docs/#/tutorial"><i class="fa fa-book fa-fw"></i> Tutorial</a></li>
+          <li><a href="/customizer/"><i class="fa fa-wrench fa-fw"></i> Customizer</a></li>
         </ul>
         <div class="navbar-header navbar-right">
           <p class="navbar-text hidden-phone">