necolas/griddle — pull request #9 by Phunky (2013-02-15 13:06:52+00:00)
Title: Add @extend selectors to griddle

Added @extend selectors to griddle to remove the need for placing griddle class within the HTML.

```scss
@import "griddle";
@include griddle-build(2 3 4);

.row-single, .row-twins, .row-triplets {
@extend %grid;
@extend %grid--center
}

.col {@extend %grid__cell}
.row-single .col {@extend %unit-1-2}
.row-twins .col {@extend %unit-1-3}
.row-triplets .col {@extend %unit-1-4}
```

```html

1/2

1/3

1/3

1/4

1/4

1/4

```

```css
.row-single, .row-twins, .row-triplets { display: block; padding: 0; margin: 0 -10px; text-align: left; letter-spacing: -0.31em; word-spacing: -0.43em; text-rendering: optimizespeed; }
.row-single > .row-single, .row-twins > .row-single, .row-triplets > .row-single, .row-single > .row-twins, .row-twins > .row-twins, .row-triplets > .row-twins, .row-single > .row-triplets, .row-twins > .row-triplets, .row-triplets > .row-triplets { overflow: hidden; margin-right: 0; margin-left: 0; }
.col { -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; display: inline-block; margin: 0; padding: 0 10px; vertical-align: top; text-align: left; letter-spacing: normal; word-spacing: normal; text-rendering: auto; }
.row-single, .row-twins, .row-triplets { text-align: center; }
.unit-1-2, .unit-2-4, .unit-3-4, .row-single .col { width: 50%; }
.unit-1-3, .row-twins .col { width: 33.33333%; }
.unit-2-3 { width: 66.66667%; }
.unit-1-4, .row-triplets .col { width: 25%; }
```

Extremely useful for responsive designs that don't want to place specific presentation classes within the markup.

* Note this is my attempt at losing my pull-request virginity so please be gentle *