Skip to content
A series of Compass and Sass mixins and functions for creating delicious CSS effects.
Find file
Pull request Compare This branch is even with senchalabs:responsive-grid.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Compass Recipes project status

This project is a collection of Sass mixins using Compass that you can use or learn from.


This are demos of the repository at his current state. So it will be not reflection what is available into the last stable gem. To get what you see in the demos, see Installation to see how to install the repo at his current state

What do we have here ?

  • backgrounds (patterns)
  • bases (just normalize.css from @necolas for now)
  • effects (visual ones, not animations)
  • form skins (just one, feel free to pull news)
  • icons recipes (just rules to use icons, not icons themselves)
  • layout recipes
  • media queries (predefined for commons devices width)
  • shadows (funky ones)
  • shapes (geometrical ones, and some others fancy)
  • shared (commons stuffs like hacks or tricks)
  • ui (stuffs for UI - more incomming)

  • more incomming (see compass recipes issues), feel free to make a pull request to add your own !!


Compass-Recipes is now available as a gem on So installation is quite easy.

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


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/triangle";
    @include triangle;

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

@import "recipes/shape";

    @include triangle;

    @include square;


Compass-Recipes is maintained by Maxime Thirouin, a front-end web developer working for

Open to All

Fork, modify, push, submit pull request ! That's easy !

I'm not a Ruby coder, so anyone which want to help me for anything will be appreciated !

Build Documentation

First you need bundle

bundle install

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

bundle exec rake pages

Thanks (indirect contributors)

This project will never exists without these people : @necolas, @simurai, @chriscoyier, @leaverou.

They give me inspiration (and snippets of code!).

MIT Licence


Readme created using

Something went wrong with that request. Please try again.