graphite-sass 0.0.1 → 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|