Compass Plugins

Note: This page has been ported to the new docs.

Compass allows you to easily download, install, and upgrade plugins that share design and design elements between users and projects.

For instructions on how to install a plugin, please refer to the individual plugin's instructions.

Instructions on how to create your own extension (it's easy!): "http://compass-style.org/docs/tutorials/extensions/":http://compass-style.org/docs/tutorials/extensions/

h1. Released Plugins

h2. Gem-based Plugins

Most gem based plugins can be found "here":http://rubygems.org/search?query=compass.

h2. Frameworks

• "960.gs":https://github.com/nextmat/compass-960-plugin - a lightweight CSS framework for producing fixed-width grid-based layouts
• "Grid Coordinates":http://github.com/adamstac/grid-coordinates - a lightweight CSS framework for producing fixed-width grid-based layouts, based on "1KB CSS Grid":http://1kbgrid.com/ (which was loosely based on 960.gs). Supports nested grids.
• "GraphPaper":http://github.com/alexcabrera/graphpaper - a lightweight CSS framework for producing fixed-width grid-based layouts
• "Baseline":http://github.com/tdreyno/compass-baseline - a CSS framework for producing grid-based layouts (up to 8 columns) with typography. See "http://baselinecss.com/":http://baselinecss.com/.
• "Susy":http://github.com/ericam/compass-susy-plugin - a semantic CSS framework creator. Susy is an expert at fluid grids in an elastic (or fluid, or fixed) shell that will never activate the horizontal scroll bar.
• "Less Framework 4":https://github.com/bluntpeak/compass-less-plugin - a cross-device CSS grid system based on using inline media queries.
• "52 Framework":https://github.com/fabiokr/compass-52-framework - an HTML5 and CSS3 ready grid framework.
• "Twitter Bootstrap":https://github.com/hecbuma/compass-bootstrap - Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. And now you can add it to compass.
• "Foundation":https://github.com/styx/compass-foundation - Foundation is a toolkit from ZURB:http://foundation.zurb.com/ designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, grids, and more. And now you can add it to compass.

See also Supported Frameworks.

h2. Colors

• "Compass Colors":http://github.com/chriseppstein/compass-colors - for working with colors in Sass, and generating color themes

h2. Widgets

• "Fancy Buttons":http://github.com/imathis/fancy-buttons - "mixins":http://sass-lang.com/tutorial.html#mixins to get beautiful buttons with CSS gradients that degrade nicely. Uses Compass Colors.
• "jQuery":http://github.com/kosmas58/compass-jquery-plugin - adds jRails, jQuery, jQuery UI, jQTouch and some other jQuery plugins to compass (see "example app":http://github.com/kosmas58/compass-jquery-plugin-sample) .

h2. Misc

• "Slickmap":http://github.com/tdreyno/compass-slickmap - plugin for "slickmap":http://astuteo.com/slickmap/ sitemaps
• "HTML5 Boilerplate":http://github.com/sporkd/compass-html5-boilerplate - The professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site based on Paul Irish's HTML5 Boilerplate "template":http://html5boilerplate.com.
• "Responsive Sass":http://github.com/ntreadway/responsive-sass - Responsive Sass mixins currently supports background image resizing, killing mobile zoom and works in all modern desktop/mobile browsers.

h1. Sass Libraries

Libraries are simply Sass stylesheets or "partials":http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials.

• "Handcrafted Rounded Corners":http://github.com/handcrafted/handcrafted-compass-mixins/blob/master/_border-radius.sass
• "Ntreadway JQuery tools tabs":http://github.com/ntreadway/JQuery.tools.tabs.sass

h1. Plugins that are Works-In-Progress

• "Aristo":http://github.com/hpoydar/compass-aristo-plugin
• "Elastic":http://github.com/marnen/compass-elastic-plugin
• "Fluid 960":http://github.com/jtoy/compass-fluid960-plugin
• "Winston":http://github.com/Wolfr/winston-compass-plugin
• "YAML":http://github.com/djmaze/compass-yaml-plugin

h1. Other Sass-based Projects

• "Jazen's CSS Framework":http://github.com/jazen/css - Sass library that should be a compass plugin.
• "Sassafras":http://github.com/teejayvanslyke/sassafras - Color Scheme Generator for Sass
• "Tenplate":http://github.com/danboy/tenplate - Another Sass library with rails helpers.