From 9bf6618fefc7fb9963e92dbabea8d9680fdfa0bf Mon Sep 17 00:00:00 2001 From: Christian Dannie Storgaard Date: Sat, 24 Aug 2013 18:35:12 +0300 Subject: [PATCH 1/4] Added support for running without a jQuery compatible library, i.e. only native ECMAScript. --- README.md | 21 +++++++ flowtype.js | 158 +++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 135 insertions(+), 44 deletions(-) diff --git a/README.md b/README.md index 3cc61d6..1d73400 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,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 +112,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. \ No newline at end of file diff --git a/flowtype.js b/flowtype.js index 8991379..e6ce1e3 100644 --- a/flowtype.js +++ b/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,115 @@ * 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)); \ No newline at end of file +(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) { + + // 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)); + +// Demo setup +// ========== + +// jQuery/Zepto setup +if ( window.$ && window.$.fn.flowtype ) { + $('#demo-article').flowtype( {fontRatio:36} ); + $('#demo-control').change(function(event) { + $('#demo-article').css('width', event.target.value+'%'); + $('#demo-article')[0].updateFlowType(); +}); +// Native setup +} else { + window.flowtype( document.getElementById('demo-article'), {fontRatio:36} ); + document.getElementById('demo-control').addEventListener('change', function(event) { + document.getElementById('demo-article').style.width = event.target.value+'%'; + document.getElementById('demo-article').updateFlowType(); + }, false); +} + From 7035a8d1baac86ee0f6395d155affae216a994df Mon Sep 17 00:00:00 2001 From: Christian Dannie Storgaard Date: Sat, 24 Aug 2013 18:36:23 +0300 Subject: [PATCH 2/4] Support running without options. --- flowtype.js | 1 + 1 file changed, 1 insertion(+) diff --git a/flowtype.js b/flowtype.js index e6ce1e3..8e63ffb 100644 --- a/flowtype.js +++ b/flowtype.js @@ -43,6 +43,7 @@ flowtype = function(element, options) { + options = options || {}; // Establish default settings/variables // ==================================== From 27f370f65cd5ce45fafc7fa0ac372b7ceb8384e6 Mon Sep 17 00:00:00 2001 From: Christian Dannie Storgaard Date: Sat, 24 Aug 2013 18:37:47 +0300 Subject: [PATCH 3/4] Removed demo code. --- flowtype.js | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/flowtype.js b/flowtype.js index 8e63ffb..47377ff 100644 --- a/flowtype.js +++ b/flowtype.js @@ -105,24 +105,4 @@ } -}(window)); - -// Demo setup -// ========== - -// jQuery/Zepto setup -if ( window.$ && window.$.fn.flowtype ) { - $('#demo-article').flowtype( {fontRatio:36} ); - $('#demo-control').change(function(event) { - $('#demo-article').css('width', event.target.value+'%'); - $('#demo-article')[0].updateFlowType(); -}); -// Native setup -} else { - window.flowtype( document.getElementById('demo-article'), {fontRatio:36} ); - document.getElementById('demo-control').addEventListener('change', function(event) { - document.getElementById('demo-article').style.width = event.target.value+'%'; - document.getElementById('demo-article').updateFlowType(); - }, false); -} - +}(window)); \ No newline at end of file From 3d6cb866dbdea53a96811e9b1c62f0f7f030d6df Mon Sep 17 00:00:00 2001 From: Christian Dannie Storgaard Date: Sat, 24 Aug 2013 18:39:26 +0300 Subject: [PATCH 4/4] Added link to jsFiddle. --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 1d73400..c388ae4 100644 --- a/README.md +++ b/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.