ff0000/caboose — pull request #2 by doctyper (2012-09-18 01:00:07+00:00)
Title: Caboose 2.0.0

**tl;dr** This pull request is an overhaul of Caboose, bringing it up to speed with the latest and greatest SASS + Compass features. Please take a look at the new features and re-organized layout.

## The gist:

- Updated README
- Removed config.rb, settings now come from the [Caboose RBP plugin](https://github.com/ff0000/red-boilerplate/blob/feature/plugins/caboose/2.0/resources/tasks/compass.js).
- Removed holmes.scss, it just annoyed everyone.
- Renamed `sass` directory to `scss`.
- Moved mixins to individual files.
- Migrated some mixins to [placeholder selectors](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_) where applicable.
- IE7 support is now **disabled** by default.
- Added more globals, including animation / timing variables.
- Added a new $DEBUG variable for use when debugging.
- Added some sample rules to globals, ie.scss
- Added a custom reset, scorched-earth++

## Mixins
Mixins can be found in the scss/modules/mixins directory

### `_animation.scss`
A "polyfill" while Compass 0.13 is still in alpha/beta. The mixin [will be standard](https://github.com/chriseppstein/compass/blob/master/frameworks/compass/stylesheets/compass/css3/_animation.scss) once 0.13 is stable, and supports everything the upcoming build will.

[Compass Animation](http://beta.compass-style.org/reference/compass/css3/animation/)

### `_experimental-both.scss`
This mixin functions like Compass' [@experimental](http://compass-style.org/reference/compass/css3/shared/#mixin-experimental), except it will prefix the property and the value. Useful for mask-image: gradient(); and other types of methods that require property and value prefixing.

```scss
body {
@include experimental-both(mask-image, $gradient);
}
```

### `_grad.scss`
A fallback-friendly gradient mixin. Takes two values and mixes them into one solid color for non-grad-supporting browsers, and generates a gradient for those that support CSS3 gradients.

```scss
body {
@include grad(#000, #333);
}
```

### `_ie-friendly-transform.scss`
A fallback-friendly 3d-transform mixin. Outputs a 2d-fallback transform property for browsers that don't support 3d transforms, and auto-magic-bullets those that do.

```scss
body {
@include ie-friendly-transform(translateX(100px) translateY(100px));
}
```

### `_mask-image.scss`
Mixins for CSS3 mask images.

```scss
body {
@include mask-image(image-url("path/to/image.png"));
}
```

### `_respond-to.scss`
A mixin for media-queries. Supports a wide array of widths to respond to:

```scss
body {
background: blue;

@include respond-to("handheld") {
background: red;
}

@include respond-to("tablet") {
background: black
}
}
```

## Placeholders
Placeholders can be found in the scss/modules/placeholders directory

### `_debug.scss`
Adds a debug outline to any targeted element. This extend rule is optional, make sure to flag it as such.

```scss
body {
@extend %debug !optional;
}
```

### `_global-transition.scss`
Define a global transition and share it with multiple elements.

```scss
body {
@extend %global-transition;
}
```

### `_magic-bullet-fix.scss`
Adds the [magic bullet fix](http://www.html5rocks.com/en/tutorials/speed/html5/#transanim) to targeted elements.

```scss
body {
@extend %magic-bullet-fix;
}
```

### `_microfix.scss`
A better [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) hack.

```scss
body {
@extend %microfix;
}
```

### `_position-zero.scss`
Position the element absolute, with top / left / bottom / right set to zero.

```scss
body {
@extend %position-zero;
}
```

### `_scrollable.scss`
Sets overflow to auto and adds `overflow-scrolling: touch` to applicable browsers.

```scss
body {
@extend %scrollable;
}
```

### `_typeface.scss`
A [Better Helvetica Font Stack](http://j.mp/9t6O6Z).

```scss
body {
@extend %typeface;
}
```