built as single js proof of concept

README.md

@@ -7,7 +7,10 @@ dat-gui creates an interface that you can use to modify variables with very litt
 Download the [minified library]( todo ) and include it in your html.
 
 ```html
-<script src="gui.js"></script>
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/r3/gui.js"></script>
+
 ```
 
 Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable's initial value.

elements/controller-boolean/controller-boolean.styl

@@ -8,6 +8,7 @@ border-radius = height;
     height: 100%;
     cursor: pointer;
     padding-left: padding
+
 }
 
 #switch-track {
@@ -33,6 +34,9 @@ border-radius = height;
     #switch-knob {
         transform: translate3d( width - height, 0, 0 );
     }
+    &:hover #switch-knob { 
+        transform: translate3d( width - height, 0, 0 ) scale( 1.5 );
+    }
 }
 
 #text { 

examples/index.html

@@ -5,8 +5,15 @@
     <meta charset="utf-8">
     <title>dat-gui kitchen sink</title>
 
-    <script src="../../platform/platform.js"></script>
-    <link rel="import" href="../build/gui.html">
+    
+    <!-- // <script src="../../platform/platform.js"></script> -->
+
+    <!-- <link rel="import" href="../build/gui.html">  -->
+    <script src="../build/gui.js"></script>
+   
+
+
+
     
     <style type="text/css">
     body {

gui.html

@@ -1,4 +1,4 @@
-<!-- <script src="../platform/platform.js"></script> -->
+<script src="../platform/platform.js"></script>
 
 <!-- src -->
 <script src="elements/Gui.js"></script>

gulpfile.js

@@ -55,8 +55,8 @@ gulp.task( 'vulcanize', function() {
     gulp.src( paths.main )
         .pipe( vulcan( { 
             dest: 'build', 
-            inline: true
-            // strip: true 
+            inline: true,
+            strip: true 
         } ) );
 
 } );
@@ -83,6 +83,20 @@ gulp.task( 'build', [
     'docs' 
 ] );
 
+
+gulp.task( 'hypervulcanize', function() {
+
+    // - styles from layout.html
+    // styles
+
+
+    // platform.js
+    // polymer.html
+        // - polymer.js
+
+} );
+
+
 gulp.task( 'default', function() {
 
     gulp.watch( [ paths.css ], [ 'css', 'vulcanize' ] );

index.html

@@ -19,7 +19,9 @@
 <p>dat-gui creates an interface that you can use to modify variables with very little code. </p>
 <h3 id="basic-usage">Basic Usage</h3>
 <p>Download the <a href="todo">minified library</a> and include it in your html.</p>
-<pre><code class="lang-html">&lt;script src=&quot;gui.js&quot;&gt;&lt;/script&gt;
+<pre><code class="lang-html">
+&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.4/platform.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;//cdnjs.cloudflare.com/ajax/libs/dat-gui/r3/gui.js&quot;&gt;&lt;/script&gt;
 </code></pre>
 <p>Create controllers by adding objects and their properties. dat-gui chooses a controller based on the variable&#39;s initial value.</p>
 <pre><code class="lang-javascript">var gui = new Gui();