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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 585c7020278533126d93285d965e63bd3085feaf
4
- data.tar.gz: e44e791882c7a17221b5b033bf6d4b4d48dbeb7b
3
+ metadata.gz: ff77bd7b10caee3217adb5bac1ec9f6761cf81a7
4
+ data.tar.gz: ea4d2a2bfd6dde3dfa5a9ee73c1af781563e05f6
5
5
  SHA512:
6
- metadata.gz: 08104a1f32b485ee103002bdeb0cd4aafe74e8b0fefd3590bc62e85120c9059835babe48cad2b2d6c0c2eac3e7de8377bfbed90539ffe1f24eac9cc80e9d5f69
7
- data.tar.gz: 86ea08fcab288c367338fe149ffe031e64412bd74bf99ff815e0ae382bec55a7326cd046f01b0c72131f2a77dc1b817280e50f63708d979bce67ec8fc6e153ad
6
+ metadata.gz: 61d1efdcd1377386e8cad3594461b7bacb6ac7f5f386506a0b2ef47e0d16656b9d7fdffe457f0bce04a39376553391475376f9a1a70a6a8730a7096a9c5eb870
7
+ data.tar.gz: c4a72404e5357271cf996276e6ef46af38d77ab8e33206cbb27e8ee8ffc6ff3f22c35acf3a8e05081de4e12320e3089f75a6a81cf5c227066e6389769bfe2728
data/README.md CHANGED
@@ -1,15 +1,133 @@
1
- # Graphite [![Gem Version](https://badge.fury.io/rb/Graphite.svg)](http://badge.fury.io/rb/Graphite)
1
+ # Graphite [![Gem Version](https://badge.fury.io/rb/graphite-sass.svg)](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 Graphite`
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
- #### File naming convention
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
- In order for Graphite to successfully import your fonts, please follow this convention for naming your font files: `name-weightnum-style.extension`
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.1"
9
- DATE = "2014-06-24"
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
- // @dependence `map-fetche()`
21
+ // @param $map [map] : map to fetch from
22
+ // @param $keys [list] : list of keys
22
23
  // ----
23
- // @param $i [map] : map
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
- // check if value equals null (meaning the @param was incorrect and the map doesn't exist)
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.1
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-06-24 00:00:00.000000000 Z
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/Graphite.rb
65
- - stylesheets/Graphite.scss
64
+ - lib/graphite.rb
65
+ - stylesheets/graphite.scss
66
66
  homepage: https://github.com/ezekg/Graphite/
67
67
  licenses:
68
68
  - MIT