edge_framework 0.0.2

data/assets/js/edge.js

@@ -0,0 +1,233 @@
+/*
+	EDGE LIBRARY
+	Based on Foundation 4 by ZURB
+*/
+var Edge = {};
+var Foundation = {};
+
+(function () {
+	// Browser Compatibility
+	if (!Array.prototype.filter) {
+		Array.prototype.filter = function(fun /*, thisp */) {
+			"use strict";
+		
+			if (this == null) {
+				throw new TypeError();
+			}
+		
+			var t = Object(this),
+				len = t.length >>> 0;
+			if (typeof fun != "function") {
+				try {
+					throw new TypeError();
+				} catch (e) {
+					return;
+				}
+			}
+		
+			var res = [],
+			    thisp = arguments[1];
+			for (var i = 0; i < len; i++) {
+				if (i in t) {
+					var val = t[i]; // in case `fun` mutates this
+					if (fun && fun.call(thisp, val, i, t)) {
+						res.push(val);
+					}
+				}
+			}
+		
+			return res;
+		};
+
+		if (!Function.prototype.bind) {
+			Function.prototype.bind = function (oThis) {
+				if (typeof this !== "function") {
+					// closest thing possible to the ECMAScript 5 internal IsCallable function
+					throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
+				}
+			
+				var aArgs = Array.prototype.slice.call(arguments, 1), 
+					fToBind = this,
+					fNOP = function () {},
+					fBound = function () {
+						return fToBind.apply(this instanceof fNOP && oThis
+						   ? this
+						   : oThis,
+						aArgs.concat(Array.prototype.slice.call(arguments)));
+					};
+			
+				fNOP.prototype = this.prototype;
+				fBound.prototype = new fNOP();
+			
+				return fBound;
+			};
+		}
+	}
+}() );
+
+;(function (window, document, undefined) {
+	'use strict';
+
+	Edge = {
+		name    : 'Edge',
+		version : '1.0',
+		libs    : {},
+
+		init: function( scope, libraries, method, options, response, /* internal */ nc ) {
+			var library_arr,
+				args      = [scope, method, options, response],
+				responses = [],
+				nc        = nc || false;
+
+			// Disable library error catching,
+			// used for development only
+			if (nc) this.nc = nc;
+
+			// Set edge global scope
+			this.scope = scope || this.scope;
+
+			// If calling specific library
+			if (libraries && typeof libraries === 'string') {
+				// If calling `off`
+				if (/off/i.test(libraries) ) {
+					return this.off();
+				}
+
+				library_arr = libraries.split(' ');
+
+				// If more than 0
+				if (library_arr.length) {
+					for (var i = 0, len = library_arr.length; i < len; i++) {
+						responses.push(this.init_lib(library_arr[i], args) );
+					}
+				}
+			} else {
+				for (var lib in this.libs) {
+					responses.push(this.init_lib(lib, args) );
+				}
+			}
+			// If first argument is callback, add to args
+			if (typeof libraries === 'function') {
+				args.unshift(libraries);
+			}
+
+			return this.response_obj(responses, args);
+		},
+		
+		response_obj: function( response_arr, args ) {
+			for (var callback in args) {
+				if (typeof args[callback] === 'function') {
+					return args[callback]({
+						errors: response_arr.filter(function (s) {
+							if (typeof s === 'string') return s;
+						})
+					});
+				}
+			}
+			console.log(response_arr);
+			return response_arr;
+		},
+
+		init_lib: function( lib, args ) {
+			return this.trap(function() {
+				if (this.libs.hasOwnProperty(lib) ) {
+					this.patch(this.libs[lib] );
+					return this.libs[lib].init.apply(this.libs[lib], args);
+				}
+			}.bind(this), lib);
+		},
+
+		// Error Checking
+		trap: function( fun, lib ) {
+			if (!this.nc) {
+				try {
+					return fun();
+				} catch (e) {
+					return this.error({
+						name    : lib,
+						message : 'could not be initialized',
+						more    : e.name + ' ' + e.message,
+					});
+				}
+			}
+			return fun();
+		},
+
+		patch: function( lib ) {
+			lib.outerHeight = function (el, bool) {
+				if (typeof bool !== 'undefined') {
+					return el.outerHeight(bool);
+				}
+				return el.outerHeight();
+			};
+
+			lib.outerWidth = function (el) {
+				if (typeof bool !== 'undefined') {
+					return el.outerWidth(bool);
+				}
+				return el.outerWidth();
+			};
+		},
+
+		inherit: function( scope, methods ) {
+			console.log('inherit');
+			var methods_arr = methods.split(' ');
+
+			for (var i = methods_arr.length - 1; i >= 0; i--) {
+				if (this.lib_methods.hasOwnProperty(methods_arr[i]) ) {
+					this.libs[scope.name][methods_arr[i] ] = this.lib_methods[methods_arr[i] ];
+				}
+			}
+		},
+
+		// Inherited methods in library
+		lib_methods: {
+			delay: function ( fun, delay ) {
+				return setTimeout(fun, delay);
+			},
+			scrollTo: function ( el, to, duration ) {
+				if (duration < 0) return;
+				var difference = to - $(window).scrollTop();
+				var perTick    = difference / duration * 10;
+
+				this.scrollToTimerCache = setTimeout(function() {
+					if (!isNaN(parseInt(perTick, 10) ) ) {
+						window.scrollTo(0, $(window).scrollTop() + perTick);
+						this.scrollTo(el, to, duration - 10);
+					}
+				}.bind(this), 10);
+			},
+
+			// Test for empty object or array
+			empty : function (obj) {
+				if (obj.length && obj.length > 0)   { return false; }
+				if (obj.length && obj.length === 0) { return true; }
+				for (var key in obj) {
+					if (hasOwnProperty.call(obj, key) ) { return false; }
+				}
+				return true;
+			},
+		},
+
+		error: function( error ) {
+			return error.name + ' ' + error.message + '; ' + error.more;
+		},
+
+		off: function() {
+			$(this.scope).off('.edge');
+			$(window).off('.edge');
+			return true;
+		},
+	};
+
+	Foundation = Edge;
+
+	// JQuery prototype, allow `$().edge()` call
+	$.fn.edge = function () {
+		var args = Array.prototype.slice.call(arguments, 0);
+		return this.each(function () {
+			Edge.init.apply(Edge, [this].concat(args) );
+			return this;
+		});
+	};
+}(this, this.document) );

data/assets/js/edge.min.js

@@ -0,0 +1 @@
+var Edge={};!function(){"use strict";Edge={name:"Edge",version:"1.0",init:function(){},notify:function(i){var n=["<div class='notification'>","<header>",i,"</header>","<span class='close-notification'>&times;</span>","</div>"].join("\n");$("body").append(n)}}}(this,this.document);var h=Edge;

data/assets/sass/edge/_base.scss

@@ -0,0 +1,295 @@
+// This module must be imported first before other EDGE module
+
+@import "compass";
+
+// ----------
+// COLOR
+// ----------
+$main-color    : #0099CC !default;
+$sub-color     : #AAA !default;
+$alert-color   : #CC0000 !default;
+$success-color : #3D9900 !default;
+
+// ---------------
+// BODY
+// ---------------
+$body-bg          : #fff !default;
+$body-font-color  : #222 !default;
+$body-font-weight : normal !default;
+$body-font-style  : normal !default;
+
+$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
+$body-font-family   : "Helvetica", Helvetica, Arial, sans-serif !default;
+
+// The default font-size is set to 100% of the browser style sheet (usually 16px)
+// for compatibility with brower-based text zoom or user-set defaults.
+$base-font-size   : 100% !default;
+
+// ---------------
+// GLOBAL VALUE
+// ---------------
+$g-radius : 5px !default;
+$g-round  : 1000px !default;
+
+$content-width : 1140px !default; // For grid
+
+// ------------------------
+// PIXEL --> EM CONVERTER
+// ------------------------
+$em-base  : 16px !default;
+
+// It strips the unit of measure and returns it
+@function stripUnit($num) {
+	@return $num / ($num * 0 + 1);
+}
+
+// Convert the number to EM
+@function convertToEm($value, $context: $em-base) {
+	// If not number, return it as is
+	@if type-of($value) != number { @return $value; }
+	
+	$value: stripUnit($value) / stripUnit($em-base) * 1em;
+	// Turn 0em into 0
+	@if ($value == 0em) {
+		$value: 0;
+	}
+	@return $value;
+}
+
+// Based on: mrdanadams.com/2012/pixel-ems-css-conversion-sass-mixin/
+// EXAMPLE
+//   width   : em(500px);
+//   padding : em(20px 30px 15px 10px);
+//   @include box-shadow(em(inset 2px 0 5px rgba(black, 0.3) ) );
+@function em($values, $context: $em-base) {
+	// If the value only contain single number, return it quickly without the overhead further below
+	@if type-of($values) == number {
+		@return convertToEm($values, $context);
+	}
+
+	$emValues   : (); // This will eventually store the converted $values in a list
+	@each $val in $values {
+		$emValues: append($emValues, convertToEm($val, $context) );
+	}
+	@return join((), $emValues, space );
+}
+
+// -------------------
+// MEDIA QUERIES
+// -------------------
+$phone-screen  : em(480px) !default;
+$small-screen  : em(767px) !default;
+$medium-screen : em(1140px) !default;
+$large-screen  : em(1440px) !default;
+$retina-screen : 192dpi !default;
+// 480px and down
+@mixin phone() {
+	@media only screen and (max-width: $phone-screen) { @content; }
+}
+// 767px and down
+@mixin small() {
+	@media only screen and (max-width: $small-screen) { @content; }
+}
+// 768px and up. If you're planning to support IE8, NEVER use medium-up
+@mixin medium-up() {
+	@media only screen and (min-width: $small-screen) { @content; }
+}
+// 1140px and down
+@mixin medium() {
+	@media only screen and (max-width: $medium-screen) { @content; }
+}
+// large() is not needed, just put it outside media query
+
+// 2x pixel ratio
+@mixin retina() {
+	@media only screen and (-webkit-min-device-pixel-ratio: 2),
+	(min-resolution: $retina-screen) {
+		@content;
+	}
+}
+// Landscape orientation __
+@mixin landscape {
+	@media only screen and (orientation: landscape) { @content; }
+}
+// Portrait orientation |
+@mixin portrait {
+	@media only screen and (orientation: portrait) { @content; }
+}
+
+// ---------------------------------------------------
+// SHINY EFFECT
+// Give emboss feel to an element
+//
+// Use this in conjunction with Compass' box-shadow()
+//     @include box-shadow(shiny(right), ...)
+// ---------------------------------------------------
+@function shiny($applyTo: top, $activeState: false) {
+	@if $applyTo == top {
+		$size : 0 1px; }
+	@else if $applyTo == right {
+		$size : 1px 0; }
+	@else if $applyTo == left {
+		$size : -1px 0; }
+	@else if $applyTo == bottom {
+		$size : 0 -1px; }
+	
+	// Initialize the shiny shadow
+	@if $activeState {
+		$shiny : inset $size 0 rgba(black, 0.2);
+	} @else {
+		$shiny : inset $size 0 rgba(white, 0.5);
+	}
+	@return $shiny;
+}
+
+// ----------------------------------------------
+// CLEARING FLOAT
+// Make a container wraps floated element
+//
+// If you prefer readable output, use the mixin
+// If you prefer smaller output, use placeholder
+// ----------------------------------------------
+%clearfix {
+	zoom: 1;
+	&:before, &:after {
+		content : " ";
+		display : table;
+	}
+	&:after {
+		clear   : both;
+	}
+}
+@mixin clearfix {
+	zoom: 1;
+	&:before, &:after {
+		content : " ";
+		display : table;
+	}
+	&:after {
+		clear   : both;
+	}
+}
+
+
+// --------------------------------
+// SELECTION
+// Change the text highlight color
+// --------------------------------
+@mixin selection($color: lighten($main-color, 35%) ) {
+	::-moz-selection {
+		background  : $scolor;
+		text-shadow : none;
+	}
+	::selection {
+		background  : $color;
+		text-shadow : none;
+	}
+}
+
+// ------------------------------------------------------
+// DISABLE SELECTION
+// Prevents user to select/highlight the element's text
+// ------------------------------------------------------
+%disable-user-select {
+	-webkit-touch-callout : none;
+	-webkit-user-select   : none;
+	-khtml-user-select    : none;
+	-moz-user-select      : none;
+	-ms-user-select       : none;
+	user-select           : none;
+}
+
+// ---------------------
+// TEXT DIRECTION
+// ---------------------
+$text-direction   : ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
+$default-float    : left !default;
+$default-opposite : right !default;
+// No need to change this conditional statement, $text-direction variable controls it all.
+@if $text-direction == ltr {
+	$default-float    : left;
+	$default-opposite : right;
+} @else {
+	$default-float    : right;
+	$default-opposite : left;
+}
+
+// ----------------------------------------------------------
+// TRIANGLE
+// Create a triangle
+//
+// Don't specify the `height` to create equalateral triangle
+// ----------------------------------------------------------
+@mixin triangle($direction, $color, $width, $height: false) {
+	// If height is not specified, make the triangle equalateral
+	@if not $height {
+		// If normal triangle, `height` is set to half `width`
+		@if $direction == top or
+			$direction == right or
+			$direction == left or
+			$direction == bottom {
+			$height : $width/2;
+		}
+		// Else if corner triangle, `heigth` is the same as `width`
+		@else if $direction == top-right or
+				 $direction == top-left or
+				 $direction == bottom-right or
+				 $direction == bottom-left {
+			$height : $width;
+		}
+	}
+	width        : 0;
+	height       : 0;
+	font-size    : 0;
+	line-height  : 0%;
+	border-style : solid;
+	border-color : transparent;
+	// Top /\
+	@if $direction == top {
+		border-width        : 0 $width/2 $height $width/2;
+		border-bottom-color : $color;
+	}
+	// Right |>
+	@else if $direction == right {
+		border-width      : $width/2 0 $width/2 $height;
+		border-left-color : $color;
+	}
+	// Bottom \/
+	@else if $direction == bottom {
+		border-width     : $height $width/2 0 $width/2;
+		border-top-color : $color;
+	}
+	// Left <|
+	@else if $direction == left {
+		border-width       : $width/2 $height $width/2 0;
+		border-right-color : $color;
+	}
+
+	//            __
+	// Top-right  \ | 
+	//             \|
+	@else if $direction == top-right {
+		border-width       : 0 $width $height 0;
+		border-right-color : $color;
+	}
+	
+	// Bottom-right /|
+	//             /_|
+	@else if $direction == bottom-right {
+		border-width        : 0 0 $height $width;
+		border-bottom-color : $color;
+	}
+	// Bottom-left |\
+	//             |_\
+	@else if $direction == bottom-left {
+		border-width      : $height 0 0 $width;
+		border-left-color : $color;
+	}
+	//           __
+	// Top-left | /
+	//          |/
+	@else if $direction == top-left {
+		border-width     : $height $width 0 0;
+		border-top-color : $color;
+	}
+}

data/assets/sass/edge/_components.scss

@@ -0,0 +1,9 @@
+@import "components/normalize";
+@import "components/main";
+@import "components/grid";
+@import "components/block_grid";
+@import "components/print";
+@import "components/form";
+@import "components/visibility";
+// @import "components/typography";
+// @import "components/form";

data/assets/sass/edge/_helpers.scss

@@ -0,0 +1,2 @@
+@import "helpers/sprites";
+@import "helpers/sticky-footer";

data/assets/sass/edge/components/_block_grid.scss

@@ -0,0 +1,99 @@
+/* ---------------
+EDGE Block Grid
+--------------- */
+// Based on Zurb's Foundation
+
+$block-grid-max-width : em($content-width) !default;
+$block-grid-total     : 12 !default;
+$block-grid-margin    : em(25px) !default;
+
+// Calculate percentages for block-grid
+@function blockGridCalc($blockNum, $totalBlock:$block-grid-total, $collapse:false) {
+	$baseSize : 100% / $blockNum;
+
+	// Reduce size due to margin between grid.
+	$fillSize : 0 !default;
+	@if $collapse == false { // -2% / 4
+		$fillSize : ( gridMarginCalc() * ( $blockNum - 1 ) / $blockNum );
+	}
+	
+	@return $baseSize - $fillSize;
+}
+
+// Calculate percentages for Margin between block-grid
+@function blockGridMarginCalc($blockMargin: $block-grid-margin, $maxWidth: $block-grid-max-width) {
+	@return percentage( $blockMargin / $maxWidth );
+}
+
+@mixin block-grid($block-num : false,
+				$spacing     : $block-grid-margin,
+				$base-style  : true,
+				$collapse    : false) {
+
+	@if $base-style {
+		display : block;
+		padding : 0;
+		@include clearfix;
+
+		&> li {
+			display : block;
+			height  : auto;
+			float   : $default-float;
+			@if $collapse == false {
+				margin-#{$default-opposite} : blockGridMarginCalc($spacing);
+			} @else {
+				margin-#{$default-opposite} : 0;
+			}
+		}
+	}
+
+	@if $block-num {
+		&>li {
+			width   : blockGridCalc($block-num, $collapse: $collapse);
+			@if $collapse == false {
+				&:nth-of-type(#{$block-num}n) {
+					margin-#{$default-opposite} : 0;
+				}
+			}
+			
+			// &:nth-of-type(#{$block-num}n+1) {
+			// 	clear: both;
+			// }
+		}
+	}
+}
+
+[class*="block-grid-"] { @include block-grid; }
+
+// Large block grid
+@for $i from 2 through $block-grid-total {
+	.large-block-grid-#{($i)} {
+		@include block-grid($i, $base-style: false);
+
+		&.collapse {
+			@include block-grid($i, $base-style: false, $collapse: true);
+		}
+	}
+}
+
+@include small {
+	[class*="small-block-grid-"] > li { clear: none !important; }
+
+	// Reset large-block-grid nth-child margin
+	[class*="large-block-grid-"] > li:nth-child(n+1) {
+		margin-#{$default-opposite} : blockGridMarginCalc($block-grid-margin);
+	}
+	
+	// Small block grid
+	@for $i from 2 through $block-grid-total {
+		.small-block-grid-#{($i)} {
+			@include block-grid($i, $base-style: false);
+			&.collapse {
+				@include block-grid($i, $base-style: false, $collapse: true);
+			}
+		}
+	}
+}
+
+// Base style for collapsed block-grid, written below to override other style
+[class*="block-grid-"].collapse { @include block-grid($collapse: true); }

data/assets/sass/edge/components/_form.scss

@@ -0,0 +1,15 @@
+
+
+// Remove the delete (x) mark from IE
+input::-ms-clear {
+	display: none;
+}
+
+// Disable Chrome's datepicker
+input::-webkit-calendar-picker-indicator{
+	display: none;
+}
+
+input[type="date"]::-webkit-input-placeholder{ 
+	visibility: hidden !important;
+}