Add @extend selectors to griddle

[Phunky]

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

@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}

<div class="row-single">
    <div class="col"><div class="box">1/2</div></div>
</div>

<div class="row-twins">
    <div class="col"><div class="box">1/3</div></div>
    <div class="col"><div class="box">1/3</div></div>
</div>

<div class="row-triplets">
    <div class="col"><div class="box">1/4</div></div>
    <div class="col"><div class="box">1/4</div></div>
    <div class="col"><div class="box">1/4</div></div>
</div>

.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 *

[ghost]

+1 I like it, would love to see it in master branch!

[KittyGiraudel]

Instead of compiling both silent and visible classes, you could use a boolean to enable either one or the other. I guess it would be better for the final output.

[markh-fod]

Very true @HugoGiraudel and that's actually what I did myself after this PR, although for initial prototyping its good to have both so you can chop & change live in the browser while testing.

[kevva]

First of all, don't include changes that aren't related to the PR. By that I mean the change of filename and comments. Read this.

Second of all, what's the benefit of doing this? I don't see any.

[ghost]

The benefit is, that you don't have to talk about the layout in the markup. Instead of saying "This column is this wide", you can say "this is the navigation column" and specify the style for it where it belongs - in the style sheets.

As for the PR, I agree. That could've been two PRs. I appreciate that suggested changes though. Single line comments will not appear in the compiled CSS, underscored SCSS files will not clutter your target directory.

Maybe we can split this PR into two separate ones?

[necolas]

Going to close this because: it isn't quite aligned with the point of this module, but it also includes unrelated changes and doesn't merge cleanly.