Permalink
Browse files

initial commit

  • Loading branch information...
0 parents commit 51e30f3f719cb27766c02a2f2744b42a0fc51d2c @imathis committed Mar 1, 2011
@@ -0,0 +1,3 @@
+---
+BUNDLE_PATH: vendor
+BUNDLE_DISABLE_SHARED_GEMS: "1"
@@ -0,0 +1 @@
+vendor/ruby
@@ -0,0 +1 @@
+rvm 1.9.2
@@ -0,0 +1,6 @@
+source :rubygems
+
+gem "compass", "0.11.beta.2"
+gem 'rb-fsevent'
+gem 'guard-shell'
+gem 'guard-livereload'
@@ -0,0 +1,41 @@
+GEM
+ remote: http://rubygems.org/
+ specs:
+ addressable (2.2.4)
+ chunky_png (0.12.0)
+ compass (0.11.beta.2)
+ chunky_png (~> 0.12.0)
+ sass (>= 3.1.0.alpha.218)
+ configuration (1.2.0)
+ em-websocket (0.2.0)
+ addressable (>= 2.1.1)
+ eventmachine (>= 0.12.9)
+ eventmachine (0.12.10)
+ guard (0.3.0)
+ open_gem (~> 1.4.2)
+ thor (~> 0.14.6)
+ guard-livereload (0.1.7)
+ em-websocket (~> 0.2.0)
+ guard (>= 0.2.2)
+ json (~> 1.4.6)
+ guard-shell (0.1.1)
+ guard (>= 0.2.0)
+ json (1.4.6)
+ launchy (0.3.7)
+ configuration (>= 0.0.5)
+ rake (>= 0.8.1)
+ open_gem (1.4.2)
+ launchy (~> 0.3.5)
+ rake (0.8.7)
+ rb-fsevent (0.3.10)
+ sass (3.1.0.alpha.221)
+ thor (0.14.6)
+
+PLATFORMS
+ ruby
+
+DEPENDENCIES
+ compass (= 0.11.beta.2)
+ guard-livereload
+ guard-shell
+ rb-fsevent
@@ -0,0 +1,7 @@
+guard 'shell' do
+ watch(/^sass\/(.*)\.s[a,c]ss/){|m| `compass compile` }
+end
+
+guard 'livereload', :api_version => '1.5' do
+ watch(/.+\.(css|js|html|png|jpg|gif)$/)
+end
@@ -0,0 +1,25 @@
+# Require any additional compass plugins here.
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "stylesheets"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+# You can select your preferred output style here (can be overridden via the command line):
+output_style = :compact
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+line_comments = false
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
+
+module Sass::Script::Functions
+ def color_stop(color, stop = nil)
+ Compass::SassExtensions::Functions::GradientSupport::ColorStop.new(color, stop)
+ end
+end
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Oops, something went wrong.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>HSL Color Picker - by Brandon Mathis</title>
+ <link href="stylesheets/slider.css" media="screen" rel="stylesheet" type="text/css" />
+ <script src="mootools-core-1.3.js" type="text/javascript"></script>
+ <script src="mootools-more.js" type="text/javascript"></script>
+ <script src="slider.js" type="text/javascript"></script>
+ <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
+ </head>
+ <body>
+ <h1>
+ <span>A Most Excellent</span>
+ HSL Color Picker
+ </h1>
+ <p>Created for your enjoyment, by <a href="http://brandonmathis.com/">Brandon Mathis</a></p>
+ <div id="frame">
+ <ul id="hsl_picker">
+ <li id="color"></li>
+ <li class="slider"><div id="hue" max="360"><div class="thumb"></div></div><input id="h" type="text"/></li>
+ <li class="slider"><div id="saturation"><div class="thumb"></div></div><input id="s" type="text"/></li>
+ <li class="slider"><div id="lightness"><div class="thumb"></div></div><input id="l" type="text"/></li>
+ </ul>
+ <div id="shadow"></div>
+ </div>
+ <div id="colors">
+ <input id="hex" spellcheck="false" type="text"/>
+ <input id="rgb" spellcheck="false" type="text"/>
+ <input id="hsl" spellcheck="false" type="text"/>
+ </div>
+ <section id="why">
+ <h2>What's so great about HSL</h2>
+ <p>HSL (Hue, Saturation, Lightness) allows us to describe meaningful relationships between colors. Give this brown color, <code>hsl(36, 73%, 10%)</code>, it's clear that if we desaturate 40% more and lighten 70% we get <code>hsl(36, 33%, 80%)</code>, a cream color.
+ Look at that in hex, <code>#2C1D07</code> to <code>#DDCFBB</code>, or in rgb, <code>rgb(44, 29, 7)</code> to <code>rgb(221, 207, 187)</code>, and the relationship between colors isn't evident in any meaningful way.
+ </p>
+ <p>I use <a href="http://beta.compass-style.org/">Compass</a> and <a href="http://sass-lang.com">Sass</a> for all of my web design work and there are great color functions that allow me to
+ manipulate colors using these relationships. I can use Sass's <code>scale-color</code> to convert brown to cream like in the example above.</p>
+<pre><code>adjust-color(#2C1D07, $saturation: -40%, $lightness: 70%)
+//returns #DDCFBB</code></pre>
+ <p>Sass converts easily between rgb, hsl, and hex so I can have convenience of HSL color relationships but the browser compatibility of hex color notation.
+ There are other color functions like change-color which lets you set the properties of a color, and scale-color which applies color transformations on a relative scale. These are great, but because they work like HSL, you have to understand how HSL works.</p>
+ <h3>HSB &ne; HSL</h3>
+ <p>In graphics software I pick colors in HSB (Hue, Saturation, Brightness) because it feels more natural to work with than RGB or CMYK.
+ Now, with CSS3 we can use HSL which is actually quite different than HSB. Without a decent HSL color picker, it's difficult to understand. </p>
+ <h3>How to think in HSL</h3>
+ <p>Pick a Hue from 0 to 360 and with saturation at 100 and lightness at 50 and you'll have the purest form of that color. Reduce the saturation and you move towards gray.
+ Increasing the brightness moves you towards white, decreasing it moves you towards black.</p>
+
+ <a class="why" href="#why">Why?</a>
+ </section>
+ <section id="footer">
+ Colophon: HSL Color Picker relies HTML, CSS, and Javascript (no images) and those brilliant folks who created your browser.
+ </section>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit 51e30f3

Please sign in to comment.