Add grunt and jshint.

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+bower_components/

.jshintrc

@@ -0,0 +1,14 @@
+{
+  "curly": true,
+  "eqeqeq": true,
+  "immed": true,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "sub": true,
+  "undef": true,
+  "unused": true,
+  "boss": true,
+  "eqnull": true,
+  "node": true
+}

Gruntfile.js

@@ -0,0 +1,51 @@
+
+/*global module:false require*/
+module.exports = function(grunt) {
+	"use strict";
+
+	// Project configuration.
+	grunt.initConfig({
+		// Metadata.
+		pkg: grunt.file.readJSON('package.json'),
+		banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+			'<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+			'<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+			'* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
+			'* Licensed <%= pkg.license %> */\n',
+		jshint: {
+			gruntfile: {
+				options: {
+					jshintrc: '.jshintrc'
+				},
+				src: 'Gruntfile.js'
+			},
+			lib: {
+				src: ['lib/fontfaceonload.js']
+			}
+		},
+		watch: {
+			gruntfile: {
+				files: '<%= jshint.gruntfile.src %>',
+				tasks: ['jshint:gruntfile']
+			},
+			lib_test: {
+				files: '<%= jshint.lib.src %>',
+				tasks: ['jshint:lib']
+			}
+		},
+		bytesize: {
+			src: {
+				src: [
+					'<%= pkg.name %>.css',
+					'<%= pkg.name %>.js'
+				]
+			}
+		}
+	});
+
+	require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+
+	// Default task.
+	grunt.registerTask('default', ['jshint', 'bytesize:src']);
+
+};

README.md

@@ -2,6 +2,10 @@
 
 **A set of reliable (nay, bulletproof) patterns for icon fonts.**
 
+Add `afontgarde.css` and `afontgarde.js` to your build to concat up into your web site.
+
+Also requires a `@font-face` feature test:
+
 ## Font Face Feature Tests
 
 Really, you can use these approaches with any font-face feature test that supplies the `supports-fontface` class. However, here we’re also assuming the use of Modernizr’s pseudo-elements feature test to supply `supports-generatedcontent` and `supports-no-generatedcontent` classes.

afontgarde.css

@@ -1,3 +1,8 @@
+/*! afontgarde - v0.1.0 - 2013-12-20
+* https://github.com/filamentgroup/a-font-garde
+* Copyright (c) 2013 Filament Group c/o Zach Leatherman
+* Licensed MIT */
+
 .icon-fallback-text .icon {
 	display: none;
 }

afontgarde.js

@@ -1,3 +1,96 @@
+/*! afontgarde - v0.1.0 - 2013-12-20
+* https://github.com/filamentgroup/a-font-garde
+* Copyright (c) 2013 Filament Group c/o Zach Leatherman
+* Licensed MIT */
+
+/*
+ * Font-Face Onload Script
+ */
+;(function( win, doc ) {
+		var DELAY = 100,
+			TEST_STRING = 'AxmTYklsjo190QW',
+			TOLERANCE = 2, // px
+
+			SANS_SERIF_FONTS = 'sans-serif',
+			SERIF_FONTS = 'serif',
+
+			parent = doc.createElement( 'div' ),
+			html = '<div style="font-family:%s;position:absolute;top:0;left:-9999px;font-size:48px">' + TEST_STRING + '</div>',
+			sansSerif,
+			serif,
+			dimensions,
+			appended = false;
+
+		parent.innerHTML = html.replace(/\%s/, SANS_SERIF_FONTS ) + html.replace(/\%s/, SERIF_FONTS );
+		sansSerif = parent.firstChild;
+		serif = sansSerif.nextSibling;
+
+		// intentional global
+		FontFaceOnload = function( fontFamily, options ) {
+			var defaultOptions = {
+					glyphs: '',
+					success: function() {},
+					error: function() {},
+					timeout: 10000
+				},
+				startTime = new Date();
+
+			if( options ) {
+				for( var j in options ) {
+					if( options.hasOwnProperty( j ) ) {
+						defaultOptions[ j ] = options[ j ];
+					}
+				}
+			}
+
+			if( options.glyphs ) {
+				sansSerif.innerHTML += options.glyphs;
+				serif.innerHTML += options.glyphs;
+			}
+
+			if( !appended && doc.body ) {
+				appended = true;
+				doc.body.appendChild( parent );
+				dimensions = {
+					sansSerif: {
+						width: sansSerif.offsetWidth,
+						height: sansSerif.offsetHeight
+					},
+					serif: {
+						width: serif.offsetWidth,
+						height: serif.offsetHeight
+					}
+				};
+			}
+
+			// Make sure we set the new font-family after we take our initial dimensions:
+			// handles the case where FontFaceOnload is called after the font has already
+			// loaded.
+			sansSerif.style.fontFamily = fontFamily + ', ' + SANS_SERIF_FONTS;
+			serif.style.fontFamily = fontFamily + ', ' + SERIF_FONTS;
+
+			(function checkDimensions() {
+				if( Math.abs( dimensions.sansSerif.width - sansSerif.offsetWidth ) > TOLERANCE ||
+					Math.abs( dimensions.sansSerif.height - sansSerif.offsetHeight ) > TOLERANCE ||
+					Math.abs( dimensions.serif.width - serif.offsetWidth ) > TOLERANCE ||
+					Math.abs( dimensions.serif.height - serif.offsetHeight ) > TOLERANCE ) {
+
+					options.success();
+				} else if( ( new Date() ).getTime() - startTime.getTime() > options.timeout ) {
+					options.error();
+				} else {
+					setTimeout(function() {
+						checkDimensions();
+					}, DELAY);
+				}
+			})();
+		};
+})( this, this.document );
+
+
+/*
+ * A Font Garde
+ */
 ;(function( w ) {
 
 	var doc = w.document,

markup.html

@@ -84,7 +84,6 @@
 </style>
 <!-- <script src="lib/faceoff.js"></script> -->
 <script src="lib/modernizr.fontface-generatedcontent.js"></script>
-<script src="lib/fontfaceonload.js"></script>
 <script src="afontgarde.js"></script>
 <script>
 AFontGarde( 'icomoon', '\uE600\uE601\uE602\uE605' );

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "afontgarde",
+  "version": "0.1.0",
+  "description": "The safest way to use font icons.",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/filamentgroup/a-font-garde.git"
+  },
+  "author": "Filament Group c/o Zach Leatherman",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/filamentgroup/a-font-garde/issues"
+  },
+  "homepage": "https://github.com/filamentgroup/a-font-garde",
+  "devDependencies": {
+    "grunt": "~0.4.2",
+    "grunt-contrib-jshint": "~0.6.0",
+    "grunt-contrib-watch": "~0.4.0",
+    "matchdep": "~0.1.2",
+    "grunt-bytesize": "~0.1.1"
+  }
+}