Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 972b8f9921
Fetching contributors…

Cannot retrieve contributors at this time

37 lines (25 sloc) 1.43 kb

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.

Jump to Line
Something went wrong with that request. Please try again.