Using import (es6)

src/dat/color/Color.js

@@ -11,10 +11,10 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var interpret = require('./interpret'),
-    math = require('./math'),
-    toString = require('./toString'),
-    common = require('../utils/common');
+import interpret from './interpret';
+import math from './math';
+import toString from './toString';
+import common from '../utils/common';
 
 var Color = function () {
 
@@ -179,4 +179,4 @@ function recalculateHSV(color) {
 
 }
 
-module.exports = Color;
+export default Color;

src/dat/color/interpret.js

@@ -11,8 +11,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var toString = require('./toString'),
-    common = require('../utils/common');
+import * as toString from './toString';
+import common from '../utils/common';
 
 var result, toReturn;
 
@@ -332,4 +332,4 @@ var INTERPRETATIONS = [
 
 ];
 
-module.exports = interpret;
+export default interpret;

src/dat/color/math.js

@@ -92,4 +92,4 @@ var ColorMath = {
     }
 }
 
-module.exports = ColorMath;
+export default ColorMath;

src/dat/color/toString.js

@@ -11,9 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var common = require('../utils/common');
+import common from '../utils/common';
 
-module.exports = function(color) {
+var toString = function (color) {
   if (color.a == 1 || common.isUndefined(color.a)) {
     var s = color.hex.toString(16);
     while (s.length < 6) {
@@ -25,3 +25,5 @@ module.exports = function(color) {
     return 'rgba(' + Math.round(color.r) + ',' + Math.round(color.g) + ',' + Math.round(color.b) + ',' + color.a + ')';
   }
 };
+
+export default toString;

src/dat/controllers/BooleanController.js

@@ -11,9 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    dom = require('../dom/dom'),
-    common = require('../utils/common');
+import Controller from './Controller';
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 /**
  * @class Provides a checkbox input to alter the boolean property of an object.
@@ -84,4 +84,4 @@ common.extend(
 
 );
 
-module.exports = BooleanController;
+export default BooleanController;

src/dat/controllers/ColorController.js

@@ -11,11 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    dom = require('../dom/dom'),
-    Color = require('../color/Color'),
-    interpret = require('../color/interpret'),
-    common = require('../utils/common');
+import Controller from './Controller';
+import dom from '../dom/dom';
+import Color from '../color/Color';
+import interpret from '../color/interpret';
+import common from '../utils/common';
 
 var ColorController = function(object, property) {
   ColorController.superclass.call(this, object, property);
@@ -57,7 +57,7 @@ var ColorController = function(object, property) {
 
   dom.bind(this.__input, 'blur', onBlur);
 
-  dom.bind(this.__selector, 'mousedown', function(e) {
+  dom.bind(this.__selector, 'mousedown', function (_e) {
 
     dom
         .addClass(this, 'drag')
@@ -308,12 +308,12 @@ function linearGradient(elem, x, a, b) {
 
 function hueGradient(elem) {
   elem.style.background = '';
-  elem.style.cssText += 'background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'
-  elem.style.cssText += 'background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
-  elem.style.cssText += 'background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
-  elem.style.cssText += 'background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
-  elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);'
+  elem.style.cssText += 'background: -moz-linear-gradient(top,  #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);';
+  elem.style.cssText += 'background: -webkit-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
+  elem.style.cssText += 'background: -o-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
+  elem.style.cssText += 'background: -ms-linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
+  elem.style.cssText += 'background: linear-gradient(top,  #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);';
 }
 
 
-module.exports = ColorController;
+export default ColorController;

src/dat/controllers/Controller.js

@@ -11,7 +11,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var common = require('../utils/common');
+import common from '../utils/common';
 
 /**
  * @class An "abstract" class that represents a given property of an object.
@@ -134,4 +134,4 @@ common.extend(
     }
 );
 
-module.exports = Controller;
+export default Controller;

src/dat/controllers/ControllerFactory.js

@@ -11,16 +11,15 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var OptionController = require('./OptionController'),
-    NumberControllerBox = require('./NumberControllerBox'),
-    NumberControllerSlider = require('./NumberControllerSlider'),
-    StringController = require('./StringController'),
-    FunctionController = require('./FunctionController'),
-    BooleanController = require('./BooleanController'),
-    common = require('../utils/common');
-
-module.exports = function (object, property) {
+import OptionController from './OptionController';
+import NumberControllerBox from './NumberControllerBox';
+import NumberControllerSlider from './NumberControllerSlider';
+import StringController from './StringController';
+import FunctionController from './FunctionController';
+import BooleanController from './BooleanController';
+import common from '../utils/common';
 
+var ControllerFactory = function (object, property) {
     var initialValue = object[property];
 
     // Providing options?
@@ -29,23 +28,20 @@ module.exports = function (object, property) {
     }
 
     // Providing a map?
-
     if (common.isNumber(initialValue)) {
 
         if (common.isNumber(arguments[2]) && common.isNumber(arguments[3])) {
-
             // Has min and max.
             if (common.isNumber(arguments[4])) // has step
+            {
                 return new NumberControllerSlider(object, property, arguments[2], arguments[3], arguments[4]);
-            else
+            }
+            else {
                 return new NumberControllerSlider(object, property, arguments[2], arguments[3]);
-
+            }
         } else {
-
             return new NumberControllerBox(object, property, {min: arguments[2], max: arguments[3]});
-
         }
-
     }
 
     if (common.isString(initialValue)) {
@@ -59,5 +55,6 @@ module.exports = function (object, property) {
     if (common.isBoolean(initialValue)) {
         return new BooleanController(object, property);
     }
-
 };
+
+export default ControllerFactory;

src/dat/controllers/FunctionController.js

@@ -11,9 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    dom = require('../dom/dom'),
-    common = require('../utils/common');
+import Controller from './Controller';
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 /**
  * @class Provides a GUI interface to fire a specified method, a property of an object.
@@ -67,4 +67,4 @@ common.extend(
 
 );
 
-module.exports = FunctionController;
+export default FunctionController;

src/dat/controllers/NumberController.js

@@ -11,9 +11,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    common = require('../utils/common');
-
+import Controller from './Controller';
+import common from '../utils/common';
 
 /**
  * @class Represents a given property of an object that is a number.
@@ -136,4 +135,4 @@ function numDecimals(x) {
     }
 }
 
-module.exports = NumberController;
+export default NumberController;

src/dat/controllers/NumberControllerBox.js

@@ -11,10 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    NumberController = require('./NumberController'),
-    dom = require('../dom/dom'),
-    common = require('../utils/common');
+import NumberController from './NumberController';
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 /**
  * @class Represents a given property of an object that is a number and
@@ -127,6 +126,6 @@ function roundToDecimal(value, decimals) {
   return Math.round(value * tenTo) / tenTo;
 }
 
-module.exports = NumberControllerBox;
+export default NumberControllerBox;
 
 

src/dat/controllers/NumberControllerSlider.js

@@ -11,11 +11,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var NumberController = require('./NumberController'),
-    dom = require('../dom/dom'),
-    css = require('../utils/css'),
-    common = require('../utils/common'),
-    styleSheet = require('./NumberControllerSlider.css');
+import NumberController from './NumberController';
+import dom from '../dom/dom';
+import css from '../utils/css';
+import common from '../utils/common';
+import styleSheet from '!style!css!sass!./NumberControllerSlider.scss';
 
 /**
  * @class Represents a given property of an object that is a number, contains
@@ -121,4 +121,4 @@ function map(v, i1, i2, o1, o2) {
   return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
 }
 
-module.exports = NumberControllerSlider;
+export default NumberControllerSlider;

src/dat/controllers/OptionController.js

@@ -11,9 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    dom = require('../dom/dom'),
-    common = require('../utils/common');
+import Controller from './Controller';
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 /**
  * @class Provides a select input to alter the property of an object, using a
@@ -95,4 +95,4 @@ common.extend(
 
 );
 
-module.exports = OptionController;
+export default OptionController;

src/dat/controllers/StringController.js

@@ -11,9 +11,9 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var Controller = require('./Controller'),
-    dom = require('../dom/dom'),
-    common = require('../utils/common');
+import Controller from './Controller';
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 /**
  * @class Provides a text input to alter the string property of an object.
@@ -82,4 +82,4 @@ common.extend(
 
 );
 
-module.exports = StringController;
+export default StringController;

src/dat/dom/CenteredDiv.js

@@ -11,8 +11,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var dom = require('../dom/dom'),
-    common = require('../utils/common');
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 var CenteredDiv = function() {
 
@@ -109,4 +109,4 @@ function lockScroll(e) {
     console.log(e);
 }
 
-module.exports = CenteredDiv;
+export default CenteredDiv;

src/dat/dom/dom.js

@@ -11,7 +11,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var common = require('../utils/common');
+import common from '../utils/common';
 
 var EVENT_MAP = {
     'HTMLEvents': ['change'],
@@ -280,4 +280,4 @@ var dom = {
 
 };
 
-module.exports = dom;
+export default dom;

src/dat/gui/GUI.js

@@ -11,21 +11,21 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 
-var css = require('../utils/css'),
-    saveDialogueContents = require('html!./saveDialogue.html'),
-    styleSheet = require('./style.css'),
-    controllerFactory = require('../controllers/factory'),
-    Controller = require('../controllers/Controller'),
-    BooleanController = require('../controllers/BooleanController'),
-    FunctionController = require('../controllers/FunctionController'),
-    NumberControllerBox = require('../controllers/NumberControllerBox'),
-    NumberControllerSlider = require('../controllers/NumberControllerSlider'),
-    OptionController = require('../controllers/OptionController'),
-    ColorController = require('../controllers/ColorController'),
-    requestAnimationFrame = require('../utils/requestAnimationFrame'),
-    CenteredDiv = require('../dom/CenteredDiv'),
-    dom = require('../dom/dom'),
-    common = require('../utils/common');
+import css from '../utils/css';
+import saveDialogueContents from 'html!./saveDialogue.html';
+import styleSheet from '!style!css!sass!./style.scss';
+import ControllerFactory from '../controllers/ControllerFactory';
+import Controller from '../controllers/Controller';
+import BooleanController from '../controllers/BooleanController';
+import FunctionController from '../controllers/FunctionController';
+import NumberControllerBox from '../controllers/NumberControllerBox';
+import NumberControllerSlider from '../controllers/NumberControllerSlider';
+import OptionController from '../controllers/OptionController';
+import ColorController from '../controllers/ColorController';
+import requestAnimationFrame from '../utils/requestAnimationFrame';
+import CenteredDiv from '../dom/CenteredDiv';
+import dom from '../dom/dom';
+import common from '../utils/common';
 
 css.inject(styleSheet);
 
@@ -802,7 +802,7 @@ function add(gui, object, property, params) {
     } else {
 
         var factoryArgs = [object,property].concat(params.factoryArgs);
-        controller = controllerFactory.apply(gui, factoryArgs);
+        controller = ControllerFactory.apply(gui, factoryArgs);
 
     }
 

src/dat/gui/style.css

@@ -1,282 +0,0 @@
-.dg {
-  /** Clear list styles */
-  /* Auto-place container */
-  /* Auto-placed GUI's */
-  /* Line items that don't contain folders. */
-  /** Folder names */
-  /** Hides closed items */
-  /** Controller row */
-  /** Name-half (left) */
-  /** Controller-half (right) */
-  /** Controller placement */
-  /** Shorter number boxes when slider is present. */
-  /** Ensure the entire boolean and function row shows a hand */ }
-  .dg ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    clear: both; }
-  .dg.ac {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    z-index: 0; }
-  .dg:not(.ac) .main {
-    /** Exclude mains in ac so that we don't hide close button */
-    overflow: hidden; }
-  .dg.main {
-    -webkit-transition: opacity 0.1s linear;
-    -o-transition: opacity 0.1s linear;
-    -moz-transition: opacity 0.1s linear;
-    transition: opacity 0.1s linear; }
-    .dg.main.taller-than-window {
-      overflow-y: auto; }
-      .dg.main.taller-than-window .close-button {
-        opacity: 1;
-        /* TODO, these are style notes */
-        margin-top: -1px;
-        border-top: 1px solid #2c2c2c; }
-    .dg.main ul.closed .close-button {
-      opacity: 1 !important; }
-    .dg.main:hover .close-button,
-    .dg.main .close-button.drag {
-      opacity: 1; }
-    .dg.main .close-button {
-      /*opacity: 0;*/
-      -webkit-transition: opacity 0.1s linear;
-      -o-transition: opacity 0.1s linear;
-      -moz-transition: opacity 0.1s linear;
-      transition: opacity 0.1s linear;
-      border: 0;
-      position: absolute;
-      line-height: 19px;
-      height: 20px;
-      /* TODO, these are style notes */
-      cursor: pointer;
-      text-align: center;
-      background-color: #000; }
-      .dg.main .close-button:hover {
-        background-color: #111; }
-  .dg.a {
-    float: right;
-    margin-right: 15px;
-    overflow-x: hidden; }
-    .dg.a.has-save > ul {
-      margin-top: 27px; }
-      .dg.a.has-save > ul.closed {
-        margin-top: 0; }
-    .dg.a .save-row {
-      position: fixed;
-      top: 0;
-      z-index: 1002; }
-  .dg li {
-    -webkit-transition: height 0.1s ease-out;
-    -o-transition: height 0.1s ease-out;
-    -moz-transition: height 0.1s ease-out;
-    transition: height 0.1s ease-out; }
-  .dg li:not(.folder) {
-    cursor: auto;
-    height: 27px;
-    line-height: 27px;
-    overflow: hidden;
-    padding: 0 4px 0 5px; }
-  .dg li.folder {
-    padding: 0;
-    border-left: 4px solid rgba(0, 0, 0, 0); }
-  .dg li.title {
-    cursor: pointer;
-    margin-left: -4px; }
-  .dg .closed li:not(.title),
-  .dg .closed ul li,
-  .dg .closed ul li > * {
-    height: 0;
-    overflow: hidden;
-    border: 0; }
-  .dg .cr {
-    clear: both;
-    padding-left: 3px;
-    height: 27px; }
-  .dg .property-name {
-    cursor: default;
-    float: left;
-    clear: left;
-    width: 40%;
-    overflow: hidden;
-    text-overflow: ellipsis; }
-  .dg .c {
-    float: left;
-    width: 60%; }
-  .dg .c input[type=text] {
-    border: 0;
-    margin-top: 4px;
-    padding: 3px;
-    width: 100%;
-    float: right; }
-  .dg .has-slider input[type=text] {
-    width: 30%;
-    /*display: none;*/
-    margin-left: 0; }
-  .dg .slider {
-    float: left;
-    width: 66%;
-    margin-left: -5px;
-    margin-right: 0;
-    height: 19px;
-    margin-top: 4px; }
-  .dg .slider-fg {
-    height: 100%; }
-  .dg .c input[type=checkbox] {
-    margin-top: 9px; }
-  .dg .c select {
-    margin-top: 5px; }
-  .dg .cr.function,
-  .dg .cr.function .property-name,
-  .dg .cr.function *,
-  .dg .cr.boolean,
-  .dg .cr.boolean * {
-    cursor: pointer; }
-  .dg .selector {
-    display: none;
-    position: absolute;
-    margin-left: -9px;
-    margin-top: 23px;
-    z-index: 10; }
-  .dg .c:hover .selector,
-  .dg .selector.drag {
-    display: block; }
-  .dg li.save-row {
-    padding: 0; }
-    .dg li.save-row .button {
-      display: inline-block;
-      padding: 0px 6px; }
-  .dg.dialogue {
-    background-color: #222;
-    width: 460px;
-    padding: 15px;
-    font-size: 13px;
-    line-height: 15px; }
-
-/* TODO Separate style and structure */
-#dg-new-constructor {
-  padding: 10px;
-  color: #222;
-  font-family: Monaco, monospace;
-  font-size: 10px;
-  border: 0;
-  resize: none;
-  box-shadow: inset 1px 1px 1px #888;
-  word-wrap: break-word;
-  margin: 12px 0;
-  display: block;
-  width: 440px;
-  overflow-y: scroll;
-  height: 100px;
-  position: relative; }
-
-#dg-local-explain {
-  display: none;
-  font-size: 11px;
-  line-height: 17px;
-  border-radius: 3px;
-  background-color: #333;
-  padding: 8px;
-  margin-top: 10px; }
-  #dg-local-explain code {
-    font-size: 10px; }
-
-#dat-gui-save-locally {
-  display: none; }
-
-/** Main type */
-.dg {
-  color: #eee;
-  font: 11px 'Lucida Grande', sans-serif;
-  text-shadow: 0 -1px 0 #111;
-  /** Auto place */
-  /* Controller row, <li> */
-  /** Controllers */ }
-  .dg.main {
-    /** Scrollbar */ }
-    .dg.main::-webkit-scrollbar {
-      width: 5px;
-      background: #1a1a1a; }
-    .dg.main::-webkit-scrollbar-corner {
-      height: 0;
-      display: none; }
-    .dg.main::-webkit-scrollbar-thumb {
-      border-radius: 5px;
-      background: #676767; }
-  .dg li:not(.folder) {
-    background: #1a1a1a;
-    border-bottom: 1px solid #2c2c2c; }
-  .dg li.save-row {
-    line-height: 25px;
-    background: #dad5cb;
-    border: 0; }
-    .dg li.save-row select {
-      margin-left: 5px;
-      width: 108px; }
-    .dg li.save-row .button {
-      margin-left: 5px;
-      margin-top: 1px;
-      border-radius: 2px;
-      font-size: 9px;
-      line-height: 7px;
-      padding: 4px 4px 5px 4px;
-      background: #c5bdad;
-      color: #fff;
-      text-shadow: 0 1px 0 #b0a58f;
-      box-shadow: 0 -1px 0 #b0a58f;
-      cursor: pointer; }
-      .dg li.save-row .button.gears {
-        background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;
-        height: 7px;
-        width: 8px; }
-      .dg li.save-row .button:hover {
-        background-color: #bab19e;
-        box-shadow: 0 -1px 0 #b0a58f; }
-  .dg li.folder {
-    border-bottom: 0; }
-  .dg li.title {
-    padding-left: 16px;
-    background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;
-    cursor: pointer;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
-  .dg .closed li.title {
-    background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }
-  .dg .cr.boolean {
-    border-left: 3px solid #806787; }
-  .dg .cr.color {
-    border-left: 3px solid; }
-  .dg .cr.function {
-    border-left: 3px solid #e61d5f; }
-  .dg .cr.number {
-    border-left: 3px solid #2fa1d6; }
-    .dg .cr.number input[type=text] {
-      color: #2fa1d6; }
-  .dg .cr.string {
-    border-left: 3px solid #1ed36f; }
-    .dg .cr.string input[type=text] {
-      color: #1ed36f; }
-  .dg .cr.function:hover, .dg .cr.boolean:hover {
-    background: #111; }
-  .dg .c input[type=text] {
-    background: #303030;
-    outline: none; }
-    .dg .c input[type=text]:hover {
-      background: #3c3c3c; }
-    .dg .c input[type=text]:focus {
-      background: #494949;
-      color: #fff; }
-  .dg .c .slider {
-    background: #303030;
-    cursor: ew-resize; }
-  .dg .c .slider-fg {
-    background: #2fa1d6; }
-  .dg .c .slider:hover {
-    background: #3c3c3c; }
-    .dg .c .slider:hover .slider-fg {
-      background: #44abda; }

src/dat/index.js

@@ -14,7 +14,7 @@ module.exports = {
         NumberControllerBox: require('./controllers/NumberControllerBox'),
         NumberControllerSlider: require('./controllers/NumberControllerSlider'),
         FunctionController: require('./controllers/FunctionController'),
-        ColorController: require('./controllers/ColorController'),
+        ColorController: require('./controllers/ColorController')
     },
 
     dom: {
@@ -23,5 +23,7 @@ module.exports = {
 
     gui: {
         GUI: require('./gui/GUI')
-    }
+    },
+
+    GUI: require('./gui/GUI')
 };