graphite-sass 0.0.1 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +123 -5
- data/lib/{Graphite.rb → graphite.rb} +2 -2
- data/stylesheets/{Graphite.scss → graphite.scss} +14 -19
- metadata +4 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ff77bd7b10caee3217adb5bac1ec9f6761cf81a7
|
|
4
|
+
data.tar.gz: ea4d2a2bfd6dde3dfa5a9ee73c1af781563e05f6
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 61d1efdcd1377386e8cad3594461b7bacb6ac7f5f386506a0b2ef47e0d16656b9d7fdffe457f0bce04a39376553391475376f9a1a70a6a8730a7096a9c5eb870
|
|
7
|
+
data.tar.gz: c4a72404e5357271cf996276e6ef46af38d77ab8e33206cbb27e8ee8ffc6ff3f22c35acf3a8e05081de4e12320e3089f75a6a81cf5c227066e6389769bfe2728
|
data/README.md
CHANGED
|
@@ -1,15 +1,133 @@
|
|
|
1
|
-
# Graphite [](http://badge.fury.io/rb/graphite-sass)
|
|
2
2
|
|
|
3
|
-
Graphite imports a folder of fonts and automagically outputs font-face directives for each font into your stylesheet.
|
|
3
|
+
Graphite imports a folder of fonts and automagically outputs font-face directives for each font into your stylesheet. Will write up better documentation soon.
|
|
4
|
+
|
|
5
|
+
##Requirements
|
|
6
|
+
|
|
7
|
+
* Sass ~> 3.3.0
|
|
8
|
+
* Compass ~> 1.0.0.alpha.19
|
|
4
9
|
|
|
5
10
|
## Installation
|
|
6
11
|
|
|
7
|
-
1. `gem install
|
|
12
|
+
1. `gem install graphite-sass`
|
|
8
13
|
2. Add `require "graphite"` to your `config.rb`
|
|
9
14
|
3. Import into your stylesheet with `@import "graphite";`
|
|
10
15
|
|
|
11
16
|
## Documentation
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
### Directory tree
|
|
19
|
+
|
|
20
|
+
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.
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
root
|
|
24
|
+
├── fonts
|
|
25
|
+
│ ├── helvetica-neue
|
|
26
|
+
│ │ ├── helvetica-neue-400-italic.woff
|
|
27
|
+
│ │ ├── helvetica-neue-400-normal.woff
|
|
28
|
+
│ │ ├── helvetica-neue-700-italic.woff
|
|
29
|
+
│ │ ├── helvetica-neue-700-normal.woff
|
|
30
|
+
│ │ ├── ...
|
|
31
|
+
│ ├── font-family...
|
|
32
|
+
│ │ ├── fonts...
|
|
33
|
+
├── sass
|
|
34
|
+
│ ├── style.scss
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### File naming convention
|
|
38
|
+
|
|
39
|
+
In order for Graphite to successfully import your fonts, please follow this convention for naming your font files:
|
|
40
|
+
|
|
41
|
+
> ###### name: \<string\>
|
|
42
|
+
> ###### weight: \<100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900\>
|
|
43
|
+
> ###### style: \<normal | italic\>
|
|
44
|
+
> ###### extension: \<woff | ttf | eot | svg | otf\>
|
|
45
|
+
|
|
46
|
+
#### name-weight-style.extension
|
|
47
|
+
|
|
48
|
+
Example,
|
|
49
|
+
`helvetica-neue-400-italic.woff`, `helvetica-neue-400-normal.ttf`, `helvetica-neue-100-normal.svg`
|
|
50
|
+
|
|
51
|
+
### Configuration
|
|
52
|
+
|
|
53
|
+
These global variables can be changed according to your needs.
|
|
54
|
+
|
|
55
|
+
```scss
|
|
56
|
+
// Filename seperator
|
|
57
|
+
// ----
|
|
58
|
+
$graphite_seperator: "-" !global;
|
|
59
|
+
|
|
60
|
+
// Prepend directory path
|
|
61
|
+
// ----
|
|
62
|
+
$graphite_chdir: ".." !global;
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
`$graphite_seperator` is used for the filename in the output file path. When the font gets parsed within Graphite and outputted into the `url(...)`,
|
|
66
|
+
it will use this seperator variable for you guessed it, seperating the variabiles within your font's filename when rebuilding the parsed font's name.
|
|
67
|
+
`$graphite_chdir` is used in the output file path to your font folder _from_ your stylesheet folder. For example, the path `url("../fonts/helvetica[...]")`
|
|
68
|
+
has the `$graphite_chdir` variable (`".."`) placed at the beginning of the path. You can edit these variables according to your project needs, though these are
|
|
69
|
+
the recommended settings.
|
|
70
|
+
|
|
71
|
+
### Usage
|
|
72
|
+
|
|
73
|
+
```scss
|
|
74
|
+
// Import fonts from $dir
|
|
75
|
+
// ----
|
|
76
|
+
// @param $dir [string] : directory to import fonts
|
|
77
|
+
// @param $legacy-ie [bool] : support legacy ie
|
|
78
|
+
// ----
|
|
79
|
+
// @return $fonts [map] : imports fonts from $dir and creates
|
|
80
|
+
// a $var for each font family containing [string] name
|
|
81
|
+
|
|
82
|
+
@include graphite("/fonts", true);
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
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. Graphite will import the correct filetypes for each font-family. This check is run on a family-to-family basis, and not a font-to-font basis; be sure to include the same filetypes for each font in your font-family folder to avoid any 404 request errors.
|
|
86
|
+
|
|
87
|
+
### Output
|
|
88
|
+
|
|
89
|
+
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.
|
|
90
|
+
|
|
91
|
+
```scss
|
|
92
|
+
$helvetica-neue: "helvetica-neue";
|
|
93
|
+
|
|
94
|
+
@font-face {
|
|
95
|
+
font-family: "helvetica-neue";
|
|
96
|
+
font-weight: 200;
|
|
97
|
+
font-style: italic;
|
|
98
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-200-italic.eot");
|
|
99
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-200-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-200-italic.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-200-italic.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-200-italic.svg#helvetica-neue") format("svg");
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@font-face {
|
|
103
|
+
font-family: "helvetica-neue";
|
|
104
|
+
font-weight: 200;
|
|
105
|
+
font-style: normal;
|
|
106
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-200-normal.eot");
|
|
107
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-200-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-200-normal.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-200-normal.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-200-normal.svg#helvetica-neue") format("svg");
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
@font-face {
|
|
111
|
+
font-family: "helvetica-neue";
|
|
112
|
+
font-weight: 700;
|
|
113
|
+
font-style: italic;
|
|
114
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-700-italic.eot");
|
|
115
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-700-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-700-italic.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-700-italic.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-700-italic.svg#helvetica-neue") format("svg");
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@font-face {
|
|
119
|
+
font-family: "helvetica-neue";
|
|
120
|
+
font-weight: 700;
|
|
121
|
+
font-style: normal;
|
|
122
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-700-normal.eot");
|
|
123
|
+
src: url("../fonts/helvetica-neue/helvetica-neue-700-normal.eot?#iefix") format("embedded-opentype"), url("../fonts/helvetica-neue/helvetica-neue-700-normal.woff") format("woff"), url("../fonts/helvetica-neue/helvetica-neue-700-normal.ttf") format("truetype"), url("../fonts/helvetica-neue/helvetica-neue-700-normal.svg#helvetica-neue") format("svg");
|
|
124
|
+
}
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
## Authors
|
|
128
|
+
|
|
129
|
+
[Ezekiel Gabrielse](http://ezekielg.com)
|
|
130
|
+
|
|
131
|
+
## License
|
|
14
132
|
|
|
15
|
-
|
|
133
|
+
Graphite is available under the [MIT](http://opensource.org/licenses/MIT) license.
|
|
@@ -5,8 +5,8 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
|
|
5
5
|
Compass::Frameworks.register('graphite', :path => extension_path)
|
|
6
6
|
|
|
7
7
|
module Graphite
|
|
8
|
-
VERSION = "0.0
|
|
9
|
-
DATE = "2014-
|
|
8
|
+
VERSION = "0.1.0"
|
|
9
|
+
DATE = "2014-07-21"
|
|
10
10
|
end
|
|
11
11
|
|
|
12
12
|
# Graphite : import fonts from font_dir into map
|
|
@@ -12,31 +12,23 @@ $graphite_chdir: ".." !global;
|
|
|
12
12
|
// ----
|
|
13
13
|
// @return [bool]
|
|
14
14
|
|
|
15
|
-
@function is-map($n) {
|
|
15
|
+
@function graphite-is-map($n) {
|
|
16
16
|
@return type-of($n) == "map";
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
// Fetch value from key in map
|
|
20
20
|
// ----
|
|
21
|
-
// @
|
|
21
|
+
// @param $map [map] : map to fetch from
|
|
22
|
+
// @param $keys [list] : list of keys
|
|
22
23
|
// ----
|
|
23
|
-
// @
|
|
24
|
-
// @param $n [list] : keys
|
|
25
|
-
// ----
|
|
26
|
-
// @return fetched value | false
|
|
24
|
+
// @return fetched literal | false
|
|
27
25
|
|
|
28
|
-
@function map-fetch($map, $keys) {
|
|
26
|
+
@function graphite-map-fetch($map, $keys) {
|
|
29
27
|
$key: nth($keys, 1);
|
|
30
28
|
$length: length($keys);
|
|
31
29
|
$value: map-get($map, $key);
|
|
32
30
|
|
|
33
|
-
|
|
34
|
-
@if $value == null {
|
|
35
|
-
@warn "Invalid arguments padded to function: `map-fetch(#{$map}, #{$keys})`";
|
|
36
|
-
@return false;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
@else {
|
|
31
|
+
@if $value != null {
|
|
40
32
|
@if $length > 1 {
|
|
41
33
|
$rest: ();
|
|
42
34
|
|
|
@@ -44,11 +36,14 @@ $graphite_chdir: ".." !global;
|
|
|
44
36
|
$rest: append($rest, nth($keys, $i))
|
|
45
37
|
}
|
|
46
38
|
|
|
47
|
-
@return map-fetch($value, $rest);
|
|
39
|
+
@return graphite-map-fetch($value, $rest);
|
|
48
40
|
|
|
49
41
|
} @else {
|
|
50
42
|
@return $value;
|
|
51
43
|
}
|
|
44
|
+
} @else {
|
|
45
|
+
@warn "Invalid arguments passed to function: graphite-map-fetch(#{$map}, #{$keys}). One or more of the keys do not exist.";
|
|
46
|
+
@return false;
|
|
52
47
|
}
|
|
53
48
|
}
|
|
54
49
|
|
|
@@ -64,7 +59,7 @@ $graphite_chdir: ".." !global;
|
|
|
64
59
|
$graphite_fonts: graphite("#{$dir}", $legacy-ie) !global;
|
|
65
60
|
|
|
66
61
|
// Make sure it's a valid map before attempting the loop
|
|
67
|
-
@if is-map($graphite_fonts) {
|
|
62
|
+
@if graphite-is-map($graphite_fonts) {
|
|
68
63
|
// Start legacy with null value
|
|
69
64
|
$legacy-ie: null;
|
|
70
65
|
|
|
@@ -76,7 +71,7 @@ $graphite_chdir: ".." !global;
|
|
|
76
71
|
$legacy-ie: map-get($graphite_fonts, "legacy-ie");
|
|
77
72
|
}
|
|
78
73
|
|
|
79
|
-
@if is-map($value) {
|
|
74
|
+
@if graphite-is-map($value) {
|
|
80
75
|
// Font name
|
|
81
76
|
$name: $key;
|
|
82
77
|
// Path to top-level font directory
|
|
@@ -106,12 +101,12 @@ $graphite_chdir: ".." !global;
|
|
|
106
101
|
|
|
107
102
|
// Map of font weights
|
|
108
103
|
@if $k == "weights" {
|
|
109
|
-
$weights: map-fetch($graphite_fonts, $key $k);
|
|
104
|
+
$weights: graphite-map-fetch($graphite_fonts, $key $k);
|
|
110
105
|
|
|
111
106
|
// Iterate over each weight
|
|
112
107
|
@each $weight, $styles in $weights {
|
|
113
108
|
// Get list of styles for weight
|
|
114
|
-
$styles: map-fetch($weights, $weight "styles");
|
|
109
|
+
$styles: graphite-map-fetch($weights, $weight "styles");
|
|
115
110
|
|
|
116
111
|
// Iterate over each style
|
|
117
112
|
@each $style in $styles {
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: graphite-sass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 0.1.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Ezekiel Gabrielse
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2014-
|
|
11
|
+
date: 2014-07-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: sass
|
|
@@ -61,8 +61,8 @@ extensions: []
|
|
|
61
61
|
extra_rdoc_files: []
|
|
62
62
|
files:
|
|
63
63
|
- README.md
|
|
64
|
-
- lib/
|
|
65
|
-
- stylesheets/
|
|
64
|
+
- lib/graphite.rb
|
|
65
|
+
- stylesheets/graphite.scss
|
|
66
66
|
homepage: https://github.com/ezekg/Graphite/
|
|
67
67
|
licenses:
|
|
68
68
|
- MIT
|