Compass Plugins

Note: This page has also 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/

Released Plugins

Most gem based plugins can be found here.

960.gs – a lightweight CSS framework for producing fixed-width grid-based layouts
Grid Coordinates – a lightweight CSS framework for producing fixed-width grid-based layouts, based on 1KB CSS Grid (which was loosely based on 960.gs). Supports nested grids.
GraphPaper – a lightweight CSS framework for producing fixed-width grid-based layouts
Baseline – a CSS framework for producing grid-based layouts (up to 8 columns) with typography. See http://baselinecss.com/.
Less Framework 4 – a cross-device CSS grid system based on using inline media queries.
52 Framework – an HTML5 and CSS3 ready grid framework.
Twitter 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 – Foundation is a toolkit from ZURB 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.
Stitch – Common CSS patterns in the form of mixins and classes

Susy – 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.
Salsa – Salsa is a simple yet very smart and flexible fluid layout system. It uses the power of Sass to provide a lightweight and semantic output.
Singularity – A semantic responsive grid framework that allows you to use both uniform and non-uniform column widths.
Blankwork – Flexible Grid System – Blankwork is a flexible and semantic grid system. No additional markup, just pure layout. You can view more on www.blankwork.net
Adaptive Grid – easy fluid and adaptive grids

Compass Colors – for working with colors in Sass, and generating color themes
Color Schemer – Rapidly build color schemes with Sass. This also adds numerous color functions including RYB color model manipulation.

Fancy Buttons – mixins to get beautiful buttons with CSS gradients that degrade nicely. Uses Compass Colors.
Sassy Buttons – Another mixin library for beautiful CSS buttons.
jQuery – adds jRails, jQuery, jQuery UI, jQTouch and some other jQuery plugins to compass (see example app) .
Compass CSS Lightbox – Pure CSS lightbox
Compass CSS Slideshow – CSS-only slideshows that work in IE6+, Mozilla and Webkit. Requires progressive JS support to work in Opera.

Slickmap – plugin for slickmap sitemaps
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.
Responsive Sass Gem – Responsive Sass currently supports the Frameless grid, background image resizing, killing mobile zoom and works in all modern desktop/mobile browsers.
normalize.css – the famous normalize.css framework.
Compass Normalize – normalize.css that takes your level of legacy support into account
Modular Scale – “mixin that calculates the incremental values of the modular scale in proportion to a set size and ratio.” Can be optionally used outside of Compass.
Breakpoint – Media queries made simple.
Breakpoint Slicer – A very quick and handy way to slice your media queries, based on Breakpoint.
Sassy Math – Extends Compass math functions with trigonometry, logarithms, random number generation and more.
Toolkit – a huge collection of other plugins and small but very useful tools.
Harsh – Randomly generated CSS3 gradients with harsh color stops—like magical diamonds.
Fittext – Creates progressively larger media queries and font‑sizes for inflating text – no JavaScript necessary.

Libraries are simply Sass stylesheets or partials.

Aristo (Last updated 3 years ago as of 2012-11-23)
Elastic (Last updated 4 years ago as of 2012-11-23)
Fluid 960 (Last updated 3 years ago as of 2012-11-23)
Winston (Link does not exist)
YAML (Last updated 3 years ago as of 2012-11-23)