updated example, now using absolute colors

adamstac · Nov 19, 2009 · 81533de · 81533de
1 parent 550f11e
commit 81533de
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 182 deletions.
diff --git a/README.markdown b/README.markdown
@@ -1,17 +1,5 @@
-# Project Goals:
-
-- Generate a color palette from the base color
-- Discern sensible palette variations based on a base color (dark, medium, light)
-- Allow button style types (subtle gradient, shiny gradient)
-- Make it easy to override/modify styles
-- Reduce weight of generated styles (define button base, add color through additional classes)
-- Create good defaults
-- Ensure approximate consistency for browsers that don't support CSS gradients
-- Style the button element
-- Provide a decent alternative styling for ie6
-
-## Screenshot of Demo
-![Demo](http://img.skitch.com/20091118-xbiqj7fmd7938wma5s7hbj8a9x.jpg)
+# Demo
+![Demo](http://s3.imathis.com/dev/compass/fancy-buttons/demo.png)
 
 ## Install
 
@@ -30,4 +18,16 @@ Add fancy-buttons to an existing compass project:
     require 'fancy-buttons'
 
     # Then run the following command:
-    compass --install -f fancy-buttons
+    compass -i -f fancy-buttons
+
+# Project Goals:
+
+- Generate a color palette from the base color
+- Discern sensible palette variations based on a base color (dark, medium, light)
+- Allow button style types (subtle gradient, shiny gradient)
+- Make it easy to override/modify styles
+- Reduce weight of generated styles (define button base, add color through additional classes)
+- Create good defaults
+- Ensure approximate consistency for browsers that don't support CSS gradients
+- Style the button element
+- Provide a decent alternative styling for ie6
diff --git a/Rakefile b/Rakefile
@@ -4,9 +4,9 @@ begin
     gemspec.name = "fancy-buttons"
     gemspec.summary = "Make fancy buttons with the Compass stylesheet authoring framework."
     gemspec.description = "Make fancy buttons with the Compass stylesheet authoring framework."
-    gemspec.email = "imathis@me.com"
+    gemspec.email = "brandon@imathis.com"
     gemspec.homepage = "http://github.com/imathis/fancy-buttons"
-    gemspec.authors = ["Brandon Mathis", "Chris Eppstein"]
+    gemspec.author = "Brandon Mathis"
     gemspec.files = []
     gemspec.files << "fancy-buttons.gemspec"
     gemspec.files << "README.markdown"

diff --git a/example/config.rb b/example/config.rb
@@ -10,4 +10,4 @@
 images_dir = "images"
 output_style = :compact
 # To enable relative paths to assets via compass helper functions. Uncomment:
-relative_assets = true
+# relative_assets = true
diff --git a/example/index.html b/example/index.html
@@ -4,55 +4,18 @@
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
     <title>Fancy Buttons - Demo</title>
     <link href="./stylesheets/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
-    <style type="text/css">
-      body {
-        font-size: 14px;
-        font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif; }
-
-      p {
-        padding: 0 0 10px; }
-      h3 {
-        margin-bottom: 0px; }
-    </style>
   </head>
   <body>
-    <h3>How about a fancy button?</h3>
-    <p>
+    <h1>Fancy Buttons</h1>
+    <button class="light">Click Me</button>
+    <div>
+      <button class="green">Click Me</button>
+      <a href="#" class="button blue">Click Me</a>
+      <button class="red">Click Me</button>
+    </div>
+    <div>
       <button>Click Me</button>
-      <code>a regular button</code>
-    </p>
-    <p>
-      <a href="#" class="button">That's Fancy!</a>
-      <code>a class="button"</code>
-    </p>
-    <h3>How about some color?</h3>
-    <p>
-      <button class="purple">Purple</button>
-      <button class="blue">Blue</button>
-      <button class="blue light">Light Blue</button>
-      <button class="green">Green</button>
-      <button class="yellow">Yellow</button>
-      <button class="orange">Orange</button>
-      <button class="red">Red</button>
-    </p>
-    <h3>Multiple colors?</h3>
-    <p>
-      <button class="blue cool">Click Me!</button>
-      <button class="red fire">On Fire!</button>
-    </p>
-    <h3>I hate color!</h3>
-    <p>
-      <button class="white">White</button>
-      <button class="silver">Silver</button>
-      <button>Gray</button>
-      <button class="dark_gray">Dark Gray</button>
-      <button class="black">Black</button>
-    </p>
-    <h3>Different sizes</h3>
-    <p>
-      <button class="rounded orange">Big Round!</button>
-      <button class="square white">It's hip to be Square</button>
-      <button class="small fuchsia">I'm just a little guy</button>
-    </p>
+      <button class="yellow">Click Me</button>
+    </div>
   </body>
 </html>
diff --git a/example/src/buttons.sass b/example/src/buttons.sass
@@ -1,58 +1,33 @@
-@import border_radius.sass
 @import fancy_buttons.sass
 
-/* primaries */
-!blue = blue
-!red = red
-!yellow = darken(desaturate(yellow, 10), 5)
-/* secondaires */
-!purple = adjust_hue(mix(!blue,!red), -15)
-!green = lighten(desaturate(green, 5), 20)
-!orange = mix(!yellow, !red)
+body
+  text-align: center
+  padding-top: 10px
+h1
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-size: 50px
+  color: #333
+  letter-spacing: -1px
+div
+  margin-top: 15px
 
-!light_blue = adjust_hue(lighten(!blue, 15), -20)
-!dark_gray = #333
+!green = darken(#57b42c, 8)
+!blue = adjust_hue(!green, 110)
+!red = adjust_hue(!green, -100)
 
-
-
-a.button, button
-  +fancy-button
+a.button, button  
+  +fancy-button-structure
+  +fancy-button-colors
   margin: 0 2px
-  color: #fff
-  &.purple
-    +fancy-button-colors(!purple)
-  &.blue
-    +fancy-button-colors(!blue)
-    &.light
-      +fancy-button-colors(!light_blue)
-    &.cool
-      +fancy-button-colors(!blue, !light_blue, !blue)
+  vertical-align: middle
+  &.light
+    +fancy-button-colors(#bbb)
   &.green
     +fancy-button-colors(!green)
-  &.fuchsia
-    +fancy-button-colors(fuchsia)
-  &.yellow
-    +fancy-button-colors(!yellow)
+  &.blue
+    +fancy-button-colors(!blue)
+    +fancy-button-size(32px, 32px)
   &.red
     +fancy-button-colors(!red)
-    &.fire
-      +fancy-button-colors(!red, !orange, !yellow)
-  &.orange
-    +fancy-button-colors(!orange)
-  &.white
-    +fancy-button-colors(white)
-    color: #333
-  &.silver
-    +fancy-button-colors(silver)
-  &.black
-    +fancy-button-colors(black)
-  &.small
-    +fancy-button-size(12px)
-    +border-radius(8px)
-  &.rounded
-    +fancy-button-size(24px)
-    +border-radius(25px)
-  &.dark_gray
-    +fancy-button-colors(!dark_gray)
-  &.square
-    +border-radius(0)
+  &.yellow
+    +fancy-button-colors(darken(desaturate(yellow, 35), 5))
diff --git a/lib/sass/_fancy_buttons.sass b/lib/sass/_fancy_buttons.sass
@@ -2,22 +2,22 @@
 @import fancy_gradient.sass
 
 !default_button_font_size ||= 18px
-!default_button_color ||= gray
+!default_button_color ||= #444
 !default_button_font_weight ||= "bold"
 !default_button_border_width ||= 1px
 !default_button_radius ||= 6px
 
 // Make a fancy button.
-=fancy-button(!color= !default_button_color, !radius= !default_button_radius, !font_size= !default_button_font_size, !border_width= !default_button_border_width)
+=fancy-button(!color= !default_button_color, !font_size= !default_button_font_size, !radius= !default_button_radius, !border_width= !default_button_border_width)
   +fancy-button-structure(!font_size, !radius, !border_width)
   +fancy-button-colors(!color)
 
 // Style the button's colors, picking the most appropriate color set for the base color.
-=fancy-button-colors(!color, !hover = 0, !active = 0)
+=fancy-button-colors(!color = !default_button_color, !hover = 0, !active = 0)
   @if !hover == 0
-    !hover = darken(!color, .02)
+    !hover = darken(!color, 3)
   @if !active == 0
-    !active = darken(!color, .05)
+    !active = darken(!color, 6)
 
   +fb-color(!color)
   &:hover, &:focus
@@ -27,44 +27,50 @@
 
 // Default state color settings
 =fb-color(!color)
-  !gradient_top = lighten(!color, .15)
-  !gradient_bottom = darken(!color, .06)
-  !border_color = darken(!color, .08)
+  !gradient_top = lighten(!color, 15)
+  !gradient_bottom = darken(!color, 06)
+  !border_color = darken(!color, 08)
+  @if saturation(!color) > 0
+    !color = saturate(!color, 40)
   +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color)
 
 // Apply the button colors specified for the button state into which it is mixed.
 =fb-state-colors(!color, !gradient_top, !gradient_bottom, !border)
   !text_shadow = darken(!color, 25)
-  background: #{!color} #{image_url("button_bg.png")} repeat-x bottom left
+  color: #fff
+  background-color= !color
   +fancy-gradient(!gradient_top, !gradient_bottom)
-  text-shadow= !text_shadow "1px 1px 1px"
+  @if luminosity(!color) < luminosity(#aaa)
+    text-shadow= !text_shadow "1px 1px 1px"
+  @else
+    text-shadow= lighten(!color, 10) "1px 1px 1px"
+    color: #333
   border:
     color= !border
 
 // Apply this mixin to a nested element to style an arrow
 =fancy-arrow(!font_size)
-  font-family: "Lucida Grande", Lucida, Arial, sans_serif
   font-size= !font_size + 4px
   line-height= !font_size - 4px
   margin-left= 4px
 
 // Layout the button's box
 =fancy-button-structure(!font_size = !default_button_font_size, !radius = !default_button_radius, !border_width = !default_button_border_width, !line_height = !font_size * 1.2)
   +fb-reset
-  @if !radius > 0
-    +border-radius(!radius)
-  +fancy-button-size(!font_size, !line_height)
+  +fancy-button-size(!font_size, !radius, !line_height)
   border-width= !border_width
   &:active
     border-width= !border_width + 1px
   &.disabled:active
     border-width= !border_width
 
-=fancy-button-size(!font_size = !default_button_font_size, !line_height = !font_size * 1.2)
+=fancy-button-size(!font_size = !default_button_font_size, !radius = !default_button_radius, !line_height = !font_size * 1.2)
   !v_padding = floor(!font_size/3.5)
   !h_padding = floor(!font_size)
   !v_padding_active = !v_padding - 1px
   !h_padding_active = !h_padding - 1px
+  @if !radius > 0
+    +border-radius(!radius)
   padding= !v_padding !h_padding
   font-size= !font_size
   line-height= !line_height
@@ -75,16 +81,15 @@
 
 // Reset the button's important properties to make sure they behave correctly
 =fb-reset(!font_weight = !default_button_font_weight)
+  font-family: "Lucida Grande", Lucida, Arial, sans_serif
+  background: #{image_url("button_bg.png")} repeat-x bottom left
   margin: 0
-  padding: 0
   display: inline-block
-  border: none
-  background: none
   cursor: pointer
   text-decoration: none
   border-style: solid
   font-weight= !font_weight
-  &:-moz-focus-inner
+  &::-moz-focus-inner
     border: none
     padding: 0
   &:focus

diff --git a/lib/sass/_fancy_gradient.sass b/lib/sass/_fancy_gradient.sass
@@ -5,16 +5,16 @@
   @if !color_stop_2 != 0
     !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2})"
   @if !color_stop_3 != 0
-    !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2})"
+    !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2}), color-stop(#{!color_stop_3_pos}, #{!color_stop_3})"
   background= "-webkit-gradient(linear, #{!gradient})"
   background= "-moz-linear-gradient(#{!gradient})"
 
 =fancy-gradient(!color1, !color2)
-  !top_shine = lighten(!color1, .18)
+  !top_shine = lighten(!color1, 18)
   !top_middle = !color1
-  !middle = lighten(!color2, .03)
+  !middle = lighten(!color2, 3)
   !bottom_middle = !color2
-  !bottom_glow = lighten(!color2, .1)
+  !bottom_glow = lighten(!color2, 10)
   !stop_pos_1 = .1
   !stop_pos_2 = .5
   !stop_pos_3 = .5

diff --git a/lib/templates/project/buttons.sass b/lib/templates/project/buttons.sass
@@ -1,9 +1,33 @@
-@import compass/reset.sass
-@import compass/css3.sass
 @import fancy_buttons.sass
 
-a.button
+body
+  text-align: center
+  padding-top: 10px
+h1
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  font-size: 50px
+  color: #333
+  letter-spacing: -1px
+div
+  margin-top: 15px
+
+!green = darken(#57b42c, 8)
+!blue = adjust_hue(!green, 110)
+!red = adjust_hue(!green, -100)
+
+a.button, button  
+  +fancy-button-structure
+  +fancy-button-colors
   margin: 0 2px
-  color: #fff
-a.button.default
-  +fancy-button
+  vertical-align: middle
+  &.light
+    +fancy-button-colors(#bbb)
+  &.green
+    +fancy-button-colors(!green)
+  &.blue
+    +fancy-button-colors(!blue)
+    +fancy-button-size(32px, 32px)
+  &.red
+    +fancy-button-colors(!red)
+  &.yellow
+    +fancy-button-colors(darken(desaturate(yellow, 35), 5))