fancy-buttons 0.2.0 → 0.3.0

data/README.markdown

@@ -1,16 +1,4 @@
-# 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
 ![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

data/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"

data/fancy-buttons.gemspec

@@ -5,13 +5,13 @@
 
 Gem::Specification.new do |s|
   s.name = %q{fancy-buttons}
-  s.version = "0.2.0"
+  s.version = "0.3.0"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
-  s.authors = ["Brandon Mathis", "Chris Eppstein"]
-  s.date = %q{2009-11-10}
+  s.authors = ["Brandon Mathis"]
+  s.date = %q{2009-11-19}
   s.description = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
-  s.email = %q{imathis@me.com}
+  s.email = %q{brandon@imathis.com}
   s.extra_rdoc_files = [
     "README.markdown"
   ]

data/lib/sass/_fancy_buttons.sass

@@ -1,93 +1,95 @@
-@import _fancy_gradient.sass
+@import border_radius.sass
+@import fancy_gradient.sass
 
-!default_buton_font_size ||= 18px
+!default_button_font_size ||= 18px
 !default_button_color ||= #444
 !default_button_font_weight ||= "bold"
 !default_button_border_width ||= 1px
 !default_button_radius ||= 6px
 
 // Make a fancy button.
-=fancy-button(!base= !default_button_color, !radius= !default_button_radius, !font_size= !default_buton_font_size, !border_width= !default_button_border_width)
-  +button-structure(!radius, !font_size, !border_width)
-  +fancy-button-colors(!base)
+=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(!base, !hover = !base, !active = !base)
-  +button-color(!base)
+=fancy-button-colors(!color = !default_button_color, !hover = 0, !active = 0)
+  @if !hover == 0
+    !hover = darken(!color, 3)
+  @if !active == 0
+    !active = darken(!color, 6)
   
+  +fb-color(!color)
   &:hover, &:focus
-    +hover-button-color(!hover)
-    
+    +fb-color(!hover)
   &:active
-    +active-button-color(!active)
+    +fb-color(!active)
 
 // Default state color settings
-=button-color(!color)
-  !gradient_top = lighten(!color, 30)
-  !gradient_bottom = darken(!color, 20)
-  !border_color = darken(!color, 25)
-  +button-state-colors(!color, !gradient_top, !gradient_bottom, !border_color)
-
-// Hover state color settings
-=hover-button-color(!color)
-  !hover = darken(!color, 10)
-  +button-color(!hover)
-
-// Active state color settings
-=active-button-color(!color)
-  !active = darken(!color, 20)
-  +button-color(!active)
+=fb-color(!color)
+  !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.
-=button-state-colors(!base, !gradient_top, !gradient_bottom, !border)
-  !text_shadow = darken(!base, 25)
-  background= !base url(/images/button_bg.png) "repeat-x bottom left"
-  background: #{!base} #{image_url("/images/btn_shade.png")} repeat-x bottom left
-  +fancy-button-gradient(!gradient_top, !gradient_bottom)
-  text-shadow= !text_shadow "1px 1px 1px"
+=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border)
+  !text_shadow = darken(!color, 25)
+  color: #fff
+  background-color= !color
+  +fancy-gradient(!gradient_top, !gradient_bottom)
+  @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
-=button-arrow(!font_size)
-  font-family: "Lucida Grande", Lucida, Arial, sans_serif
+=fancy-arrow(!font_size)
   font-size= !font_size + 4px
   line-height= !font_size - 4px
   margin-left= 4px
 
 // Layout the button's box
-=button-structure(!radius, !font_size, !border_width, !line_height = !font_size * 1.2)
-  +button-reset
-  background= url(/images/button_bg.png) "repeat-x bottom left"
-  !v_padding = floor(!font_size/2.5)
+=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
+  +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, !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)
-  border-width= !border_width
-  font-size= !font_size
   padding= !v_padding !h_padding
+  font-size= !font_size
   line-height= !line_height
   &:active
-    border-width= !border_width + 1px
     padding= !v_padding_active !h_padding_active
   &.disabled:active
-    border-width= !border_width
     padding= !v_padding !h_padding
 
 // Reset the button's important properties to make sure they behave correctly
-=button-reset(!font_weight = !default_button_font_weight)
+=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

data/lib/sass/_fancy_gradient.sass

@@ -1,28 +1,21 @@
-=fb-linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop_1 = 0, !color_stop_1_pos = .3, !color_stop_2 = 0, !color_stop_2_pos = .6, !color_stop_3 = 0, !color_stop_3_pos = .9)
+=fancy-linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop_1 = 0, !color_stop_1_pos = .3, !color_stop_2 = 0, !color_stop_2_pos = .6, !color_stop_3 = 0, !color_stop_3_pos = .9)
   !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
   @if !color_stop_1 != 0
     !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1})"
   @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})"
 
-=fb-v-gradient(!color1, !color2)
-  +fb-linear-gradient("left top", "left bottom", !color1, !color2)
-
-=fb-h-gradient(!color1, !color2)
-  +fb-linear-gradient("left top", "right top", !color1, !color2)
-
-=fb-v-gradient-3color(!color1, !color2, !stop_pos=.5, !color3=mix(!color1, !color2, 30))
-  +fb-linear-gradient("left top", "left bottom", !color1, !color2, !color3, !stop_pos)
-
-=fancy-button-gradient(!color1, !color2)
-  !start = lighten(!color1, 25)
-  !end = mix(!color1, !color2, 60)
+=fancy-gradient(!color1, !color2)
+  !top_shine = lighten(!color1, 18)
+  !top_middle = !color1
+  !middle = lighten(!color2, 3)
+  !bottom_middle = !color2
+  !bottom_glow = lighten(!color2, 10)
   !stop_pos_1 = .1
-  !color3 = mix(!color1, !color2, 30)
   !stop_pos_2 = .5
-  !stop_pos_3 = .95
-  +fb-linear-gradient("left top", "left bottom", !start, !end, !color1, !stop_pos_1, !color2, !stop_pos_2, !color2, !stop_pos_3)
+  !stop_pos_3 = .5
+  +fancy-linear-gradient("left top", "left bottom", !top_shine, !bottom_glow, !top_middle, !stop_pos_1, !middle, !stop_pos_2, !bottom_middle, !stop_pos_3)

data/lib/templates/project/buttons.sass

@@ -1,31 +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
-a.button.default
-  +fancy-button
-a.button.small
-  +fancy-button(#fff, 20px, 12px, 1px)
-a.button.grey
-  +fancy-button(#666, 0px)
-a.button.grey.dark
-  +fancy-button(#333)
-  +glossy-button
-a.button.yellow
-  +fancy-button(#f0ec62)
-a.button.light.yellow
-  +fancy-button(#fafdcc)
-a.button.light.blue
-  +fancy-button(#007ab5)
-a.button.blue
-  +fancy-button(#00529b)
-a.button.green
-  +fancy-button(#017406)
-a.button.red
-  +fancy-button(#740A00)
-a.button.dark.blue
-  +fancy-button(#002473)
-a.button.big.orange
-  +fancy-button(#C94101, 100px, 25px, 3px)
+  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))

data/lib/templates/project/index.html

@@ -3,46 +3,19 @@
   <head>
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
     <title>Fancy Buttons - Demo</title>
-    <link href="./stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
-    <!--[if lte IE6]>
-      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
-    <![endif]-->
+    <link href="./stylesheets/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
   </head>
   <body>
-    <p>
-      How about a fancy button?
-    </p>
-    <p>
-      <a href="#" class="button default">That's Fancy!</a><a href="#" class="button small">Here's a Smaller Button</a><a href="#" class="button grey">Dark Button</a><a href="#" class="button dark grey">Darker Button</a>
-    </p>
-    <p>
-      In color:
-    </p>
-    <p>
-      <a href="#" class="button light yellow">Light Yellow</a><a href="#" class="button yellow">Darker Yellow</a>
-    </p>
-    <p>
-      How about some blues?
-    </p><p>
-      <a href="#" class="button light blue">Light Blue</a><a href="#" class="button blue">Medium Blue</a><a href="#" class="button dark blue">Dark Blue</a>
-    </p>
-    <p>
-      Green?
-    </p>
-    <p>
-      <a href="#" class="button green">Green Button</a>
-    </p>
-    <p>
-      Red?
-    </p>
-    <p>
-      <a href="#" class="button red">Red Button</a>
-    </p>
-    <p>
-      Big and Orange?
-    </p>
-    <p>
-      <a href="#" class="button orange big">Big Orange Button</a>
-    </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>
+      <button class="yellow">Click Me</button>
+    </div>
   </body>
 </html>

metadata

@@ -1,21 +1,20 @@
 --- !ruby/object:Gem::Specification 
 name: fancy-buttons
 version: !ruby/object:Gem::Version 
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors: 
 - Brandon Mathis
-- Chris Eppstein
 autorequire: 
 bindir: bin
 cert_chain: []
 
-date: 2009-11-10 00:00:00 -08:00
+date: 2009-11-19 00:00:00 -06:00
 default_executable: 
 dependencies: []
 
 description: Make fancy buttons with the Compass stylesheet authoring framework.
-email: imathis@me.com
+email: brandon@imathis.com
 executables: []
 
 extensions: []