Remove dependency on jQuery or Zepto

README.md

@@ -4,6 +4,8 @@ Responsive web typography at its finest: font-size and line-height based on elem
 
 Check out the [demo site](http://simplefocus.com/flowtype).
 
+For a code example of the demo, including how to run without jQuery or Zepto, see [this jsFiddle](http://jsfiddle.net/Cybolic/XEh23/).
+
 ## What does FlowType.JS do? ##
 
 Ideally, the most legible typography contains [between 45 and 75 characters per line](http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/). This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size—and subsequently the line-height—based on a specific element's width. This allows for a perfect character count per line at any screen width.
@@ -91,6 +93,12 @@ To begin the magic, simply call FlowType.JS before the close of your body tag:
 $('body').flowtype();
 ```
 
+If you prefer not to use jQuery or Zepto, you can call FlowType.JS like this:
+
+```javascript
+flowtype(document.body);
+```
+
 ### Step 4: Make Changes ###
 
 You will most likely want to change the default settings. To do so, simply include these options in your code and tweak away:
@@ -106,8 +114,23 @@ $('body').flowtype({
 });
 ```
 
+and again, without jQuery or Zepto:
+
+```javascript
+flowtype(document.body, {
+   minimum   : 500,
+   maximum   : 1200,
+   minFont   : 12,
+   maxFont   : 40,
+   fontRatio : 30,
+   lineRatio : 1.45
+});
+```
+
 ## Brought to you by... ##
 
 This wonderful piece of magic has been brought to you by the team at [Simple Focus](http://simplefocus.com). Follow Simple Focus on Twitter: [@simplefocus](http://twitter.com/simplefocus).
 
+The compatibility for running without jQuery or Zepto brought to you by [Christian Dannie Storgaard (Cybolic)](http://cybolic.me).
+
 FlowType.JS is licensed under the MIT License. See the LICENSE.txt file for copy permission.

flowtype.js

@@ -1,5 +1,6 @@
 /*
-* If you create a derivative, please leave this text intact:
+* FlowType.JS with/without jQuery/Zepto.
+* Adapted by Christian Dannie Storgaard (Cybolic). Based on:
 *
 * FlowType.JS 1.0
 * Copyright (c) 2013, Simple Focus http://simplefocus.com/
@@ -12,46 +13,96 @@
 * Thanks to Giovanni Difeterici (http://www.gdifeterici.com/)
 */
 
-(function($) {
-   $.fn.flowtype = function(options) {
-
-// Establish default settings/variables
-// ====================================
-      var settings = $.extend({
-         maximum   : 9999,
-         minimum   : 1,
-         maxFont   : 9999,
-         minFont   : 1,
-         fontRatio : 35,
-         lineRatio : 1.45
-      }, options),
-
-// Do the magic math
-// =================
-      changes = function(el) {
-         var $el = $(el),
-            elw = $el.width(),
-            width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
-            fontBase = width / settings.fontRatio,
-            fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
-
-         $el.css({
-            'font-size'   : fontSize + 'px',
-            'line-height' : fontSize * settings.lineRatio + 'px'
-         });
-      };
-
-// Make the magic visible
-// ======================
-      return this.each(function() {
-
-      // Context for resize callback
-         var that = this;
-      // Make changes upon resize
-         $(window).resize(function(){changes(that);});
-
-      // Set changes on load
-         changes(this);
-      });
-   };
-}(jQuery));
+(function(global) {
+
+    var addEvent = null,
+        getWidth = null,
+        setFontSize = null,
+        setLineHeight = null,
+        flowtype = null
+    ;
+    if ( global.$ && global.$.css ) {
+        addEvent = function(element, eventName, callback) { $( element ).bind( eventName, callback ); };
+        getWidth = function(element) { return $(element).width(); };
+        setFontSize = function(element, size) { $(element).css('font-size', size); };
+        setLineHeight = function(element, height) { $(element).css('line-height', height); };
+    } else {
+        addEvent = function(element, eventName, callback) {
+            if ( element.addEventListener ) {
+                element.addEventListener( eventName, callback, false );
+            } else if ( element.attachEvent ) {
+                element.attachEvent( 'on'+eventName, callback );
+            } else {
+                element['on'+eventName] = callback;
+            }
+        };
+        getWidth = function(element) { return element.clientWidth; };
+        setFontSize = function(element, size) { element.style.fontSize = size; };
+        setLineHeight = function(element, height) { element.style.lineHeight = height; };
+    }
+
+
+    flowtype = function(element, options) {
+        options = options || {};
+
+        // Establish default settings/variables
+        // ====================================
+        options.maximum   = options.maximum   || 9999;
+        options.minimum   = options.minimum   || 1;
+        options.maxFont   = options.maxFont   || 9999;
+        options.minFont   = options.minFont   || 1;
+        options.fontRatio = options.fontRatio || 35;
+        options.lineRatio = options.lineRatio || 1.45;
+
+        // Do the magic math
+        // =================
+        changes = function(el) {
+            var elw = getWidth(el),
+                width = elw > options.maximum ? options.maximum : elw < options.minimum ? options.minimum : elw,
+                fontBase = width / options.fontRatio,
+                fontSize = fontBase > options.maxFont ? options.maxFont : fontBase < options.minFont ? options.minFont : fontBase
+            ;
+
+            setFontSize(el, fontSize + 'px');
+            setLineHeight(el, fontSize * options.lineRatio + 'px');
+        };
+
+        // Make the magic visible
+        // ======================
+        if ( global.$ && global.$.fn ) {
+            return this.each(function() {
+                // Context for resize callback
+                var that = this;
+
+                // Attach the update method the DOM element
+                element[0].updateFlowType = function(){changes(that);};
+
+                // Make changes upon resize
+                $(window).resize(function(){changes(that);});
+
+                // Set changes on load
+                changes(this);
+            });
+        } else {
+            // Attach the update method the DOM element
+            element.updateFlowType = function(){changes(element);};
+
+            // Make changes upon resize
+            addEvent( global, 'resize', element.updateFlowType );
+
+            // Set changes on load
+            element.updateFlowType();
+        }
+    };
+
+    // Add jQuery/Zepto plugin if either is available
+    if ( global.$ && global.$.fn ) {
+        $.fn.flowtype = function(settings) {
+            flowtype.call(this, this, settings);
+        }
+    } else {
+        global.flowtype = flowtype;
+    }
+
+
+}(window));