fancy-buttons 0.2.0

data/README.markdown

@@ -0,0 +1,33 @@
+# 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://s3.imathis.com/dev/compass/fancy-buttons/demo.png)
+
+## Install
+
+Install the plugin:
+
+    sudo gem install imathis-fancy-buttons
+
+Create a new project based on fancy-buttons:
+
+    compass -r compass-colors -r fancy-buttons -f fancy-buttons my_project_name
+
+Add fancy-buttons to an existing compass project:
+
+    # Add the following lines to your compass configuration file:
+    require 'compass-colors'
+    require 'fancy-buttons'
+    
+    # Then run the following command:
+    compass --install -f fancy-buttons

data/Rakefile

@@ -0,0 +1,19 @@
+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 = "Make fancy buttons with the Compass stylesheet authoring framework."
+    gemspec.email = "imathis@me.com"
+    gemspec.homepage = "http://github.com/imathis/fancy-buttons"
+    gemspec.authors = ["Brandon Mathis", "Chris Eppstein"]
+    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 technicalpickles-jeweler -s http://gems.github.com"
+end

data/fancy-buttons.gemspec

@@ -0,0 +1,46 @@
+# Generated by jeweler
+# DO NOT EDIT THIS FILE
+# Instead, edit Jeweler::Tasks in Rakefile, and run `rake gemspec`
+# -*- encoding: utf-8 -*-
+
+Gem::Specification.new do |s|
+  s.name = %q{fancy-buttons}
+  s.version = "0.2.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.description = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
+  s.email = %q{imathis@me.com}
+  s.extra_rdoc_files = [
+    "README.markdown"
+  ]
+  s.files = [
+    "README.markdown",
+     "Rakefile",
+     "fancy-buttons.gemspec",
+     "lib/fancy-buttons.rb",
+     "lib/sass/_border_radius.sass",
+     "lib/sass/_fancy_buttons.sass",
+     "lib/sass/_fancy_gradient.sass",
+     "lib/templates/project/button_bg.png",
+     "lib/templates/project/buttons.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.5}
+  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
+    else
+    end
+  else
+  end
+end

data/lib/fancy-buttons.rb

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

data/lib/sass/_border_radius.sass

@@ -0,0 +1,47 @@
+!default_border_radius ||= 5px
+
+// Round all borders by amount
+=border-radius(!radius = !default_border_radius)
+  border-radius= !radius
+  -moz-border-radius= !radius
+  -webkit-border-radius= !radius
+
+// Round radius at position by amount.
+// values for !vert: "top", "bottom"
+// values for !horz: "left", "right
+=border-corner-radius(!vert, !horz, !radius = !default_border_radius)
+  border-#{!vert}-#{!horz}-radius= !radius
+  -moz-border-radius-#{!vert}#{!horz}= !radius
+  -webkit-border-#{!vert}-#{!horz}-radius= !radius
+  
+=border-top-left-radius(!radius = !default_border_radius)
+  +border-corner-radius("top", "left", !radius)
+
+=border-top-right-radius(!radius = !default_border_radius)
+  +border-corner-radius("top", "right", !radius)
+
+=border-bottom-left-radius(!radius = !default_border_radius)
+  +border-corner-radius("bottom", "left", !radius)
+
+=border-bottom-right-radius(!radius = !default_border_radius)
+  +border-corner-radius("bottom", "right", !radius)
+
+// Round top corners by amount
+=border-top-radius(!radius = !default_border_radius)
+  +border-top-left-radius(!radius)
+  +border-top-right-radius(!radius)
+
+// Round right corners by amount
+=border-right-radius(!radius = !default_border_radius)
+  +border-top-right-radius(!radius)
+  +border-bottom-right-radius(!radius)
+
+// Round bottom corners by amount
+=border-bottom-radius(!radius = !default_border_radius)
+  +border-bottom-left-radius(!radius)
+  +border-bottom-right-radius(!radius)
+
+// Round left corners by amount
+=border-left-radius(!radius = !default_border_radius)
+  +border-top-left-radius(!radius)
+  +border-bottom-left-radius(!radius)

data/lib/sass/_fancy_buttons.sass

@@ -0,0 +1,99 @@
+@import _fancy_gradient.sass
+
+!default_buton_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)
+
+// 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)
+  
+  &:hover, &:focus
+    +hover-button-color(!hover)
+    
+  &:active
+    +active-button-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)
+
+// 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"
+  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
+  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)
+  !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
+  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)
+  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
+    border: none
+    padding: 0
+  &:focus
+    outline: none
+
+=disable-button(!opacity = .7)
+  +opacity(!opacity)
+  &:hover
+    cursor: default

data/lib/sass/_fancy_gradient.sass

@@ -0,0 +1,28 @@
+=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)
+  !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})"
+  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)
+  !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)

data/lib/templates/project/buttons.sass

@@ -0,0 +1,31 @@
+@import compass/reset.sass
+@import compass/css3.sass
+@import fancy_buttons.sass
+
+a.button
+  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)

data/lib/templates/project/index.html

@@ -0,0 +1,48 @@
+<!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/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]-->
+  </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>
+  </body>
+</html>

data/lib/templates/project/manifest.rb

@@ -0,0 +1,3 @@
+stylesheet 'buttons.sass'
+image 'button_bg.png'
+file 'index.html'

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification 
+name: fancy-buttons
+version: !ruby/object:Gem::Version 
+  version: 0.2.0
+platform: ruby
+authors: 
+- Brandon Mathis
+- Chris Eppstein
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2009-11-10 00:00:00 -08:00
+default_executable: 
+dependencies: []
+
+description: Make fancy buttons with the Compass stylesheet authoring framework.
+email: imathis@me.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: 
+- README.markdown
+files: 
+- README.markdown
+- Rakefile
+- fancy-buttons.gemspec
+- lib/fancy-buttons.rb
+- lib/sass/_border_radius.sass
+- lib/sass/_fancy_buttons.sass
+- lib/sass/_fancy_gradient.sass
+- lib/templates/project/button_bg.png
+- lib/templates/project/buttons.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 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      version: "0"
+  version: 
+requirements: []
+
+rubyforge_project: 
+rubygems_version: 1.3.5
+signing_key: 
+specification_version: 3
+summary: Make fancy buttons with the Compass stylesheet authoring framework.
+test_files: []
+