Compass plugin from Capucine

You can take a look at Capucine.

Tweet This

Usage Standalone

Install the gem

gem install compass-capucine

** or Add it to your Gemfile**

gem 'compass-capucine'

Bundle install

bundle install

Add it to your Compass config.rb

require 'compass-capucine'

Import it into your SCSS file

@import "compass-capucine";

This will import that :

@import "compass-capucine/box";
@import "compass-capucine/helpers";

** You can import the Normalize and other things **

@import "compass-capucine/normalize";
@import "compass-capucine/normalize-plus";
@import "compass-capucine/print";

@import "compass-capucine/helpers";
@import "compass-capucine/box";

Usage with asset pipeline (Rails 3.2)

Add it to your Gemfile

gem 'compass-capucine'

Use the new compass-rails gem. See https://github.com/Compass/compass-rails for more info.

gem 'compass-rails'

Bundle install

bundle install

Add it to your Application.rb

# Enable the asset pipeline
config.assets.enabled = true

Import it into your SCSS file

@import "compass-capucine";

Mixins availables

Helpers

• unselectable
• visually-hidden
• clearfix
• selection ( $background_color , $font_color )
• pressed-effect ( $top_margin, $left_margin, $right_margin )
• vertical-gradient ( $top_color, $bottom_color )
• smart-text-shadow ( $color, $pixels )
• rgba-full ( $color )

Box

• box ( $width, $height, $display )
• circle ( $diam )
• centerXY ( $width, $heigh, $position )
• max-width ( $max )
• min-max-width ( $min, $max )