make css theme customization easier by using less for bootstrap themes

CONTRIBUTING.md

@@ -152,16 +152,25 @@ Generate the documentation with:
 
     cd docs && ./build.sh
 
+## CSS Themes
+As part of the npm build process, CSS for Panoramix is compiled from ```Less```, a dynamic stylesheet language.
+
+It's possible to customize or add your own theme to Panoramix, either by overriding CSS rules or preferably
+by modifying the Less variables or files in ```assets/stylesheets/less/```.
+
+The ```variables.less``` and ```bootswatch.less``` files that ship with Panoramix are derived from
+[Bootswatch](https://bootswatch.com) and thus extend Bootstrap. Modify variables in these files directly, or
+swap them out entirely with the equivalent files from other Bootswatch (themes)[https://github.com/thomaspark/bootswatch.git]
 
 ## Pull Request Guidelines
 
-Before you submit a pull request from your forked repo, check that it 
+Before you submit a pull request from your forked repo, check that it
 meets these guidelines:
 
 1.  The pull request should include tests, either as doctests,
     unit tests, or both.
 2.  If the pull request adds functionality, the docs should be updated
-    as part of the same PR. Doc string are often sufficient, make 
+    as part of the same PR. Doc string are often sufficient, make
     sure to follow the sphinx compatible standards.
 3.  The pull request should work for Python 2.6, 2.7, and ideally python 3.3.
     `from __future__ import ` will be required in every `.py` file soon.

panoramix/assets/javascripts/css-theme.js

@@ -0,0 +1 @@
+require('../stylesheets/less/index.less');

panoramix/assets/javascripts/dashboard.js

@@ -85,7 +85,7 @@ var Dashboard = function (dashboardData) {
     initDashboardView: function () {
       dashboard = this;
       var gridster = $(".gridster ul").gridster({
-        widget_margins: [5, 5],
+        widget_margins: [10, 10],
         widget_base_dimensions: [100, 100],
         draggable: {
           handle: '.drag'

panoramix/assets/package.json

@@ -43,6 +43,7 @@
     "bootstrap-datepicker": "^1.6.0",
     "bootstrap-toggle": "^2.2.1",
     "brace": "^0.7.0",
+    "css-loader": "^0.23.1",
     "d3": "^3.5.14",
     "d3-cloud": "^1.2.1",
     "d3-sankey": "^0.2.1",
@@ -57,17 +58,19 @@
     "imports-loader": "^0.6.5",
     "jquery": "^2.2.1",
     "jquery-ui": "^1.10.5",
+    "less-loader": "^2.2.2",
     "nvd3": "1.8.2",
     "react": "^0.14.7",
     "react-bootstrap": "^0.28.3",
     "react-dom": "^0.14.7",
     "select2": "3.5",
+    "style-loader": "^0.13.0",
     "topojson": "^1.6.22",
     "webpack": "^1.12.12"
   },
   "devDependencies": {
-    "css-loader": "^0.23.1",
     "eslint": "^2.2.0",
-    "style-loader": "^0.13.0"
+    "file-loader": "^0.8.5",
+    "url-loader": "^0.5.7"
   }
 }