Make pretty, 100% CSS3 ribbons, using Sass and Compass.
Pull request Compare This branch is even with perezd:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
stylesheets
templates/project
.gitignore
README.markdown
VERSION
css3-ribbons.gemspec

README.markdown

CSS3 Ribbons Extension for Compass

by: Derek Perez (derek[at]derekperez[dot]com) / Chris Eppstein (chris[at]eppsteins[dot]net)
Simply awesome and customizable CSS3 Ribbon mixin for compass. Just like the Github Ribbons!

USAGE

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>

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:

gem install css3-ribbons

to install css3-ribbons into your compass project, do the following:

compass install css3-ribbons -r css3-ribbons

CREDITS

inspired by These Awesome GitHub Ribbons and the initial css concept was inspired by this blog post post. credit to unindented.org for creating the initial CSS idea.