<commit_before># Graphite [![Gem Version](https://badge.fury.io/rb/graphite-sass.svg)](http://badge.fury.io/rb/graphite-sass)

Graphite imports a folder of fonts and automagically outputs font-face directives for each font into your stylesheet. Will write up better documentation soon.

##Requirements

* Sass ~> 3.3.0
* Compass ~> 1.0.0.alpha.19

## Installation

1. `gem install graphite-sass`
2. Add `require "graphite"` to your `config.rb`
3. Import into your stylesheet with `@import "graphite";`

## Documentation

### Directory tree

Each font-family should have it's own folder inside of the top-level fonts directory. Font-family directory name should match the name specified in the actual font filename.

```
root
├── fonts
│   ├── helvetica-neue
│   │   ├── helvetica-neue-400-italic.woff
│   │   ├── helvetica-neue-400-normal.woff
│   │   ├── helvetica-neue-700-italic.woff
│   │   ├── helvetica-neue-700-normal.woff
│   │   ├── ...
├── sass
│   ├── style.scss
```

### File naming convention

In order for Graphite to successfully import your fonts, please follow this convention for naming your font files:

```
name <string>
weight <100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900>
style <normal | italic>
extension <woff | ttf | eot | svg | otf>

name-weight-style.extension
```

Example,
`helvetica-neue-400-italic.woff`, `helvetica-neue-400-normal.ttf`, `helvetica-neue-100-normal.svg`

### Configuration

These global variables can be changed according to your needs.

```scss
// Filename seperator
// ----
$graphite_seperator: "-" !global;

// Prepend directory path
// ----
$graphite_chdir: ".." !global;
```

### Usage

```scss
// Import fonts from $dir
// ----
// @param $dir [string] : directory to import fonts
// @param $legacy-ie [bool] : support legacy ie
// ----
// @return $fonts [map] : imports fonts from $dir and creates
//   a $var for each font family containing [string] name

@include graphite("/fonts", true);
```

Graphite will also create a local Sass variable for each font-family, so with the example above we would have a `$helvetica-neue: "helvetica-neue"` variable to use within the stylesheet, such as for a font stack. Graphite does not handle creating font stacks; that is left up to you.

### Output

```scss
$helvetica-neue: "helvetica-neue";

@font-face {
  font-family: "helvetica-neue";
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/helvetica-neue/helvetica-neue-200-italic.eot");<commit_msg>add comment to output section<commit_after># Graphite [![Gem Version](https://badge.fury.io/rb/graphite-sass.svg)](http://badge.fury.io/rb/graphite-sass)

Graphite imports a folder of fonts and automagically outputs font-face directives for each font into your stylesheet. Will write up better documentation soon.

##Requirements

* Sass ~> 3.3.0
* Compass ~> 1.0.0.alpha.19

## Installation

1. `gem install graphite-sass`
2. Add `require "graphite"` to your `config.rb`
3. Import into your stylesheet with `@import "graphite";`

## Documentation

### Directory tree

Each font-family should have it's own folder inside of the top-level fonts directory. Font-family directory name should match the name specified in the actual font filename.

```
root
├── fonts
│   ├── helvetica-neue
│   │   ├── helvetica-neue-400-italic.woff
│   │   ├── helvetica-neue-400-normal.woff
│   │   ├── helvetica-neue-700-italic.woff
│   │   ├── helvetica-neue-700-normal.woff
│   │   ├── ...
├── sass
│   ├── style.scss
```

### File naming convention

In order for Graphite to successfully import your fonts, please follow this convention for naming your font files:

```
name <string>
weight <100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900>
style <normal | italic>
extension <woff | ttf | eot | svg | otf>

name-weight-style.extension
```

Example,
`helvetica-neue-400-italic.woff`, `helvetica-neue-400-normal.ttf`, `helvetica-neue-100-normal.svg`

### Configuration

These global variables can be changed according to your needs.

```scss
// Filename seperator
// ----
$graphite_seperator: "-" !global;

// Prepend directory path
// ----
$graphite_chdir: ".." !global;
```

### Usage

```scss
// Import fonts from $dir
// ----
// @param $dir [string] : directory to import fonts
// @param $legacy-ie [bool] : support legacy ie
// ----
// @return $fonts [map] : imports fonts from $dir and creates
//   a $var for each font family containing [string] name

@include graphite("/fonts", true);
```

Graphite will also create a local Sass variable for each font-family, so with the example above we would have a `$helvetica-neue: "helvetica-neue"` variable to use within the stylesheet, such as for a font stack. Graphite does not handle creating font stacks; that is left up to you.

### Output

The output is similar to what Google Fonts does with their CSS. All fonts share the same font-family, and each fonts style and weight is assigned appropriately.

```scss
$helvetica-neue: "helvetica-neue";

@font-face {
  font-family: "helvetica-neue";
  font-weight: 200;
  font-style: italic;
  src: url("../fonts/helvetica-neue/helvetica-neue-200-italic.eot");
{'fraction_non_alphanumeric': 0.14162754303599373, 'fraction_numerical': 0.02543035993740219, 'mean_word_length': 3.7081031307550645, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 15, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1100285', 'n_tokens_mistral': 1859, 'n_tokens_neox': 1733, 'n_words': 588}