Skip to content
UNMAINTAINED compass/sass mixins and snippets.
CSS JavaScript Ruby
Latest commit f42a145 Oct 31, 2014 @MoOx Update
Failed to load latest commit information.
docs Update background color of the background of the code on the docs Mar 6, 2013
fonts Update icon-fonts compass extension Aug 13, 2012
javascripts/polyfills Remove Gravatar extension Mar 6, 2013
lib Remove Gravatar extension Mar 6, 2013
stylesheets reset comment Oct 5, 2013
templates Remove Gravatar extension Mar 6, 2013
tests Remove Gravatar extension Mar 6, 2013
.gitignore Stop using gh-pages, it was nice thanks. Sep 24, 2012 Remove Gravatar extension Mar 6, 2013
Gemfile Remove compassified normalize.css in favour of compass-normalize Sep 17, 2012
LICENSE Update Oct 31, 2014
Rakefile.rb Stop using gh-pages, it was nice thanks. Sep 24, 2012
compass-recipes.gemspec Stop using gh-pages, it was nice thanks. Sep 24, 2012
index.html Remove useless link (normalise sassified is now from another compass … Sep 21, 2012

Compass Recipes Build Status


A series of Compass and Sass mixins and functions for creating delicious CSS effects.

Availables Recipes

  • Backgrounds - Background patterns, gradients.
  • Color Variables Names, advanced color functions like brightness() & color scheme functions
  • Effects - Visual effects like glass, bevel, cutout or ribbon
  • Form skins - Only one at the moment. Please add yours :)
  • Icon Fonts - Includes icon fonts helper and a few open source fonts as a compass extension (more info)
  • Image - More image mixins (& functions) than Compass deserve (dimensions, inline, simple spriting)
  • Layout - Vertical centering and box layout shortcuts.
  • Media queries - Shortcuts for media queries.
  • Shadows - A wide collection of shadows which use pseudo elements to create fold effects, etc.
  • Shapes - Geometric and iconic shapes, created only with CSS
  • UI Lots of element styling for loader, menu, overlay, separator, tooltip, etc.
  • Utilities Very usefull utilities, trick, hacks
  • View other potential icoming items


Compass Recipes is available as a gem on, so installation is quite easy.

(sudo) gem install compass-recipes

*If you want all latests recipes, you can just checkout the recipes (or download as zip) and add '{your-path-here-or-./}compass-recipes/stylesheets' using additional_import_paths or add_import_path (see Compass configuration reference).

More informations on the Wiki*


When compass-recipes installed, you just need to require the compass plugin in your project

require 'compass-recipes'

Then you can include some recipes like this

@import "recipes/shape/polygon/triangle";
    @include triangle;

Like Compass does, you can include all recipes in a folder like this

@import "recipes/shape";

    @include triangle;

    @include square;

Open to All

If you have a nifty CSS trick that makes sense to be abstracted (and isn't already in another Github repo), please fork and submit a pull request. Note: If you are not the author of the CSS trick, you must get their permission before adding.


All fonts are repackaged using Fontsquirrel. Licences are distributed with the fonts.

Build Documentation

You do not need to build documentation for testing your recipes. Just run compass watch/compile at the root of the repository.

First you need bundle

bundle install

Then, to build the gh-pages from the tests/, you need to call

bundle exec rake pages

This process create the pages & commit them to your gh-pages branch.


See all contributors

Credits & Thanks:

  • @chriscoyier (shapes & lots of tricks)
  • @leaverou (backgrounds patterns)
  • @necolas (normalize & tricks)
  • @simurai (awesomes design stuffs)
  • All of the people who contribute to the recipes (all names should be in each recipes source)

Additional Resources

Some other great CSS/SCSS/design projects for making delicious websites:

  • Subtle Patterns - Great collection of free background patterns, some of which are not possible with CSS alone.
  • Animate.sass - A bevy of pre-defined keyframe animations.
  • OMG Text - Some super-rad text effects using text-shadow


Copyright (c) 2012 Maxime Thirouin

Released under MIT Licence

Something went wrong with that request. Please try again.