gistfile1.txt

/**
 * Bayco
 * http://www.bayco.com/
 *
 * Copyright (c) 2014 Fifty Fifty
 * Licensed under the GPLv2+ license.
 */

(function($) {
	var bayco = window.bayco || {};


	bayco.responsive = {
		init: function() {
			this.cacheObjects();
			bayco.$.window.on( 'resize', $.proxy( this.resizeAll, this ) );
			bayco.$.document.on( 'ready', $.proxy( this.resizeAll, this ) );
		},

		/**
		 * Cache reused jQuery element selectors
		 */
		cacheObjects: function() {
			bayco.$ = {};
			bayco.$.window = $(window);
			bayco.$.document = $(document);
		},

		buildCSSManifest: function() {
			this.manifest = 
			[
				{
					selector: '.something',
					rules: [
						{
							property: 'height',
							percentOfViewport: 13
						},
						{
							property: 'font-size',
							percentOfViewport: 8
						}
					]
				},
				{
					selector: '.something-else',
					rules: [
						{
							property: 'height',
							percentOfViewport: 25
						},
						{
							property: 'font-size',
							percentOfViewport: 8
						}
					]
				}
			];
		},

		resizeAll: function() {
			var self = this;
			$('[data-flex-css]').each( function( index, el ) {
				var $el = $(el);
				$.each( $el.data('flex-css'), function( property, percent ) {
					self.setElementResponsiveCSSProperty( $el, property, percent );
					$el.trigger( 'resized' );
				});
			});
		},

		/**
		 * Set the element's property to a percentage of the viewport height.
		 *
		 * @param jQuery Obj $el      Element
		 * @param string property CSS property to set
		 * @param float  percent  Percentage of viewport height
		 */
		setElementResponsiveCSSProperty: function( $el, property, percent ) {
			newRules = {};
			var viewportH = verge.viewportH();
			var value = percent * viewportH / 100;
			newRules[property] = value;
			$el.css( newRules );
		}
	};

	$(document).ready( $.proxy( bayco.responsive.init, bayco.responsive ) );

})(jQuery);