design improvements to demo page

css/app.css

@@ -63,11 +63,35 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
+/* float clearing for IE6 */
+/* line 17, ../sass/_base.sass */
+* html .clearfix {
+  height: 1%;
+  overflow: visible;
+}
+
+/* float clearing for IE7 */
+/* line 23, ../sass/_base.sass */
+* + html .clearfix {
+  min-height: 1%;
+}
+
+/* float clearing for everyone else */
+/* line 28, ../sass/_base.sass */
+.clearfix:after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+  font-size: 0;
+}
+
 /* =Global */
 /* line 9, ../sass/app.sass */
 body, input, textarea {
   margin: 40px;
-  color: #aaaaaa;
+  color: #888888;
   background: #222222;
   font: 16px/1.625em "Varela Round", "lucida grande", tahoma, sans-serif;
   font-weight: 400;
@@ -76,99 +100,151 @@ body, input, textarea {
 
 /* line 18, ../sass/app.sass */
 h1, h2, h3, h4, h5, h6 {
+  color: white;
   font-family: "Terminal Dosis", "lucida grande", tahoma, sans-serif;
   line-height: 1em;
   font-weight: 600;
   margin-bottom: 0.5em;
 }
 
-/* line 24, ../sass/app.sass */
+/* line 25, ../sass/app.sass */
 h1 {
   font-size: 72px;
   line-height: 0.5em;
   margin-bottom: 0.3em;
 }
-/* line 28, ../sass/app.sass */
+/* line 29, ../sass/app.sass */
 h1 small {
   font-size: 20px;
 }
 /* line 31, ../sass/app.sass */
+h1 span {
+  -moz-transition: color 1s;
+  -webkit-transition: color 1s;
+  -o-transition: color 1s;
+  transition: color 1s;
+}
+/* line 34, ../sass/app.sass */
 h1:hover .char1 {
-  color: greenyellow;
+  -moz-transition: color 0.2s;
-}
+  -webkit-transition: color 0.2s;
-/* line 33, ../sass/app.sass */
+  -o-transition: color 0.2s;
-h1:hover .char2 {
+  transition: color 0.2s;
-  color: indianred;
+  color: red;
-}
-/* line 35, ../sass/app.sass */
-h1:hover .char3 {
-  color: khaki;
 }
 /* line 37, ../sass/app.sass */
-h1:hover .char4 {
+h1:hover .char2 {
-  color: lightsteelblue;
+  -moz-transition: color 0.2s 0.1s;
+  -webkit-transition: color 0.2s 0.1s;
+  -o-transition: color 0.2s 0.1s;
+  transition: color 0.2s 0.1s;
+  color: orange;
 }
-/* line 39, ../sass/app.sass */
+/* line 40, ../sass/app.sass */
-h1:hover .char5 {
+h1:hover .char3 {
-  color: violet;
+  -moz-transition: color 0.2s 0.2s;
-}
+  -webkit-transition: color 0.2s 0.2s;
-/* line 41, ../sass/app.sass */
+  -o-transition: color 0.2s 0.2s;
-h1:hover .char6 {
+  transition: color 0.2s 0.2s;
-  color: skyblue;
+  color: yellow;
 }
 /* line 43, ../sass/app.sass */
-h1:hover .char7 {
+h1:hover .char4 {
-  color: lightseagreen;
+  -moz-transition: color 0.2s 0.3s;
+  -webkit-transition: color 0.2s 0.3s;
+  -o-transition: color 0.2s 0.3s;
+  transition: color 0.2s 0.3s;
+  color: green;
 }
-/* line 45, ../sass/app.sass */
+/* line 46, ../sass/app.sass */
-h1:hover .char8 {
+h1:hover .char5 {
-  color: tan;
+  -moz-transition: color 0.2s 0.4s;
-}
+  -webkit-transition: color 0.2s 0.4s;
-/* line 47, ../sass/app.sass */
+  -o-transition: color 0.2s 0.4s;
-h1:hover .char9 {
+  transition: color 0.2s 0.4s;
-  color: darkmagenta;
+  color: blue;
 }
 /* line 49, ../sass/app.sass */
-h1:hover .char10 {
+h1:hover .char6 {
-  color: tomato;
+  -moz-transition: color 0.2s 0.5s;
+  -webkit-transition: color 0.2s 0.5s;
+  -o-transition: color 0.2s 0.5s;
+  transition: color 0.2s 0.5s;
+  color: indigo;
 }
-/* line 51, ../sass/app.sass */
+/* line 52, ../sass/app.sass */
+h1:hover .char7 {
+  -moz-transition: color 0.2s 0.6s;
+  -webkit-transition: color 0.2s 0.6s;
+  -o-transition: color 0.2s 0.6s;
+  transition: color 0.2s 0.6s;
+  color: violet;
+}
+/* line 55, ../sass/app.sass */
+h1:hover .char8 {
+  -moz-transition: color 0.2s 0.7s;
+  -webkit-transition: color 0.2s 0.7s;
+  -o-transition: color 0.2s 0.7s;
+  transition: color 0.2s 0.7s;
+  color: red;
+}
+/* line 58, ../sass/app.sass */
+h1:hover .char9 {
+  -moz-transition: color 0.2s 0.8s;
+  -webkit-transition: color 0.2s 0.8s;
+  -o-transition: color 0.2s 0.8s;
+  transition: color 0.2s 0.8s;
+  color: orange;
+}
+/* line 61, ../sass/app.sass */
+h1:hover .char10 {
+  -moz-transition: color 0.2s 0.9s;
+  -webkit-transition: color 0.2s 0.9s;
+  -o-transition: color 0.2s 0.9s;
+  transition: color 0.2s 0.9s;
+  color: yellow;
+}
+/* line 64, ../sass/app.sass */
 h1:hover .char11 {
-  color: goldenrod;
+  -moz-transition: color 0.2s 1s;
+  -webkit-transition: color 0.2s 1s;
+  -o-transition: color 0.2s 1s;
+  transition: color 0.2s 1s;
+  color: green;
 }
 
-/* line 55, ../sass/app.sass */
+/* line 69, ../sass/app.sass */
 h2 {
   font-size: 40px;
   line-height: 1.2em;
   text-align: center;
 }
 
-/* line 60, ../sass/app.sass */
+/* line 74, ../sass/app.sass */
 h3 {
   font-size: 16px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
-/* line 65, ../sass/app.sass */
+/* line 79, ../sass/app.sass */
 h4 {
   font-size: 20px;
   margin-bottom: 1.25em;
 }
 
-/* line 69, ../sass/app.sass */
+/* line 83, ../sass/app.sass */
 p {
   margin-bottom: 1.25em;
 }
 
-/* line 73, ../sass/app.sass */
+/* line 86, ../sass/app.sass */
 strong {
   font-weight: bold;
 }
 
 /* Forms */
-/* line 79, ../sass/app.sass */
+/* line 92, ../sass/app.sass */
 input[type=text],
 input[type=password],
 textarea {
@@ -187,88 +263,128 @@ textarea {
   border-radius: 4px;
 }
 
-/* line 90, ../sass/app.sass */
+/* line 103, ../sass/app.sass */
 input[type=text]:focus,
 textarea:focus {
   color: #373737;
 }
 
-/* line 94, ../sass/app.sass */
+/* line 107, ../sass/app.sass */
 textarea {
   padding-left: 3px;
   width: 98%;
 }
 
-/* line 98, ../sass/app.sass */
+/* line 111, ../sass/app.sass */
 input[type=text] {
   padding: 3px;
 }
 
 /* Links */
-/* line 102, ../sass/app.sass */
+/* line 115, ../sass/app.sass */
 a {
-  color: #5f92aa;
+  color: #09a1ec;
   text-decoration: none;
 }
-/* line 105, ../sass/app.sass */
+/* line 118, ../sass/app.sass */
 a:hover {
-  color: #afc8d4;
+  color: #7fd2fa;
 }
 
-/* line 109, ../sass/app.sass */
+/* line 122, ../sass/app.sass */
+#container {
+  width: 900px;
+  margin: 0 auto;
+}
+
+/* line 126, ../sass/app.sass */
 header {
   padding-bottom: 40px;
   text-align: center;
+  width: 600px;
+  margin: 0 auto;
 }
 
-/* line 113, ../sass/app.sass */
+/* line 132, ../sass/app.sass */
-.imageSection {
+.medianCutPalette h3 {
-  overflow: hidden;
+  margin-top: 20px;
-  *zoom: 1;
-  margin-bottom: 80px;
 }
-/* line 116, ../sass/app.sass */
+
+/* line 135, ../sass/app.sass */
+.imageSection {
+  margin-bottom: 80px;
+  background: #111111;
+  -moz-border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -o-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -khtml-border-radius: 10px;
+  border-radius: 10px;
+}
+/* line 139, ../sass/app.sass */
 .imageSection .imageWrap {
+  -moz-border-radius-topleft: 10px;
+  -webkit-border-top-left-radius: 10px;
+  -o-border-top-left-radius: 10px;
+  -ms-border-top-left-radius: 10px;
+  -khtml-border-top-left-radius: 10px;
+  border-top-left-radius: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  -o-border-bottom-left-radius: 10px;
+  -ms-border-bottom-left-radius: 10px;
+  -khtml-border-bottom-left-radius: 10px;
+  border-bottom-left-radius: 10px;
   width: 400px;
   height: 300px;
   float: left;
-  position: relative;
   margin-right: 20px;
-  border: 1px solid #444444;
   background: url(../img/dark_checkered_bg.png);
 }
-/* line 124, ../sass/app.sass */
+/* line 146, ../sass/app.sass */
 .imageSection .imageWrap .targetImage {
-  position: absolute;
+  -moz-border-radius-topleft: 10px;
-  top: 50%;
+  -webkit-border-top-left-radius: 10px;
-  left: 50%;
+  -o-border-top-left-radius: 10px;
-  margin-left: -200px;
+  -ms-border-top-left-radius: 10px;
-  margin-top: -150px;
+  -khtml-border-top-left-radius: 10px;
+  border-top-left-radius: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  -o-border-bottom-left-radius: 10px;
+  -ms-border-bottom-left-radius: 10px;
+  -khtml-border-bottom-left-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
-/* line 131, ../sass/app.sass */
+/* line 148, ../sass/app.sass */
 .imageSection .colors {
+  margin-top: 20px;
   width: 400px;
   float: left;
 }
-/* line 134, ../sass/app.sass */
+/* line 152, ../sass/app.sass */
 .imageSection .colors .function {
   clear: left;
   margin-bottom: 10px;
 }
-/* line 138, ../sass/app.sass */
+/* line 156, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch {
   width: 40px;
   height: 20px;
-  margin: 0 4px 4px 0;
+  margin-right: 2px;
   background: #dddddd;
   float: left;
-  -moz-transition: all 0.2s;
+  -moz-transition: all 0.5s;
-  -webkit-transition: all 0.2s;
+  -webkit-transition: all 0.5s;
-  -o-transition: all 0.2s;
+  -o-transition: all 0.5s;
-  transition: all 0.2s;
+  transition: all 0.5s;
 }
-/* line 145, ../sass/app.sass */
+/* line 163, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:hover {
+  -moz-transition: none;
+  -webkit-transition: none;
+  -o-transition: none;
+  transition: none;
   -moz-transform: scale(1.2, 1.2);
   -webkit-transform: scale(1.2, 1.2);
   -o-transform: scale(1.2, 1.2);
@@ -279,7 +395,7 @@ header {
   -o-box-shadow: 0 1px 10px black;
   box-shadow: 0 1px 10px black;
 }
-/* line 148, ../sass/app.sass */
+/* line 167, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:first-child {
   -moz-border-radius-topleft: 4px;
   -webkit-border-top-left-radius: 4px;
@@ -294,7 +410,7 @@ header {
   -khtml-border-bottom-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-/* line 150, ../sass/app.sass */
+/* line 169, ../sass/app.sass */
 .imageSection .colors .function .swatches .swatch:last-child {
   -moz-border-radius-topright: 4px;
   -webkit-border-top-right-radius: 4px;
@@ -310,7 +426,21 @@ header {
   border-bottom-right-radius: 4px;
 }
 
-/* line 153, ../sass/app.sass */
+/* Hardcoding the offset for the FB icon example */
+/* line 175, ../sass/app.sass */
+.fbIcon .imageWrap .targetImage {
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  -o-border-radius: 0;
+  -ms-border-radius: 0;
+  -khtml-border-radius: 0;
+  border-radius: 0;
+  position: relative;
+  top: 142px;
+  left: 192px;
+}
+
+/* line 182, ../sass/app.sass */
 canvas {
   display: none;
 }

index.html

@@ -47,56 +47,68 @@
 
 <!-- Using Mustache templating -->
 <script id='template' type='text/x-mustache'>
-  {{#files}}
+  {{#images}}
-  <div class="imageSection">
+  <div class="imageSection clearfix {{class}} ">
     <div class="imageWrap">
-      <img class="targetImage" src="img/{{.}}" />
+      <img class="targetImage" src="img/{{file}}" data-colorcount="{{colorCount}}" />
     </div>
     <div class="colors">
-      <div class="function dominantColor">
+      <div class="function dominantColor clearfix">
         <h3>Dominant Color</h3>
-        <div class="swatches"></div>
+        <div class="swatches clearfix"></div>
       </div>
-      <div class="function medianCutPalette">
+      <div class="function medianCutPalette clearfix">
         <h3>Palette</h3>
-        <div class="swatches"></div>
+        <div class="swatches clearfix"></div>
       </div>
     </div>
   </div>
-  {{/files}}
+  {{/images}}
 </script>
 
 <script>
 $(document).ready(function(){
 
   // Use mustache.js templating to create layout
-	var images = { files: [ "1.jpg", "10.jpg", "2.jpg", "icon1.png"] };
+  
-	var html = Mustache.to_html($('#template').html(), images);
+  var imageArray = { images: [
+    {"file": "3.jpg"},
+    {"file": "4.jpg"},  
+    {"file": "5.jpg"}, 
+    {"file": "logo1.png"},
+    {"file": "icon1.png", "colorCount": "4", "class": "fbIcon"}  
+  ]};
+
+	var html = Mustache.to_html($('#template').html(), imageArray);
 	$('#main').append(html);
 
   // Use lettering.js to give letter by letter styling control for the h1 title
   $("h1").lettering();
 
 	
-	// Once images are loaded, loop through each one, getting dominant color
+  // Once images are loaded, loop through each one, getting dominant color
-	// and palette and displaying them.
+  // and palette and displaying them.
-	$('img').imagesLoaded(function(){
+  $('img').imagesLoaded(function(){
 	
-		$('img').each(function(index){
+    $('img').each(function(index){
 
-      // Get the dominant color and palette for this image
+      var imageSection = $(this).closest('.imageSection'),
-			var dominantColor = getDominantColor(this),
-			    medianPalette = createPalette(this, 10),
-			    imageSection = $(this).closest('.imageSection'),
           swatchEl;
 
       // Dominant Color
+	    var dominantColor = getDominantColor(this);
+	
 			swatchEl = $('<div>', {
 				'class': 'swatch'
 			}).css('background-color','rgba('+dominantColor.r+','+dominantColor.g+ ','+dominantColor.b+', 1)');
 			imageSection.find('.dominantColor .swatches').append(swatchEl);
 
+
+
       // Palette
+      var colorCount = $(this).attr('data-colorcount')? $(this).data('colorcount'): 10;
+	    var medianPalette = createPalette(this, colorCount);
+
 			var medianCutPalette = imageSection.find('.medianCutPalette .swatches');
       $.each(medianPalette, function(index, value){
 				swatchEl = $('<div>', {

js/color-thief.js

@@ -81,9 +81,11 @@ function getDominantColor(sourceImage){
 	// Store the RGB values in an array format suitable for quantize function
 	var pixelArray = [];
 	for (var i = 0; i < pixelCount; i++) {  
-		// If pixel is mostly opaque
+		// If pixel is mostly opaque and not white
 		if(pixels[i*4+3] >= 125){
-	   		pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			if(!(pixels[i*4] > 250 && pixels[i*4+1] > 250 && pixels[i*4+2] > 250)){
+	   			pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			}
 		}
 	};
 
@@ -101,7 +103,7 @@ function getDominantColor(sourceImage){
 
 
 /*
- * createPalette(sourceImage)
+ * createPalette(sourceImage, colorCount)
  * returns array[ {r: num, g: num, b: num}, {r: num, g: num, b: num}, ...]
  *
  * Use the median cut algorithm provided by quantize.js to cluster similar
@@ -122,9 +124,11 @@ function createPalette(sourceImage, colorCount){
 	// Store the RGB values in an array format suitable for quantize function
 	var pixelArray = [];
 	for (var i = 0; i < pixelCount; i++) {  
-		// If pixel is mostly opaque
+		// If pixel is mostly opaque and not white
 		if(pixels[i*4+3] >= 125){
-	    	pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			if(!(pixels[i*4] > 250 && pixels[i*4+1] > 250 && pixels[i*4+2] > 250)){
+	    		pixelArray.push( [pixels[i*4], pixels[i*4+1], pixels[i*4+2]]);
+			}
 		}
 	};
 

sass/_base.sass

@@ -0,0 +1,36 @@
+$bgColor: #222
+$color: #888
+$headingColor: #fff
+$altColor: scale-color($color, $lightness: 50%)
+$lightGray: #eee
+$blue: #09a1ec
+$orange: #e83
+$green: #6bb445
+
+$radius: 4px
+ 
+@import "compass/reset" 
+@import "compass/css3"
+
+
+/* float clearing for IE6 */
+* html .clearfix
+  height: 1%
+  overflow: visible
+
+
+/* float clearing for IE7 */
+*+html .clearfix
+  min-height: 1%
+
+
+/* float clearing for everyone else */
+.clearfix:after
+  clear: both
+  content: "."
+  display: block
+  height: 0
+  visibility: hidden
+  font-size: 0
+
+

sass/app.sass

@@ -0,0 +1,183 @@
+@import "base"
+
+
+
+
+/* =Global */
+
+
+body, input, textarea 
+  margin: 40px
+  color: $color 
+  background: $bgColor
+  font:  16px/1.625em 'Varela Round',"lucida grande",tahoma,sans-serif
+  font-weight: 400
+  -webkit-font-smoothing: antialiased
+
+
+h1,h2,h3,h4,h5,h6 
+  color: $headingColor
+  font-family: 'Terminal Dosis', 'lucida grande', tahoma, sans-serif
+  line-height: 1em
+  font-weight: 600
+  margin-bottom: .5em
+
+h1
+  font-size:  72px
+  line-height: .5em
+  margin-bottom: .3em
+  small
+    font-size: 20px
+  span
+    +transition(color 1s)
+  &:hover
+    .char1
+      +transition(color .2s)
+      color: red
+    .char2
+      +transition(color .2s .1s)
+      color: orange
+    .char3
+      +transition(color .2s .2s)
+      color: yellow
+    .char4
+      +transition(color .2s .3s)
+      color: green
+    .char5
+      +transition(color .2s .4s)
+      color: blue
+    .char6
+      +transition(color .2s .5s)
+      color: indigo
+    .char7
+      +transition(color .2s .6s)
+      color: violet
+    .char8
+      +transition(color .2s .7s)
+      color: red
+    .char9
+      +transition(color .2s .8s)
+      color: orange
+    .char10
+      +transition(color .2s .9s)
+      color: yellow
+    .char11
+      +transition(color .2s 1s)
+      color: green
+
+
+h2
+  font-size:  40px
+  line-height:  1.2em
+  text-align: center
+
+h3
+  font-size:  16px	
+  letter-spacing: 0.1em
+  text-transform: uppercase
+
+h4
+  font-size: 20px
+  margin-bottom: 1.25em
+
+p 
+  margin-bottom: 1.25em
+
+strong 
+  font-weight: bold
+
+
+
+/* Forms */
+input[type=text],
+input[type=password],
+textarea 
+  background: #fafafa
+  +box-shadow(inset 0 1px 1px rgba(0,0,0,0.1))
+  border: 1px solid #ddd
+  color: #888
+  +border-radius($radius)
+
+
+
+input[type=text]:focus,
+textarea:focus 
+  color: #373737
+
+textarea 
+  padding-left: 3px
+  width: 98%
+
+input[type=text] 
+  padding: 3px
+
+/* Links */
+a
+  color: $blue
+  text-decoration: none
+  &:hover
+    color: scale-color($blue, $lightness: 50%)
+
+
+#container
+  width: 900px
+  margin: 0 auto
+  
+header
+  padding-bottom: 40px
+  text-align: center
+  width: 600px
+  margin: 0 auto
+
+.medianCutPalette h3
+  margin-top: 20px
+  
+.imageSection
+  margin-bottom: 80px
+  background: #111
+  +border-radius(10px)
+  .imageWrap
+    +border-left-radius(10px)
+    width: 400px
+    height: 300px
+    float: left
+    margin-right: 20px
+    background: url(../img/dark_checkered_bg.png)
+    .targetImage
+      +border-left-radius(10px)
+  .colors
+    margin-top: 20px
+    width: 400px
+    float: left
+    .function
+      clear: left
+      margin-bottom: 10px
+      .swatches
+        .swatch
+          width: 40px
+          height: 20px
+          margin-right: 2px
+          background: #ddd
+          float: left
+          +transition(all .5s)
+          &:hover
+            +transition(none)
+            +scale(1.2, 1.2)
+            +box-shadow(0 1px 10px rgba(0,0,0,1))
+          &:first-child
+            +border-left-radius($radius)
+          &:last-child
+            +border-right-radius($radius)
+
+/* Hardcoding the offset for the FB icon example */
+.fbIcon
+  .imageWrap
+    .targetImage
+      +border-radius(0)
+      position: relative
+      top: 142px
+      left: 192px
+      
+  
+canvas
+  display: none