css3-ribbons 1.0

data/README.markdown

@@ -0,0 +1,37 @@
+# CSS3 Ribbons Extension for Compass
+by: Derek Perez (derek[at]derekperez[dot]com) / Chris Eppstein (chris[at]eppsteins[dot]net)<br/>
+Simply awesome and customizable CSS3 Ribbon mixin for compass. [Just like the Github Ribbons!](http://github.com/blog/273-github-ribbons)
+
+## USAGE
+to use CSS3 Ribbons, simply import (`@import "css3-ribbons"`) the stylesheet into your Sass/Scss document, and call the `+ribbon` mixin. <br/>
+(eg: `+ribbon("#ribbon")`)
+
+__NOTE:__ your markup should look similar to this:
+
+`<div id="ribbon-container"><div id="ribbon"><h2><a href="http://github.com">Fork me on Github!</a></h2></div></div>`
+
+### OTHER OPTIONS
+The ribbon mixin has a very customizable API:
+
+`=ribbon(selector, [bg-color: #a00 position: top-left, text-color: #fff, length: 250px])`
+
+The __position__ argument can be one of the follow:
+
+- top-left
+- bottom-left
+- top-right
+- bottom-right
+
+## INSTALLATION
+The CSS3 Ribbons gem is available from (Gemcutter.org)[http://www.gemcutter.org]:
+
+`gem install css3-ribbons`
+
+once you've installed the gem, make sure to require it in your compass `config.rb` file, near the top:
+
+`require "css3-buttons"`
+
+## CREDITS
+inspired by [These Awesome GitHub Ribbons](http://github.com/blog/273-github-ribbons)
+and the initial css concept was inspired by [this blog post post](http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/).
+credit to unindented.org for creating the initial CSS idea.

data/VERSION

@@ -0,0 +1 @@
+1.0

data/lib/css3-ribbons.rb

@@ -0,0 +1 @@
+Compass::Frameworks.register("css3-ribbons", :path => "#{File.dirname(__FILE__)}/..")

data/project/manifest.rb

@@ -0,0 +1,21 @@
+description "CSS3 Ribbons"
+
+help %Q{
+Simply awesome and customizable CSS3 Ribbon mixin for compass. Just like the Github Ribbons!
+}
+
+welcome_message %Q{
+to use CSS3 Ribbons, simply import (@import "css3-ribbons") the stylesheet into your Sass/Scss document, and call the +ribbon mixin. 
+(eg: +ribbon("#ribbon"))
+
+NOTE: your markup should look similar to this:
+
+<div id="ribbon-container">
+  <div id="ribbon">
+    <h2><a href="http://github.com">Fork me on Github!</a></h2>
+  </div>
+</div>
+
+Visit http://github.com/perezd/CSS3-Ribbons for more docs!
+}
+

data/stylesheets/_css3-ribbons.sass

@@ -0,0 +1,71 @@
+// CSS3 Ribbons, 1.0 -- Derek Perez (derek@derekperez.com) / Chris Eppstein (chris@eppsteins.net)
+// inspired by (http://github.com/blog/273-github-ribbons)
+// this plugin was inspired by this blog post:
+// http://unindented.org/articles/2009/10/github-ribbon-using-css-transforms/
+// credit to unindented.org for creating the initial CSS idea.
+
+@import "compass/css3/transform"
+@import "compass/css3/box-shadow"
+@import "compass/css3/text-shadow"
+
+=ribbon-container($position : top-left, $length : 250px)
+  overflow: hidden
+  position: absolute
+  height: ($length / 1.414) * 1.05
+  width: $length / 1.414
+  @if $position == top-left
+    top: 0
+    left: 0
+  @if $position == bottom-left
+    bottom: 0
+    left: 0
+  @if $position == top-right
+    top: 0
+    right: 0
+  @if $position == bottom-right
+    bottom: 0
+    right: 0
+
+=ribbon($selector : ".ribbon", $bg-color : #a00, $position : top-left, $text-color : #fff, $length : 250px)
+  #{$selector}-container
+    +ribbon-container($position, $length)
+  #{$selector}
+    +ribbon-banner($bg-color, $position, $length)
+    a
+      +ribbon-text($bg-color, $text-color, $position)
+
+=ribbon-banner($bg-color : #a00, $position: top-left, $length : 250px)
+  position: absolute
+  background-color: $bg-color
+  +box-shadow(#888, 0, 0, 1em)
+  width: $length
+  @if $position == top-left
+    top: 2em
+    left: -3em
+    +rotate(-45deg) 
+  @if $position == bottom-left
+    bottom: 2em
+    left: -3em
+    +rotate(45deg) 
+  @if $position == top-right
+    top: 2em
+    right: -3em
+    +rotate(45deg)
+  @if $position == bottom-right
+    bottom: 2em
+    right: -3em
+    +rotate(-45deg)
+
+=ribbon-text($bg-color : #a00, $text-color : #fff, $position : top-left)
+  border: 1px solid lighten($bg-color, 20)
+  color: $text-color
+  display: block
+  font: bold 81.25% 'Helvetiva Neue', Helvetica, Arial, sans-serif
+  margin: 0.05em 0 0.075em 0
+  padding: 0.5em 3.5em
+  @if $position == top-left or $position == bottom-left
+    text-align: left
+  @if $position == top-right or $position == bottom-right
+    text-align: right
+  text-decoration: none
+  +text-shadow(#444, 0, 0, 0.5em)

metadata

@@ -0,0 +1,86 @@
+--- !ruby/object:Gem::Specification 
+name: css3-ribbons
+version: !ruby/object:Gem::Version 
+  hash: 15
+  prerelease: false
+  segments: 
+  - 1
+  - 0
+  version: "1.0"
+platform: ruby
+authors: 
+- Derek Perez
+- Chris Eppstein
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2010-08-02 00:00:00 -07:00
+default_executable: 
+dependencies: 
+- !ruby/object:Gem::Dependency 
+  name: compass
+  prerelease: false
+  requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
+    requirements: 
+    - - ">="
+      - !ruby/object:Gem::Version 
+        hash: 49
+        segments: 
+        - 0
+        - 10
+        - 3
+        version: 0.10.3
+  type: :runtime
+  version_requirements: *id001
+description: Make pretty, 100% CSS3 ribbons, using compass.
+email: derek@derekperez.com
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- README.markdown
+- VERSION
+- stylesheets/_css3-ribbons.sass
+- lib/css3-ribbons.rb
+- project/manifest.rb
+has_rdoc: true
+homepage: http://blog.derekperez.com/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+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.3.7
+signing_key: 
+specification_version: 3
+summary: CSS3 Ribbons for your pages, just like github!
+test_files: []
+