wikyd-fancy-buttons 0.5.1

data/README.markdown

@@ -0,0 +1,38 @@
+## Using fancy buttons on your site?
+Add a link to the [wiki](http://wiki.github.com/imathis/fancy-buttons)
+
+## Demo
+![screenshot](http://s3.imathis.com/dev/compass/fancy-buttons/demo.png)
+
+Without CSS gradient support:  
+![screenshot](http://s3.imathis.com/dev/compass/fancy-buttons/demo-no-gradients.png)
+
+
+## Install
+
+Install the plugin: (should automatically install latest dependencies for Compass, and Haml)
+    sudo gem install fancy-buttons
+
+To create a new project based on fancy-buttons:
+
+    compass install -r fancy-buttons -f fancy-buttons
+
+To add fancy-buttons to an existing compass project:
+
+    # Add the following lines to your compass configuration file:
+    require 'fancy-buttons'
+    
+    # Then run the following command:
+    compass install -r fancy-buttons -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

@@ -0,0 +1,21 @@
+begin
+  require 'jeweler'
+  Jeweler::Tasks.new do |gemspec|
+    gemspec.name = "fancy-buttons"
+    gemspec.summary = "Make fancy buttons with the Compass stylesheet authoring framework."
+    gemspec.description = "Easily style buttons with beautiful CSS3 features like gradients, rounded corners, etc. Don't worry the buttons also degrade nicely for browsers with no support. This requires the Compass stylesheet authoring framework."
+    gemspec.email = "brandon@imathis.com"
+    gemspec.homepage = "http://github.com/imathis/fancy-buttons"
+    gemspec.author = "Brandon Mathis"
+    gemspec.add_dependency('haml', '>= 3.0.0.beta.3')
+    gemspec.add_dependency('compass', '>= 0.10.0.rc3')
+    gemspec.files = []
+    gemspec.files << "fancy-buttons.gemspec"
+    gemspec.files << "README.markdown"
+    gemspec.files << "Rakefile"
+    gemspec.files << "VERSION"
+    gemspec.files += Dir.glob("lib/**/*")
+  end
+rescue LoadError
+  puts "Jeweler not available. Install it with: sudo gem install jeweler -s http://rubygems.org"
+end

data/fancy-buttons.gemspec

@@ -0,0 +1,53 @@
+# Generated by jeweler
+# DO NOT EDIT THIS FILE DIRECTLY
+# Instead, edit Jeweler::Tasks in Rakefile, and run the gemspec command
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{wikyd-fancy-buttons}
+  s.version = "0.5.1"
+
+  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
+  s.authors = ["Brandon Mathis"]
+  s.date = %q{2010-04-24}
+  s.description = %q{Easily style buttons with beautiful CSS3 features like gradients, rounded corners, etc. Don't worry the buttons also degrade nicely for browsers with no support. This requires the Compass stylesheet authoring framework. Forked, to handle text colors better.}
+  s.email = %q{brandon@imathis.com}
+  s.extra_rdoc_files = [
+    "README.markdown"
+  ]
+  s.files = [
+    "README.markdown",
+     "Rakefile",
+     "fancy-buttons.gemspec",
+     "lib/fancy-buttons.rb",
+     "lib/stylesheets/_fancy_buttons.sass",
+     "lib/stylesheets/_fancy_gradient.sass",
+     "lib/templates/project/button_bg.png",
+     "lib/templates/project/buttons.sass",
+     "lib/templates/project/ie6.sass",
+     "lib/templates/project/index.html",
+     "lib/templates/project/manifest.rb"
+  ]
+  s.homepage = %q{http://github.com/imathis/fancy-buttons}
+  s.rdoc_options = ["--charset=UTF-8"]
+  s.require_paths = ["lib"]
+  s.rubygems_version = %q{1.3.6}
+  s.summary = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
+
+  if s.respond_to? :specification_version then
+    current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
+    s.specification_version = 3
+
+    if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
+      s.add_runtime_dependency(%q<haml>, [">= 3.0.0.beta.3"])
+      s.add_runtime_dependency(%q<compass>, [">= 0.10.0.rc3"])
+    else
+      s.add_dependency(%q<haml>, [">= 3.0.0.beta.3"])
+      s.add_dependency(%q<compass>, [">= 0.10.0.rc3"])
+    end
+  else
+    s.add_dependency(%q<haml>, [">= 3.0.0.beta.3"])
+    s.add_dependency(%q<compass>, [">= 0.10.0.rc3"])
+  end
+end
+

data/lib/fancy-buttons.rb

@@ -0,0 +1,3 @@
+Compass::Frameworks.register('fancy-buttons',
+                             :stylesheets_directory => File.join(File.dirname(__FILE__), 'stylesheets'),
+                             :templates_directory   => File.join(File.dirname(__FILE__), 'templates'))

data/lib/stylesheets/_fancy_buttons.sass

@@ -0,0 +1,175 @@
+@import compass/css3
+@import fancy_gradient
+
+$fb_gradient_style: glossy !default
+$fb_invert_on_click: 1 !default
+$fb_font_size: 18px !default
+$fb_color: #444444 !default
+$fb_font_weight: bold !default
+$fb_border_width: 1px !default
+$fb_radius: 6px !default
+$fb_light_text: white !default
+$fb_dark_text: #222222 !default
+$fb_gradient: 1 !default
+$fb_image_path: image_url("button_bg.png") !default
+
+// Make a fancy button.
+
+=fancy-button($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_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: $fb_color, $hover: 0, $active: 0)
+  +fb-color($color, "default")
+  &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
+    +fb-color($color, "default")
+  &:hover, &:focus
+    @if $hover == 0
+      +fb-color(darken($color, 3), "hover", $color)
+    @else
+      +fb-color($hover, "hover")
+  &:active
+    @if $active == 0
+      +fb-color(darken($color, 6), "active", $color)
+    @else
+      +fb-color($active, "active")
+
+=fancy-button-matte($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
+  +fancy-button-structure($font_size, $radius, $border_width)
+  +fancy-button-colors-matte($color)
+
+=fancy-button-custom($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
+  +fancy-button-structure($font_size, $radius, $border_width)
+  +fancy-button-colors-custom($color, $font_size, $radius, $border_width)
+
+=fancy-button-colors-matte($color: $fb_color, $hover: 0, $active: 0)
+  $fb_current_style: $fb_gradient_style
+  $fb_gradient_style: matte
+  +fancy-button-colors($color, $hover, $active)
+  $fb_gradient_style: $fb_current_style
+
+=fancy-button-colors-custom($color: $fb_color, $hover: 0, $active: 0)
+  $fb_current_style: $fb_gradient_style
+  $fb_gradient_style: custom
+  +fancy-button-colors($color, $hover, $active)
+  $fb_gradient_style: $fb_current_style
+
+// Default state color settings
+=fb-color($color, $state, $lumins: $color)
+  $gradient_top: lighten($color, 15)
+  $gradient_bottom: darken($color, 6)
+  $border_color: darken($color, 8)
+  @if $fb_invert_on_click != 0
+    $border_color: darken($color, 15)
+  @if saturation($color) > 0
+    $color: saturate($color, 40)
+  @else if lightness($lumins) >= lightness(#aaaaaa)
+    $color: lighten($color, 20)
+  +fb-state-colors($color, $gradient_top, $gradient_bottom, $border_color, $state, $lumins)
+
+// Apply the button colors specified for the button state into which it is mixed.
+=fb-state-colors($color, $gradient_top, $gradient_bottom, $border, $state, $lumins: $color)
+  background-color: $color
+  @if $fb_gradient != 0
+    @if $fb_gradient_style == "glossy"
+      @if $fb_invert_on_click != 0 and $state == "active"
+        +invert-fancy-gradient($gradient_top, $gradient_bottom)
+      @else
+        +fancy-gradient($gradient_top, $gradient_bottom)
+    @else if $fb_gradient_style == "matte"
+      @if $fb_invert_on_click and $state == "active"
+        +invert-fancy-matte-gradient($gradient_top, $gradient_bottom)
+      @else
+        +fancy-matte-gradient($gradient_top, $gradient_bottom)
+    @else if $fb_gradient_style == "custom"
+      @if $fb_invert_on_click and $state == "active"
+        +invert-custom-fancy-gradient($gradient_top, $gradient_bottom)
+      @else
+        +custom-fancy-gradient($gradient_top, $gradient_bottom)
+  border:
+    color: $border
+  $text_shadow_settings: unquote("0px 1px 1px")
+  @if $fb_invert_on_click != 0 and $state == "active"
+    $text_shadow_settings: unquote("0px -1px -1px")
+  //@if lightness($lumins) < lightness(#aaaaaa)
+  text-shadow: darken($color, 25) $text_shadow_settings
+  color: $fb_light_text
+  //@else
+  //  text-shadow: lighten($color, 15) $text_shadow_settings
+  //  color: $fb_dark_text
+
+
+=fancy-button-text-colors($color, $hover, $active)
+  color: $color
+  &:hover, &:focus
+    color: $hover
+  &:active
+    color: $active
+  &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
+    color: $color
+
+// Apply this mixin to a nested element to style an arrow
+=fancy-arrow($font_size)
+  font-size: $font_size + 4px
+  line-height: $font_size - 4px
+  margin-left: 4px
+
+// Layout the button's box
+=fancy-button-structure($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
+  +fb-reset
+  +fancy-button-size($font_size, $radius, $border_width, $line_height)
+
+=fancy-button-size($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
+  // better padding for smaller buttons
+  $v_padding: 0
+  $h_padding: 0
+  @if $font_size > 15
+    $v_padding: floor($font_size / 3.5)
+    $h_padding: $font_size
+  @else
+    $v_padding: floor($font_size / 5)
+    $h_padding: floor($font_size / 1.2)
+  @if $radius > 0
+    +border-radius($radius)
+  font-size: $font_size
+  line-height: $line_height
+  +fancy-button-padding($v_padding, $h_padding, $border_width)
+
+=fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width)
+  $v_padding_active: $v_padding - 1px
+  $h_padding_active: $h_padding - 1px
+  padding: $v_padding $h_padding
+  border-width: $border_width
+  &:active
+    padding: $v_padding_active $h_padding_active
+    border-width: $border_width + 1px
+  &.disabled:active, &[disabled]
+    padding: $v_padding $h_padding
+    border-width: $border_width
+
+// Reset the button's important properties to make sure they behave correctly
+=fb-reset($font_weight: $fb_font_weight)
+  font-family: "Lucida Grande", Lucida, Arial, sans_serif
+  background: #{$fb_image_path} repeat-x bottom left
+  margin: 0
+  width: auto
+  overflow: visible
+  display: inline-block
+  cursor: pointer
+  text-decoration: none
+  border-style: solid
+  font-weight: $font_weight
+  &::-moz-focus-inner
+    border: none
+    padding: 0
+  &:focus
+    outline: none
+  &.disabled, &[disabled]
+    +disable-button
+
+=disable-button($opacity: 0.7)
+  +opacity($opacity)
+  &:hover, &:focus
+    cursor: default

data/lib/stylesheets/_fancy_gradient.sass

@@ -0,0 +1,28 @@
+=fancy-gradient($color1, $color2)
+  $top_shine: lighten($color1, 18)
+  $bottom_glow: lighten($color2, 10)
+  $top_middle: $color1
+  $middle: lighten($color2, 3)
+  $bottom_middle: $color2
+  +linear-gradient(color_stops($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow))
+
+=invert-fancy-gradient($color1, $color2)
+  $top: lighten($color2, 6)
+  $bottom: lighten($color2, 14)
+  $top_middle: lighten($color2, 8)
+  $middle: lighten($color2, 4)
+  $bottom_middle: lighten($color2, 1)
+  +linear-gradient(color_stops($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom))
+
+=fancy-matte-gradient($color1, $color2)
+  +linear-gradient(color_stops($color1, $color2))
+
+=invert-fancy-matte-gradient($color1, $color2)
+  $top: lighten($color2, 5)
+  $bottom: lighten($color2, 15)
+  $middle: lighten($color2, 8)
+  +linear-gradient(color_stops($top, $middle 40%, $middle 85%, $bottom))
+
+/* incase an inverted custom gradient isn't specified
+=invert-custom-fancy-gradient($color1, $color2)
+  +custom-fancy-gradient($color1, $color2)

data/lib/templates/project/buttons.sass

@@ -0,0 +1,58 @@
+@import fancy_buttons.sass
+
+body
+  text-align: center
+  padding-top: 10px
+h1, h2, h3
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+  color: #333333
+  letter-spacing: -1px
+h1
+  font-size: 50px
+h2
+  font-size: 30px
+div
+  margin-top: 15px
+  
+$green: darken(#57b42c, 8)
+$blue: adjust_hue($green, 110)
+$red: adjust_hue($green, -100)
+$heart_button: saturate(lighten($red, 2), 20)
+
+=custom-fancy-gradient($color1, $color2)
+  +radial-gradient("50% 10%, 10, 50% 10%, 30", $color1, darken($color2, 5))
+
+=invert-custom-fancy-gradient($color1, $color2)
+  +custom-fancy-gradient(lighten($color2, 10), lighten($color2, 25))
+
+a.button, button
+  +fancy-button-structure
+  +fancy-button-colors
+  margin: 0 2px
+  vertical-align: middle
+  &.light
+    +fancy-button-colors-matte(#dddddd)
+  &.matte-blue
+    +fancy-button-colors-matte($blue)
+  &.green
+    +fancy-button-colors($green)
+  &.blue
+    +fancy-button-size(32px, 32px, 3px)
+    +fancy-button-colors($blue)
+  &.red
+    +fancy-button-colors($red)
+  &.yellow
+    +fancy-button-colors(darken(desaturate(yellow, 35), 5))
+  &.custom
+    +fancy-button-size(30px, 10px)
+    +fancy-button-padding(2px, 12px, 2px)
+  &.heart
+    +fancy-button-colors-custom($heart_button)
+  &.arrow
+    +fancy-button-size(30px, 30px)
+    +fancy-button-colors-custom(#dddddd)
+    +fancy-button-padding(2px, 6px, 2px)
+  &.spade
+    +fancy-button-colors-custom($blue)
+    +fancy-button-padding(2px, 8px, 2px)
+    //color: #333 !important

data/lib/templates/project/ie6.sass

@@ -0,0 +1,4 @@
+a.button, form button
+  background-image: none !important
+  &:hover, &:active, &:focus
+    background-image: none !important

data/lib/templates/project/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <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" />
+    <!--[if lte IE 6]>
+      <link href='./stylesheets/ie6.css' rel='stylesheet' type='text/css' />
+    <![endif]-->
+  </head>
+  <body>
+    <h1>Fancy Buttons</h1>
+    <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>
+    <h2>Matte Gradient</h2>
+    <div>
+      <button class="light">Click Me</button>
+      <button class="matte-blue">Click Me</button>
+    </div>
+    <h2>Disabled Buttons</h2>
+    <div>
+      <button class="green" disabled>Click Me</button>
+      <button class="red" disabled>Click Me</button>
+    </div>
+    <h2>Custom Radial Gradient</h2>
+    <div>
+      <button class="custom heart">&hearts;</button>
+      <button class="custom arrow">&rarr;</button>
+      <button class="custom spade">&Omega;</button>
+    </div>
+  </body>
+</html>

data/lib/templates/project/manifest.rb

@@ -0,0 +1,11 @@
+# Make sure you list all the project template files here in the manifest.
+stylesheet 'ie6.sass', :media => 'screen, projection', :condition => "lt IE 7"
+image 'button_bg.png'
+
+#print "Install example files? (html and buttons.sass) (Y/n)?" 
+#response = gets
+#if response.downcase == "y" || response.downcase == "\n"
+file 'index.html'
+stylesheet 'buttons.sass', :media => 'screen, projection'
+#end
+#print 'Don\'t forget to @import "fancy-buttons"'

metadata

@@ -0,0 +1,112 @@
+--- !ruby/object:Gem::Specification 
+name: wikyd-fancy-buttons
+version: !ruby/object:Gem::Version 
+  hash: 9
+  prerelease: 
+  segments: 
+  - 0
+  - 5
+  - 1
+  version: 0.5.1
+platform: ruby
+authors: 
+- Brandon Mathis
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2010-04-24 00:00:00 -07:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: haml
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 62196421
+        segments: 
+        - 3
+        - 0
+        - 0
+        - beta
+        - 3
+        version: 3.0.0.beta.3
+  type: :runtime
+  version_requirements: *id001
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 15424179
+        segments: 
+        - 0
+        - 10
+        - 0
+        - rc
+        - 3
+        version: 0.10.0.rc3
+  type: :runtime
+  version_requirements: *id002
+description: Easily style buttons with beautiful CSS3 features like gradients, rounded corners, etc. Don't worry the buttons also degrade nicely for browsers with no support. This requires the Compass stylesheet authoring framework. Forked, to handle text colors better.
+email: brandon@imathis.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: 
+- README.markdown
+files: 
+- README.markdown
+- Rakefile
+- fancy-buttons.gemspec
+- lib/fancy-buttons.rb
+- lib/stylesheets/_fancy_buttons.sass
+- lib/stylesheets/_fancy_gradient.sass
+- lib/templates/project/button_bg.png
+- lib/templates/project/buttons.sass
+- lib/templates/project/ie6.sass
+- lib/templates/project/index.html
+- lib/templates/project/manifest.rb
+has_rdoc: true
+homepage: http://github.com/imathis/fancy-buttons
+licenses: []
+
+post_install_message: 
+rdoc_options: 
+- --charset=UTF-8
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.4.2
+signing_key: 
+specification_version: 3
+summary: Make fancy buttons with the Compass stylesheet authoring framework.
+test_files: []
+