graphite-sass 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 585c7020278533126d93285d965e63bd3085feaf
-  data.tar.gz: e44e791882c7a17221b5b033bf6d4b4d48dbeb7b
+  metadata.gz: ff77bd7b10caee3217adb5bac1ec9f6761cf81a7
+  data.tar.gz: ea4d2a2bfd6dde3dfa5a9ee73c1af781563e05f6
 SHA512:
-  metadata.gz: 08104a1f32b485ee103002bdeb0cd4aafe74e8b0fefd3590bc62e85120c9059835babe48cad2b2d6c0c2eac3e7de8377bfbed90539ffe1f24eac9cc80e9d5f69
-  data.tar.gz: 86ea08fcab288c367338fe149ffe031e64412bd74bf99ff815e0ae382bec55a7326cd046f01b0c72131f2a77dc1b817280e50f63708d979bce67ec8fc6e153ad
+  metadata.gz: 61d1efdcd1377386e8cad3594461b7bacb6ac7f5f386506a0b2ef47e0d16656b9d7fdffe457f0bce04a39376553391475376f9a1a70a6a8730a7096a9c5eb870
+  data.tar.gz: c4a72404e5357271cf996276e6ef46af38d77ab8e33206cbb27e8ee8ffc6ff3f22c35acf3a8e05081de4e12320e3089f75a6a81cf5c227066e6389769bfe2728

data/README.md

@@ -1,15 +1,133 @@
-# Graphite [![Gem Version](https://badge.fury.io/rb/Graphite.svg)](http://badge.fury.io/rb/Graphite)
+# 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.
+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`
+1. `gem install graphite-sass`
 2. Add `require "graphite"` to your `config.rb`
 3. Import into your stylesheet with `@import "graphite";`
 
 ## Documentation
 
-#### File naming convention
+### 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
+│   │   ├── ...
+│   ├── font-family...
+│   │   ├── fonts...
+├── 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;
+```
+
+`$graphite_seperator` is used for the filename in the output file path. When the font gets parsed within Graphite and outputted into the `url(...)`,
+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.
+`$graphite_chdir` is used in the output file path to your font folder _from_ your stylesheet folder. For example, the path `url("../fonts/helvetica[...]")`
+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
+the recommended settings.
+
+### 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. 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.
+
+### 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");
+  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");
+}
+
+@font-face {
+  font-family: "helvetica-neue";
+  font-weight: 200;
+  font-style: normal;
+  src: url("../fonts/helvetica-neue/helvetica-neue-200-normal.eot");
+  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");
+}
+
+@font-face {
+  font-family: "helvetica-neue";
+  font-weight: 700;
+  font-style: italic;
+  src: url("../fonts/helvetica-neue/helvetica-neue-700-italic.eot");
+  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");
+}
+
+@font-face {
+  font-family: "helvetica-neue";
+  font-weight: 700;
+  font-style: normal;
+  src: url("../fonts/helvetica-neue/helvetica-neue-700-normal.eot");
+  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");
+}
+```
+
+## Authors
+
+[Ezekiel Gabrielse](http://ezekielg.com)
+
+## License
 
-In order for Graphite to successfully import your fonts, please follow this convention for naming your font files: `name-weightnum-style.extension`
+Graphite is available under the [MIT](http://opensource.org/licenses/MIT) license.

data/lib/{Graphite.rb → graphite.rb}

@@ -5,8 +5,8 @@ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
 Compass::Frameworks.register('graphite', :path => extension_path)
 
 module Graphite
-    VERSION = "0.0.1"
-    DATE = "2014-06-24"
+    VERSION = "0.1.0"
+    DATE = "2014-07-21"
 end
 
 # Graphite : import fonts from font_dir into map

data/stylesheets/{Graphite.scss → graphite.scss}

@@ -12,31 +12,23 @@ $graphite_chdir: ".." !global;
 // ----
 // @return [bool]
 
-@function is-map($n) {
+@function graphite-is-map($n) {
     @return type-of($n) == "map";
 }
 
 // Fetch value from key in map
 // ----
-// @dependence `map-fetche()`
+// @param $map [map] : map to fetch from
+// @param $keys [list] : list of keys
 // ----
-// @param $i [map] : map
-// @param $n [list] : keys
-// ----
-// @return fetched value | false
+// @return fetched literal | false
 
-@function map-fetch($map, $keys) {
+@function graphite-map-fetch($map, $keys) {
 	$key: nth($keys, 1);
 	$length: length($keys);
 	$value: map-get($map, $key);
 
-	// check if value equals null (meaning the @param was incorrect and the map doesn't exist)
-	@if $value == null {
-		@warn "Invalid arguments padded to function: `map-fetch(#{$map}, #{$keys})`";
-		@return false;
-	}
-
-	@else {
+	@if $value != null {
 		@if $length > 1 {
 			$rest: ();
 
@@ -44,11 +36,14 @@ $graphite_chdir: ".." !global;
 				$rest: append($rest, nth($keys, $i))
 			}
 
-			@return map-fetch($value, $rest);
+			@return graphite-map-fetch($value, $rest);
 
 		} @else {
 			@return $value;
 		}
+	} @else {
+		@warn "Invalid arguments passed to function: graphite-map-fetch(#{$map}, #{$keys}). One or more of the keys do not exist.";
+		@return false;
 	}
 }
 
@@ -64,7 +59,7 @@ $graphite_chdir: ".." !global;
     $graphite_fonts: graphite("#{$dir}", $legacy-ie) !global;
 
     // Make sure it's a valid map before attempting the loop
-    @if is-map($graphite_fonts) {
+    @if graphite-is-map($graphite_fonts) {
         // Start legacy with null value
         $legacy-ie: null;
 
@@ -76,7 +71,7 @@ $graphite_chdir: ".." !global;
                 $legacy-ie: map-get($graphite_fonts, "legacy-ie");
             }
 
-            @if is-map($value) {
+            @if graphite-is-map($value) {
                 // Font name
                 $name: $key;
                 // Path to top-level font directory
@@ -106,12 +101,12 @@ $graphite_chdir: ".." !global;
 
                     // Map of font weights
                     @if $k == "weights" {
-                        $weights: map-fetch($graphite_fonts, $key $k);
+                        $weights: graphite-map-fetch($graphite_fonts, $key $k);
 
                         // Iterate over each weight
                         @each $weight, $styles in $weights {
                             // Get list of styles for weight
-                            $styles: map-fetch($weights, $weight "styles");
+                            $styles: graphite-map-fetch($weights, $weight "styles");
 
                             // Iterate over each style
                             @each $style in $styles {

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: graphite-sass
 version: !ruby/object:Gem::Version
-  version: 0.0.1
+  version: 0.1.0
 platform: ruby
 authors:
 - Ezekiel Gabrielse
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2014-06-24 00:00:00.000000000 Z
+date: 2014-07-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass
@@ -61,8 +61,8 @@ extensions: []
 extra_rdoc_files: []
 files:
 - README.md
-- lib/Graphite.rb
-- stylesheets/Graphite.scss
+- lib/graphite.rb
+- stylesheets/graphite.scss
 homepage: https://github.com/ezekg/Graphite/
 licenses:
 - MIT