rocks 0.0.3

data/.gitignore

@@ -0,0 +1,4 @@
+*.gem
+.bundle
+Gemfile.lock
+pkg/*

data/CHANGELOG.md

@@ -0,0 +1,23 @@
+## 0.0.3
+
+* Bugfixes:
+  * invalid Sass syntax
+  * invalid gemspec
+  * always specify defaults for optional arguments
+  * Do not use strings for float values
+* Target selector for block links is now optional
+* prepend mixin now uses columns function rather than span
+* Added new link-colors-darken mixin
+* Import reset file into manifest file
+
+## 0.0.2
+
+* Added `trailing`, `leading`, `voutset` mixins
+* Added `container`
+* Minor name changes
+* Added inline docs
+* Made `clearfix` mixin extend `.clearfix`, rather than other way around
+
+## 0.0.1
+
+* Inital release

data/Gemfile

@@ -0,0 +1,2 @@
+source 'http://rubygems.org'
+gemspec

data/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2011 Arjan van der Gaag
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,199 @@
+# Rocks
+
+This is a tiny library of mixins and styles for developing large-ish
+stylesheets with [Sass][].
+
+I extracted these styles from a bunch of larger-than-average projects I have
+worked on, as I found I was repeating myself over and over again. There is
+nothing groundbreaking in here, just a useful collection of snippets to build
+your own stylesheets with.
+
+This library does not aim to help you write CSS, but better stylesheets. It
+provides re-usable components and patterns to help you simplify styling common
+objects on your page.
+
+The contents of this project are in partly homegrown and partly borrowed from
+projects like [Blueprint][], [Compass][] and many others.
+
+**Note**: this is very much a work in progress. Mind the gap.
+
+# Installation 
+
+## Installation for Rails 3.1+ projects
+
+Include Rocks in your Gemfile:
+
+    gem 'rocks'
+
+Let [Bundler][] install it:
+
+	$ bundle install
+
+Make sure your `application.css` file is compiled by Sass by renaming it to
+`application.css.scss`. Import the Rocks stylesheets:
+
+    @import "rocks";
+
+Add your own styles and imports below that.
+
+**Note** if you also include [Bourbon][] in your project, make sure put
+`@import "bourbon";` _before_ `@import "rocks";`, as per its installation
+instructions.
+
+## Installation for non-Rails 3.1+ projects
+
+Unsupported so far. I may write a simple installer script one day that
+automatically copies all the stylesheets into a directory of your choosing. For
+now, you'll have to do that manually.
+
+# Contents
+
+## Grid
+
+Contains functions and mixins for working with a grid-based layout. The grid is
+based on variables `$grid-column-width` and `$grid-margin`. It provides the
+following functions:
+
+* `span(n)`: get a width value for `n` number of columns.
+* `columns(n)`: get the total width of a number of columns.
+
+The difference between `span` and `columns` is inclusion of `$grid-margin` at
+the end.
+
+It contains the following mixins:
+
+* `column($span, $with_margin: true)`: make an element a column, spanning
+  `$span` number of columns.
+* `container`: container for `column` elements. Simply a relatively positioned
+  wrapped with clearfix applied.
+* `rcontainer`: container for `rcolumn` elements. Contains negative left
+  margin, that counters the left margin of the first `rcolumn` it contains.
+* `rcolumn($span)`: same as `column` but with margin applied to the left, so
+  you don't need to remove margin from the last column in a group.
+* `prepend($span)`: pad an element with `$span` columns to the left.
+* `append($span)`: pad an element with `$span` columns to the right.
+* `push($span)`: move an element to the right over `$span` columns.
+* `pull($span)`: move an element to the left over `$span` columns.
+
+## Layout
+
+Contains simple layout helper mixins:
+
+* `float($dir: 'left')`: float en element left or right, including the
+  `display: inline` so often needed for IE.
+* `outdent($selector, $amount, $dir: 'left', $with-padding)`: make a child
+  element outdented. Useful for a story with some text and an image, where all
+  the text should be beside the image.
+* `align($dir: 'left', $v: $line, $h: $grid-margin, $mirror: false)`: float an
+  element with margins. Useful for left- or right floating images.
+* `clearfix`: clears floated elements inside.
+* `outset-left($gutter: $grid-margin, $with-padding)`: create an outdent to the
+  left, using a negative margin and opposing padding.
+* `outset-right($gutter: $grid-margin, $with-padding)`: create an outdent to
+  the right, using a negative margin and opposing padding.
+* `outset($gutter: $grid-marign, $with-padding: true)`: outdent to both the
+  left and right.
+* `leading($amount: $line)`: add whitespace before an element.
+* `trailing($amount: $line)`: add whitespace after an element.
+* `surrounding-lines`: adds a single line-height whitespace before and after
+  the element.
+* `voutset-top($amount, $border: 0)`: vertically outset an element, adding
+  negative margin and positive padding to the top.
+* `voutset-bottom($amount, $border: 0)`: vertically outset an element, adding
+  negative margin and positive padding to the bottom.
+* `voutset($amount, $border: 0)`: vertically outset an element by applying
+  negative marings and countering paddings top top and bottom.
+
+All of `leading`, `trailing`, `voutset-top` and `voutset-bottom` can take both
+pixel values as arguments, or a unit-less number. When given a unit-less
+number, it will be fed to the `lines` function.
+
+When using any of the `voutset` mixins, you can add an optional `$border`
+argument to reduce the amount of padding that is applied, leaving room for a
+border on element while preserving vertical rhythm.
+
+It also contains a plain class `.clearfix` that you can use in your HTML. It is
+meant, however, to be used with `@extend`. When your stylesheet needs a lot of
+clearfixes, the end result will contain _a lot_ of duplicated code. Using
+`@extend .clearfix` you can define the class once, and simply apply many
+selectors to it.
+
+## Links
+
+Provides mixins for common link behaviours:
+
+* `link-hover`: hide underline on normal links, show it on hover and focus.
+* `link-colors($link, $visited, $hover, $active)`: set all colors at once.
+* `link-colors-lighten($color)`: use `link-colors` to use a single color for
+  all links, but lighten the hover, focus and active styles slightly using the
+  `lighten` function.
+* `link-colors-darken($color)`: like `link-colors-lighten` but using the
+  `darken` function instead of `lighten`.
+* `link-press`: make a link 'pressable' by offsetting it 1px in its active
+  state.
+* `link-unstyled($color: $color-text)`: make a link appear as regular text.
+* `link-block($target: .target)` make a link work as a block, wrapping multiple
+  elements that will be clickable. The (optional) target selector applies
+  styles to a child element that should _appear_ as a link, by extending
+  `.block-link-target` -- which you should define yourself.
+
+## Lists
+
+Provides basic building blocks for styling lists:
+
+* `list-no-bullets`: removes list bullets.
+* `list-plain`: removes bullets and spacing.
+* `list-inline`: removes bullets and shows elements inline.
+* `list-horizontal($margin: $grid-margin, $dir: 'left')`: floats all chilren to
+  a horizontal list.
+* `list-dl-table($width, $margin: $grid-margin)`: show a term and its
+  definition (dt and dd) on a single line.
+* `list-image-bullets($img, $padding: $grid-margin, $x: 0, $y: 0)`: use an
+  image as list bullet using the background-image technique.
+
+## Reset
+
+Provides a single `reset` mixin that reset all styles. You probably want to mix
+this into your `body` selector, but you could also use it for a local reset in
+a specific element.
+
+## Type
+
+Defines the following variables:
+
+* `$line`: the base line height of your site. Used in many different places for
+  marigns, paddings and heights to achieve a sensible vertical rhythm. Defaults
+  to `20px`.
+* `$size-text`: the default text size. Defaults to `14px`.
+* `$color-text`: the default text color. Defaults to `#444`.
+
+Defines the following functions:
+
+* `lines($n)`: returns a mutliple of `$lines`.
+
+It defines the following mixins:
+
+* `text-icon($img, $padding: $grid-margin, $x: 0, $y:0)`: give an element an
+  icon by setting an image to the background and applying some padding.
+* `text-replace($img, $x: 0, $y: 0, $w: false, $h: false)`: replace an
+  element's text with an image by setting it to the background. You can
+  optionally specify width, height and background positioning.
+
+# History
+
+See CHANGELOG.md for a full of changes.
+
+# Credits
+
+**Author**: Arjan van der Gaag  
+**URL**: http://arjanvandergaag.nl
+
+# License
+
+See the LICENSE file for more information.
+
+[Sass]: http://sass-lang.com
+[Compass]: http://compass-style.org
+[Blueprint]: http://blueprintcss.org
+[Bourbon]: https://github.com/thoughbot/bourbon
+[Bundler]: http://gembundler.com

data/Rakefile

@@ -0,0 +1 @@
+require 'bundler/gem_tasks'

data/app/assets/stylesheets/_grid.scss

@@ -0,0 +1,100 @@
+// The width of a single column container
+$grid-column-width: 40px !default;
+
+// The amount of margin between two adjacent columns
+$grid-margin: 20px !default;
+
+// Helper variable that combines column width and margin.
+$grid-column: $grid-column-width + $grid-margin;
+
+// Calculate the width of a container spanning $n number of columns.
+@function span($n) {
+    @return $n * $grid-column-width + ($n - 1) * $grid-margin;
+}
+
+// Calculate the total width of $n number of columns, including the trailing
+// margin.
+@function columns($n) {
+    @return $grid-column * $n;
+}
+
+// A column is floated, fixed-width container that you can use to manage
+// horizontal layout. Columns stack up horizontally as long as there is
+// space left in the parent element.
+//
+// Columns are assumend to live in an element that mixes in `container`,
+// so it correctly clears its floating child elements.
+//
+// Columns are spaced apart with `$grid-margin`, unless you tell it
+// not to using `$with_margin`. You can also use `rcolumn`, which puts
+// the margin to the left, rather that the right.
+@mixin column($span, $with_margin: true) {
+    @include float;
+    width: span($span);
+    @if $with_margin {
+        margin-right: $grid-margin;
+    }
+}
+
+// Make an element correctly clear its column child elements. Simpel alias for
+// clearfix.
+@mixin container {
+    @include clearfix;
+    position: relative;
+}
+
+// Reverse container, similar to `container`. This container assumes to contain
+// elements mixin in `rcolumn`.
+//
+// An `rcontainer` element has negative left margin equal to the
+// `$grid-margin`, so that the left margin of the first `rcolumn` child element
+// exactly overlaps it, effectively cancelling it. This results in not having
+// to remove the right margin when using regular columns with a special `last`
+// class.
+@mixin rcontainer {
+    @include container;
+    margin-left: -$grid-margin;
+}
+
+// Similar to `column`, but with the margin applied to the left side, rather
+// than right. When used in combination with `rcontainer`, you no longer need
+// to worry the last column in a row having right margin, which would not fit a
+// container.
+@mixin rcolumn($span) {
+    @include column($span, false);
+    margin-left: $grid-margin;
+}
+
+// Apply a number of columns as padding to the left of a `column` element.
+@mixin prepend($span) {
+    padding-left: columns($span);
+}
+
+// Apply a number of columns as padding to the right of a `column` element.
+@mixin append($span) {
+    padding-right: span($span);
+}
+
+// Use negative margins to visually push a column to the right an amount of
+// columns.
+@mixin push($span) {
+    margin {
+        left: columns($span);
+        right: columns(-$span);
+    }
+}
+
+// Use negative margins to visually shift a column to the left.
+//
+// When this column is the last column in the source, but you want to pull it
+// to the left, another column will become the column. If you have removed the
+// right margin from that column, we need to compensate that amount of margin
+// on the armount we pull to the left. You can cancel this behaviour by passing
+// `false` for `$last`.
+@mixin pull($span, $last: true) {
+    @if $last {
+        margin-left: columns(-$span) + $grid-margin;
+    } @else {
+        margin-left: columns(-$span);
+    }
+}

data/app/assets/stylesheets/_layout.scss

@@ -0,0 +1,152 @@
+// Consistent floats: float to the left and use `display: inline` to make it
+// more likely to work correctly in IE.
+@mixin float($dir: left) {
+    float: $dir;
+    display: inline;
+}
+
+// Outdent a child element from the current element.
+//
+// The element matched by `selector` will receive a negative margin to the
+// left, pulling it out of the container element this mixin applies to.  You
+// can optionally add the same amount of padding to the container, so all the
+// container's contents get indented, and the selected child element sits in
+// the created whitespace.
+//
+// $selector is the selecter the outdenting styles apply to
+// $amount is the width to outdent
+// $dir is the direction of the outdent, defaulting to left
+// $with-padding controls whether the same $amount of padding is applied
+@mixin outdent($selector, $amount, $dir: left, $with-padding: true) {
+    @if $with-padding {
+        padding-#{$dir}: $amount;
+    }
+    #{$selector} {
+        @include float($dir);
+        @if $dir == left {
+            margin-left: -$amount;
+        } @else {
+            margin-right: -$amount;
+        }
+    }
+}
+
+// Mimic the HTML align attribute, but better
+//
+// This floats an element in direction given by `$dir`, and applies some
+// whitespace around it.
+@mixin align($dir: 'left', $v: $line, $h: $grid-margin, $mirror: false) {
+    @include float('left');
+    margin-top: $v;
+    margin-bottom: $v;
+    @if $dir == 'right' or $mirror {
+        margin-left: $h;
+    } @else {
+        margin-left: 0;
+    }
+    @if $dir == 'left' or $mirror {
+        margin-right: $h;
+    } @else {
+        margin-right: 0;
+    }
+}
+
+// Let an element automatically clear its containing floats.
+@mixin clearfix {
+    @extend .clearfix;
+}
+
+.clearfix {
+    zoom: 1;
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// Apply negative margin and equal, opposing padding, to the left of an element.
+@mixin outset-left($gutter: $grid-margin, $with-padding: false) {
+    margin-left: -$gutter;
+    @if $with-padding == true {
+        padding-left: $gutter;
+    }
+}
+
+// Apply negative margin and equal, opposing padding, to the right of an element.
+@mixin outset-right($gutter: $grid-margin, $with-padding: false) {
+    margin-right: -$gutter;
+    @if $with-padding == true {
+        padding-right: $gutter;
+    }
+}
+
+// Apply negative margin and equal, opposing padding, to the right and left of
+// an element. Useful for horizontally breaking out of a container element.
+@mixin outset($gutter: $grid-margin, $with-padding: true) {
+    @include outset-left($gutter, $with-padding);
+    @include outset-right($gutter, $with-padding);
+}
+
+// Apply consistent whitespace above an element, either in number of lines
+// or as a fixed amount.
+@mixin leading($amount: $line) {
+    @if unitless($amount) {
+        margin-top: lines($amount);
+    } @else {
+        margin-top: $amount;
+    }
+}
+
+// Apply consistent whitespace below an element, either in number of lines or
+// as a fixed amount.
+@mixin trailing($amount: $line) {
+    @if unitless($amount) {
+        margin-bottom: lines($amount);
+    } @else {
+        margin-bottom: $amount;
+    }
+}
+
+// Apply default trailing and leading whitespace around elements. Assumed to be
+// applied to all non-generic block-level elements (so p, h1 and table but not
+// div or section)
+@mixin surrounding-lines {
+    @include leading;
+    @include trailing;
+}
+
+// Vertically outset an element by applying negative margin and equal, opposing
+// padding to the top. You can optionally remove some of the padding to allow
+// room for a border.
+@mixin voutset-top($amount, $border: 0) {
+    @if unitless($amount) {
+        $amount: lines($amount);
+    }
+    margin-top: -$amount;
+    padding-top: $amount - $border;
+}
+
+// Vertically outset an element by applying negative margin and equal, opposing
+// padding to the bottom. You can optionally remove some of the padding to
+// allow room for a border.
+@mixin voutset-bottom($amount, $border: 0) {
+    @if unitless($amount) {
+        $amount: lines($amount);
+    }
+    margin-bottom: -$amount;
+    padding-bottom: $amount - $border;
+}
+
+// Vertically outset an element by applying negative margins and equal,
+// opossing padding above and below an element.
+//
+// This is useful for having text between two paragrahps equally spaced apart,
+// but add a background or border around one element with nice padding.
+@mixin voutset($amount, $border: 0) {
+    @include voutset-top($amount, $border);
+    @include voutset-bottom($amount, $border);
+}

data/app/assets/stylesheets/_links.scss

@@ -0,0 +1,75 @@
+// Hide the underlines from a link, except when hovering or focusing on it.
+@mixin link-hover {
+    text-decoration: none;
+    &:hover, &:focus {
+        text-decoration: underline;
+    }
+}
+
+// Shortcut to assign colors to all link states.
+@mixin link-colors($link, $visited, $hover, $active) {
+    color: $link;
+    &:visited {
+        color: $visited;
+    }
+    &:hover, &:focus {
+        color: $hover;
+    }
+    &:active {
+        color: $active;
+    }
+}
+
+// Shortcut to use a base color for all link state colors, lightening the
+// hover, focus and active states and desaturating the visited state.
+@mixin link-colors-lighten($color) {
+    @include link-colors(
+        $color,
+        desaturate($color, 30%),
+        lighten($color, 10%),
+        lighten($color, 20%)
+    );
+}
+
+@mixin link-colors-darken($color) {
+    @include link-colors(
+        $color,
+        desaturate($color, 30%),
+        darken($color, 10%),
+        darken($color, 20%)
+    );
+}
+
+// Make a link appear pressable by offsetting it one pixel in the active state.
+// Note: this only works whe the element is not absolutely positioned.
+@mixin link-press {
+    &:active {
+        position: relative;
+        top: 1px;
+        left: 1px;
+    }
+}
+
+// Remove default styles from links, making it appear as normal text.
+@mixin link-unstyled($color: $color-text) {
+    @include link-colors($color, $color, $color, $color);
+    &:link, &:visited, &:hover, &:focus, &:active {
+        text-decoration: none;
+    }
+}
+
+// Link block pattern. Useful when a link contains several block elements.
+// This makes all the containing elements clickable, but does not style them as
+// links. Instead, you are expected to provide a class `.block-link-target`
+// whose styles will be applied to style the child element that should behave
+// and look like a link.
+@mixin link-block($target: '.target') {
+    @include link-unstyled;
+    display: block;
+    @if $target {
+        #{$target} {
+            @extend .block-link-target;
+        }
+    }
+}
+

data/app/assets/stylesheets/_lists.scss

@@ -0,0 +1,60 @@
+// Remove all the bullets from a list.
+@mixin list-no-bullets {
+    list-style-type: none;
+    list-style-image: none;
+}
+
+// Remove bullets and whitespace from a list.
+@mixin list-plain {
+    @include list-no-bullets;
+    margin: 0;
+    padding: 0;
+}
+
+// Make all list items in a list appear on the same line, inline.
+@mixin list-inline {
+    @include list-plain;
+    display: inline;
+    li {
+        display: inline;
+    }
+}
+
+// Make all list items in a list appear on the same line as floated block
+// elements.
+//
+// $margin controls the amount of whitespace between items
+// $dir controls the floating direction.
+@mixin list-horizontal($margin: $grid-margin, $dir: left) {
+    @include list-plain;
+    @include clearfix;
+    li {
+        float: left;
+        display: inline;
+        margin-#{$dir}: $margin;
+    }
+}
+
+// Mixin for a defniition list element, to have its terms and definitions
+// appear on a single line.
+@mixin list-dl-table($width, $margin: $grid-margin) {
+    padding-left: $width + $margin;
+    dt {
+        float: left;
+        clear: left;
+        display: inline;
+        width: $width;
+        margin-right: $margin;
+        margin-left: -$width - $margin;
+    }
+}
+
+// Add custom list bullets using background images.
+//
+// All arguments are delegated to the `text-icon` mixin.
+@mixin list-image-bullets($img, $padding: $grid-margin, $x: 0, $y: 0) {
+    @include list-no-bullets;
+    li {
+        @include text-icon($img, $padding, $x, $y);
+    }
+}

data/app/assets/stylesheets/_reset.scss

@@ -0,0 +1,156 @@
+@mixin reset {
+    html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+    blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q,
+    samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset,
+    form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, figure, footer, header, hgroup, menu, nav, section, time,
+    mark, audio, video {
+        margin: 0;
+        padding: 0;
+        border: 0;
+        outline: 0;
+        font-size: 100%;
+        vertical-align: baseline;
+        background: transparent;
+    }
+    article, aside, figure, footer, header, hgroup, nav, section {
+        display: block;
+    }
+    img,
+    object,
+    embed {
+        max-width: 100%;
+    }
+    html {
+        overflow-y: scroll;
+    }
+    ol, ul {
+        list-style: none;
+    }
+    blockquote, q {
+        quotes: none;
+    }
+    blockquote:before, 
+    blockquote:after, 
+    q:before, 
+    q:after {
+        content: '';
+        content: none;
+    }
+    a {
+        margin: 0;
+        padding: 0;
+        font-size: 100%;
+        vertical-align: baseline;
+        background: transparent;
+    }
+    del {
+        text-decoration: line-through;
+    }
+    abbr[title],
+    dfn[title] {
+        border-bottom: 1px dotted #000;
+        cursor: help;
+    }
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    th {
+        font-weight: bold;
+        vertical-align: bottom;
+    }
+    td {
+        font-weight: normal;
+        vertical-align: top;
+    }
+    hr {
+        display: block;
+        height: 1px;
+        border: 0;
+        border-top: 1px solid #ccc;
+        margin: 1em 0;
+        padding: 0;
+    }
+    input,
+    select {
+        vertical-align: middle;
+    }
+    pre {
+        white-space: pre; /* CSS2 */
+        white-space: pre-wrap; /* CSS 2.1 */
+        white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+        word-wrap: break-word; /* IE */
+    }
+    input[type="radio"] {
+        vertical-align: text-bottom;
+    }
+    input[type="checkbox"] {
+        vertical-align: bottom; *vertical-align: baseline;
+    }
+    .ie6 input {
+        vertical-align: text-bottom;
+    }
+    select,
+    input,
+    textarea {
+        font: 99% sans-serif;
+    }
+    table {
+        font-size: inherit;
+        font: 100%;
+    }
+    a:hover,
+    a:active {
+        outline: none;
+    }
+    small {
+        font-size: 85%;
+    }
+    strong,
+    th {
+        font-weight: bold;
+    }
+    td,
+    td img {
+        vertical-align: top;
+    } 
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+    }
+    sup {
+        top: -0.5em;
+    }
+    sub {
+        bottom: -0.25em;
+    }
+    pre,
+    code,
+    kbd,
+    samp {
+        font-family: monospace, sans-serif;
+    }
+    .clickable,
+    label, 
+    input[type=button], 
+    input[type=submit], 
+    button {
+        cursor: pointer;
+    }
+    button, input, select, textarea {
+        margin: 0;
+    }
+    button {
+        width: auto;
+        overflow: visible;
+    }
+    .ie7 img {
+        -ms-interpolation-mode: bicubic;
+    }
+    .ie6 html {
+        filter: expression(document.execCommand("BackgroundImageCache", false, true));
+    }
+}

data/app/assets/stylesheets/_rocks.scss

@@ -0,0 +1,6 @@
+@import 'reset';
+@import 'layout';
+@import 'type';
+@import 'lists';
+@import 'links';
+@import 'grid';

data/app/assets/stylesheets/_type.scss

@@ -0,0 +1,59 @@
+// The default line-height and vertical whitespace between consecutive
+// elements.
+$line:       20px !default;
+
+// Default text size.
+$size-text:  14px !default;
+
+// Default text color.
+$color-text: #444 !default;
+
+// Calculate the height of an number of lines.
+@function lines($n) {
+    @return $line * $n;
+}
+
+// Use a background image to give an element an icon.
+//
+// $img is the image source.
+// $padding is the amount the element is indented. Defaults to $grid-margin
+// $x and $x control the positioning of the background image, for spriting
+// purposes.
+@mixin text-icon($img, $padding: $grid-margin, $x: 0, $y: 0) {
+    padding-left: $padding;
+    background: {
+        image: url($img);
+        repeat: no-repeat;
+        position: $x $y;
+    }
+}
+
+// Replace text by an image.
+//
+// Hide the using negative text indent, and apply a background image
+// so the text appears to be replaced by an image.
+//
+// $img is the image source
+// $x and $x control the backgrounding position of the image, for spriting
+// purposes.
+// $w and $h allow you to set explicit dimensions on the element, to mask the
+// background image.
+@mixin text-replace($img, $x: 0, $y: 0, $w: false, $h: false) {
+    overflow: hidden;
+    text {
+        direction: rtl;
+        align: left;
+        indent: -999em;
+    }
+    background: {
+        image: url($img);
+        repeat: no-repeat;
+        position: $x $y;
+    }
+    @if $w {
+        width: $w;
+    }
+    @if $h {
+        height: $h;
+    }
+}

data/lib/rocks/engine.rb

@@ -0,0 +1,4 @@
+module Rocks
+  class Engine < Rails::Engine
+  end
+end

data/lib/rocks/version.rb

@@ -0,0 +1,3 @@
+module Rocks
+  VERSION = '0.0.3'
+end

data/lib/rocks.rb

@@ -0,0 +1,9 @@
+require 'rocks/version'
+
+module Rocks
+  if defined? Rails
+    class Engine < ::Rails::Engine
+      require 'rocks/engine'
+    end
+  end
+end

data/rocks.gemspec

@@ -0,0 +1,24 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require 'rocks/version'
+
+Gem::Specification.new do |s|
+  s.name              = 'rocks'
+  s.version           = Rocks::VERSION
+  s.authors           = ['Arjan van der Gaag']
+  s.email             = ['arjan@arjanvandergaag.nl']
+  s.homepage          = 'https://github.com/avdgaag/rocks'
+  s.summary           = 'Sass mixins using SCSS syntax that go one step further than Bourbon'
+  s.description       = <<-DESC
+Rocks provides a set of mixins and default styles that you can use to develop
+maintainable, readable stylesheets. It is designed to be used together with
+Toughtbot's Bourbon, but unlike bourbon, Rocks provides actual styles, not just
+tools to make styling easier. They do aim to separate function from form.
+DESC
+  s.rubyforge_project = 'rocks'
+  s.files             = `git ls-files`.split("\n")
+  s.test_files        = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables       = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths     = ['lib']
+  s.add_dependency    'sass', '>= 3.1'
+end

metadata

@@ -0,0 +1,82 @@
+--- !ruby/object:Gem::Specification
+name: rocks
+version: !ruby/object:Gem::Version
+  version: 0.0.3
+  prerelease: 
+platform: ruby
+authors:
+- Arjan van der Gaag
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2011-12-09 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: &70216378912060 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: *70216378912060
+description: ! 'Rocks provides a set of mixins and default styles that you can use
+  to develop
+
+  maintainable, readable stylesheets. It is designed to be used together with
+
+  Toughtbot''s Bourbon, but unlike bourbon, Rocks provides actual styles, not just
+
+  tools to make styling easier. They do aim to separate function from form.
+
+'
+email:
+- arjan@arjanvandergaag.nl
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- CHANGELOG.md
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- app/assets/stylesheets/_grid.scss
+- app/assets/stylesheets/_layout.scss
+- app/assets/stylesheets/_links.scss
+- app/assets/stylesheets/_lists.scss
+- app/assets/stylesheets/_reset.scss
+- app/assets/stylesheets/_rocks.scss
+- app/assets/stylesheets/_type.scss
+- lib/rocks.rb
+- lib/rocks/engine.rb
+- lib/rocks/version.rb
+- rocks.gemspec
+homepage: https://github.com/avdgaag/rocks
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: rocks
+rubygems_version: 1.8.11
+signing_key: 
+specification_version: 3
+summary: Sass mixins using SCSS syntax that go one step further than Bourbon
+test_files: []