Compass Ribbon Mixin
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

ribbons dribbble shot


A compass mixin for making ribbons.

Ribbons is just a simple implementation if a mixin using compass to make a ribbon UI element. You can set the direction, the thickness, color (gradient is generated off a single color) and then you need to set the notch color.

The demo has a simple implementation. The box with the rainbow of ribbons is poorly implemented. I would not do that in a production scenario as every time you call the mixin, it generates all that code. I will refactor later. For now, the mixin can be played with and might be improved upon by you.

What this site is built with

  • Middleman - A sinatra app, using the rack and bundler install
  • Compass - Compass is awesome!
  • scss - SCSS.. life is good.

The big giant font comes from It was designed by Dan Gneiding and I think it is beautiful.

Thanks for playing along!

Now go eat pie.