guardian/guss-typography — pull request #16 by kaelig (2014-08-26 17:07:17+00:00)
Title: V3 - fixes #7

### SassDoc

Inline documentation uses [SassDoc](https://github.com/SassDoc/sassdoc) notation, to do things like this:

![screen shot 2014-08-26 at 18 06 20](https://cloud.githubusercontent.com/assets/85783/4048423/598c2562-2d43-11e4-8bbb-9ae24a554e6f.PNG)

### Configuration
Configuration is consolidated into a single map, easy to extend and simpler to query:

```scss
$font-scale: (
header: (
1: (font-size: 16, line-height: 20),
2: (font-size: 18, line-height: 24),
3: (font-size: 20, line-height: 24),
4: (font-size: 22, line-height: 28),
5: (font-size: 24, line-height: 28),
),
headline: (
1: (font-size: 14, line-height: 18),
2: (font-size: 16, line-height: 20),
3: (font-size: 20, line-height: 24),
4: (font-size: 24, line-height: 28),
5: (font-size: 28, line-height: 32),
6: (font-size: 32, line-height: 36),
7: (font-size: 36, line-height: 40),
8: (font-size: 40, line-height: 44),
9: (font-size: 44, line-height: 48),
),
bodyHeading: (
1: (font-size: 14, line-height: 22),
2: (font-size: 16, line-height: 24),
3: (font-size: 18, line-height: 28),
4: (font-size: 20, line-height: 28),
),
bodyCopy: (
1: (font-size: 14, line-height: 20),
2: (font-size: 16, line-height: 24),
3: (font-size: 18, line-height: 28),
),
data: (
1: (font-size: 11, line-height: 14),
2: (font-size: 12, line-height: 14),
3: (font-size: 13, line-height: 16),
4: (font-size: 14, line-height: 18),
5: (font-size: 16, line-height: 20),
6: (font-size: 18, line-height: 22),
),
textSans: (
1: (font-size: 12, line-height: 16),
2: (font-size: 13, line-height: 18),
3: (font-size: 14, line-height: 20),
4: (font-size: 14, line-height: 22),
)
);
```

### Helpers

Ubiquity between configuration, the png matrix and the helper parameter syntax.

`get-font-size` and `get-line-height` helpers take these two parameters:

```scss
@param {String} $name - Name of the font-scale in the matrix (eg: headline)
@param {Number} $level - Level in the matrix
```

They should be called like this:
```scss
.get-font-size {
font-size: get-font-size(headline, 6); // used to be ($fs-headlines, 6)
}
.get-line-height {
line-height: get-line-height(header, 3); // used to be ($fs-headers, 3)
}
```

![ ](http://gifs.joelglovier.com/smooth/bill-murray-toast.gif)