Skip to content


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!


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="">Fork me on Github!</a></h2></div></div>


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


The CSS3 Ribbons gem is available from

gem install css3-ribbons

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

compass install css3-ribbons -r css3-ribbons


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

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