survivalkit 0.3.4 → 1.0.beta.1

data/templates/project/sources/scrollorama/js/jquery.scrollorama.js

@@ -1,299 +0,0 @@
-/*
-	scrollorama - The jQuery plugin for doing cool scrolly stuff
-	by John Polacek (@johnpolacek)
-	
-	Dual licensed under MIT and GPL.
-*/
-
-(function($) {
-    $.scrollorama = function(options) {
-		
-		// PRIVATE VARS
-		var blocks = [],
-			browserPrefix = '',
-			onBlockChange = function() {};
-		
-		var scrollorama = this;
-		
-		var defaults = {offset:0};
-		
-		scrollorama.settings = $.extend({}, defaults, options);
-		scrollorama.blockIndex = 0;
-		
-		if (options.blocks === undefined) alert('ERROR: Must assign blocks class selector to scrollorama plugin');
-		
-		// PRIVATE FUNCTIONS
-		function init() {
-			if (typeof scrollorama.settings.blocks === 'string')  scrollorama.settings.blocks = $(scrollorama.settings.blocks);
-			
-			// set browser prefix
-			if ($.browser.mozilla)	browserPrefix = '-moz-';
-			if ($.browser.webkit)	browserPrefix = '-webkit-';
-			if ($.browser.opera)	browserPrefix = '-o-';
-			if ($.browser.msie)		browserPrefix = '-ms-';
-			
-			// create blocks array to contain animation props
-			$('body').css('position','relative');
-			
-			var i;
-			for (i=0; i<scrollorama.settings.blocks.length; i++) {
-				var block = scrollorama.settings.blocks.eq(i);
-				blocks.push({
-					block: block,
-					top: block.offset().top - parseInt(block.css('margin-top'), 10),
-					pin: 0,
-					animations:[]
-				});
-			}
-			
-			// convert block elements to absolute position
-			for (i=0; i<blocks.length; i++) {
-				blocks[i].block
-					.css('position', 'absolute')
-					.css('top', blocks[i].top);
-			}
-			
-			$("body").prepend("<div id='scroll-wrap'></div>");
-			
-			var didScroll = false;
-			$(window).scroll(function(){
-				didScroll = true; 
-			});
-			setInterval(function(){ 
-				if(didScroll){
-					onScrollorama();
-					didScroll = false;
-				}				
-			}, 50);
-		}
-		
-		function onScrollorama() {
-			var scrollTop = $(window).scrollTop();
-			var currBlockIndex = getCurrBlockIndex(scrollTop);
-			
-			// update all animations
-			for (var i=0; i<blocks.length; i++) {
-				
-				// go through the animations for each block
-				if (blocks[i].animations.length) {
-					for (var j=0; j<blocks[i].animations.length; j++) {
-						var anim = blocks[i].animations[j];
-						
-						// if above current block, settings should be at start value
-						if (i > currBlockIndex) {
-							if (currBlockIndex != i-1 && anim.baseline != 'bottom') {
-								setProperty(anim.element, anim.property, anim.startVal);
-							}
-							if (blocks[i].pin) {
-								blocks[i].block
-									.css('position', 'absolute')
-									.css('top', blocks[i].top);
-							}
-						}
-						
-						// if below current block, settings should be at end value
-						// unless on an element that gets animated when it hits the bottom of the viewport
-						else if (i < currBlockIndex) {
-							setProperty(anim.element, anim.property, anim.endVal);
-							if (blocks[i].pin) {
-								blocks[i].block
-									.css('position', 'absolute')
-									.css('top', (blocks[i].top + blocks[i].pin));
-							}
-						}
-						
-						// otherwise, set values per scroll position
-						if (i == currBlockIndex || (currBlockIndex == i-1 && anim.baseline == 'bottom')) {
-							// if block gets pinned, set position fixed
-							if (blocks[i].pin && currBlockIndex == i) {
-								blocks[i].block
-									.css('position', 'fixed')
-									.css('top', 0);
-							}
-							
-							// set start and end animation positions
-							var startAnimPos = blocks[i].top + anim.delay;
-							if (anim.baseline == 'bottom')  startAnimPos -= $(window).height();
-							var endAnimPos = startAnimPos + anim.duration;							
-							
-							// if scroll is before start of animation, set to start value
-							if (scrollTop < startAnimPos)  setProperty(anim.element, anim.property, anim.startVal);
-							
-							// if scroll is after end of animation, set to end value
-							else if (scrollTop > endAnimPos) {
-								setProperty(anim.element, anim.property, anim.endVal);
-								if (blocks[i].pin) {
-									blocks[i].block
-											.css('position', 'absolute')
-											.css('top', (blocks[i].top + blocks[i].pin));
-								}
-							}
-							
-							// otherwise, set value based on scroll
-							else {
-								// calculate percent to animate
-								var animPercent = (scrollTop - startAnimPos) / anim.duration;
-								// then multiply the percent by the value range and calculate the new value
-								var animVal = anim.startVal + (animPercent * (anim.endVal - anim.startVal));
-								setProperty(anim.element, anim.property, animVal);
-							}
-						}
-					}
-				}
-			}
-			
-			// update blockIndex and trigger event if changed
-			if (scrollorama.blockIndex != currBlockIndex) {
-				scrollorama.blockIndex = currBlockIndex;
-				onBlockChange();
-			}
-		}
-		
-		function getCurrBlockIndex(scrollTop) {
-			var currBlockIndex = 0;
-			for (var i=0; i<blocks.length; i++) {
-				// check if block is in view
-				if (blocks[i].top <= scrollTop - scrollorama.settings.offset)  currBlockIndex = i;
-			}
-			return currBlockIndex;
-		}
-		
-		function setProperty(target, prop, val) {
-			if (prop === 'rotate' || prop === 'zoom' || prop === 'scale') {
-				if (prop === 'rotate') {
-					target.css(browserPrefix+'transform', 'rotate('+val+'deg)');
-				} else if (prop === 'zoom' || prop === 'scale') {
-					var scaleCSS = 'scale('+val+')';
-					if (browserPrefix !== '-ms-') {
-						target.css(browserPrefix+'transform', scaleCSS);
-					} else {
-						target.css('zoom', scaleCSS);
-					}
-				}
-			} else {
-				target.css(prop, val);
-			}	
-		}
-		
-		// PUBLIC FUNCTIONS
-		scrollorama.animate = function(target) {
-			/*
-				target		= animation target
-				arguments	= array of animation parameters
-				
-				animation parameters:
-				delay		= amount of scrolling (in pixels) before animation starts
-				duration	= amount of scrolling (in pixels) over which the animation occurs
-				property	= css property being animated
-				start		= start value of the property
-				end			= end value of the property
-				pin			= pin block during animation duration (applies to all animations within block)
-				baseline	= top (default, when block reaches top of viewport) or bottom (when block first comies into view)
-			*/
-			
-			// if string, convert to DOM object
-			if (typeof target === 'string')  target = $(target);
-			
-			// find block of target
-			var targetIndex;
-			var targetBlock;
-			for (var i=0; i<blocks.length; i++) {
-				if (blocks[i].block.has(target).length) {
-					targetBlock = blocks[i];
-					targetIndex = i;
-				}
-			}
-			
-			// add each animation to the blocks animations array
-			for (i=1; i<arguments.length; i++) {
-				
-				var anim = arguments[i];
-				
-				// for top/left/right/bottom, set relative positioning if static
-				if (anim.property == 'top' || anim.property == 'left' || anim.property == 'bottom' || anim.property == 'right' ) {
-					
-					if (target.css('position') == 'static')	target.css('position','relative');
-					
-					// set anim.start, anim.end defaults
-					if (anim.start === undefined)			anim.start = 0;
-					else if (anim.end === undefined)		anim.end = 0;
-				}
-				
-				// set anim.start/anim.end defaults for rotate, zoom/scale, letter-spacing
-				if (anim.property == 'rotate') {
-					if (anim.start === undefined)	anim.start = 0;
-					if (anim.end === undefined)		anim.end = 0;
-				} else if (anim.property == 'zoom' || anim.property == 'scale' ) {
-					if (anim.start === undefined)	anim.start = 1;
-					if (anim.end === undefined)		anim.end = 1;
-				} else if (anim.property == 'letter-spacing' && target.css(anim.property)) {
-					if (anim.start === undefined)	anim.start = 1;
-					if (anim.end === undefined)		anim.end = 1;
-				}
-				
-				if (anim.baseline === undefined) {
-					if (anim.pin || targetBlock.pin || targetIndex === 0)	anim.baseline = 'top';
-					else													anim.baseline = 'bottom';
-				}
-				
-				if (anim.delay === undefined)  anim.delay = 0;
-				
-				targetBlock.animations.push({
-					element: target,
-					delay: anim.delay,
-					duration: anim.duration,
-					property: anim.property,
-					startVal: anim.start !== undefined ? anim.start : parseInt(target.css(anim.property),10),	// if undefined, use current css value
-					endVal: anim.end !== undefined ? anim.end : parseInt(target.css(anim.property),10),			// if undefined, use current css value
-					baseline: anim.baseline !== undefined ? anim.baseline : 'bottom'
-				});
-				
-				if (anim.pin) {
-					if (targetBlock.pin < anim.duration + anim.delay) {
-						var offset = anim.duration + anim.delay - targetBlock.pin;
-						targetBlock.pin += offset;
-						
-						// adjust positions of blocks below target block
-						for (var j=targetIndex+1; j<blocks.length; j++) {
-							blocks[j].top += offset;
-							blocks[j].block.css('top', blocks[j].top);
-						}
-					}
-				}
-			}
-			
-			onScrollorama();
-		};
-		
-		// function for passing blockChange event callback
-		scrollorama.onBlockChange = function(f) {
-			onBlockChange = f;
-		};
-		
-		// function for getting an array of scrollpoints
-		// (top of each animation block and animation element scroll start point)
-		scrollorama.getScrollpoints = function() {
-			var scrollpoints = [];
-			for (var i=0; i<blocks.length; i++) {
-				scrollpoints.push(blocks[i].top);
-				// go through the animations for each block
-				if (blocks[i].animations.length && blocks[i].pin > 0) {
-					for (var j=0; j<blocks[i].animations.length; j++) {
-						var anim = blocks[i].animations[j];
-						scrollpoints.push(blocks[i].top + anim.delay + anim.duration);
-					}
-				}
-			}
-			// make sure scrollpoints are in numeric order
-			scrollpoints.sort(function(a,b){return a - b;});
-			return scrollpoints;
-		};
-		
-		
-		// INIT
-		init();
-		
-		return scrollorama;
-    };
-     
-})(jQuery);

data/templates/project/style.sass

@@ -1,127 +0,0 @@
-/* The Coding Designer's Survival Kit
-  A framework for designing websites in the browser.
-
-  Much love to:
-  Sass, Compass, HTML5 Boilerplate, Modernizr, Formalize, and more
-
-  Available at http://thecodingdesigner.com
-  twitter: http://twitter.com/canarymason
-
-
-/* -------------------------------------------------------------------------------------
-  --------------------------------------------------------------------------------------
-/* This CSS was authored using Sass & Compass
-  Download the source files here:
-  https://github.com/canarymason/The-Coding-Designers-Survival-Kit
-  Learn more about Sass & Compass at http://compass-style.org/
-
-
-@charset "UTF-8"
-
-// FOLLOW THE STEP-BY-STEP IN THE CORRESPONDING PARTIAL TO YOUR CHOSEN FLAVOR
-  ---------------------------------------------------------------------------------------
-  ---------------------------------------------------------------------------------------
-  ---------------------------------------------------------------------------------------
-  ---------------------------------------------------------------------------------------
-  ---------------------------------------------------------------------------------------
-// INTRODUCTION
-  This is the central organizing sass file where we manage all the imported partials
-  in The Kit. Don't write custom code here. Instead, import files that bring in
-  default code from The Kit and files that add your custom code. The checklist below
-  should help you put these files in order.
-  ---------------------------------------------------------------------------------------
-
-// TODO: refactor items in /lib/ into a compass extension
-
-// THE FIRST IMPORTS ADD NO CSS UPON COMPILE
-
-
-// ✔ IMPORT COMMON FUNCTIONS AND VARIABLES
-// enable / disable, but do not edit these files
-@import survivalkit/functions/all
-@import survivalkit/variables/all
-
-
-// ✔ 1. ADD YOUR OWN VARIABLES
-// base, color, fonts, grids
-// edit these as you see fit
-@import partials/01-variables/all
-
-
-// ✔ IMPORT COMPASS AND OTHER GEMS
-// enable / disable, but do not edit these files
-@import compass
-@import susy
-@import breakpoint
-// add any others here
-
-
-// ✔ IMPORT COMMON MIXINS
-// enable / disable, but do not edit these files
-@import survivalkit/mixins/all
-
-// ✔ 2. ADD YOUR OWN MIXINS
-// @import partials/00-mixins/all
-
-// THE FOLLOWING IMPORTS WILL ADD CSS UPON COMPILE
-
-// ✔ ADD A CSS RESET OR NORMALIZATION
-@import partials/02-reset/reset
-
-
-// ✔ IMPORT COMMON HELPER EXTENDABLES
-// @import survivalkit/extend/all
-@import survivalkit/extend/helpers
-// @import survivalkit/extend/sticky-footer
-
-// ✔ 2. ADD YOUR OWN EXTENDABLES
-// typography
-@import partials/03-extend/all
-
-
-// ✔ 3. EDIT AND ADD YOUR DEFAULT STYLES
-// This is worth going into in detail
-// edit as you see fit for your project
-@import partials/04-defaults/all
-
-
-// ✔ 4. CHOOSE A GRID SYSTEM
-// Susy: Install the Susy Gem (https://rubygems.org/gems/compass-susy-plugin)
-//   and uncomment the Susy line in /config.rb (# require 'susy')
-// @import partials/05-grids/grids-susy.sass
-
-
-// ✔ 5. STYLE COMMON UI PATTERNS / DRUPAL UI PATTERNS
-// @import partials/06-ui-patterns/common
-// @import partials/06-ui-patterns/drupal-patterns
-
-
-// ✔ 6. PROCESS SPRITES WITH COMPASS
-// @import partials/07-sprites/sprites
-
-
-
-// --------------------------------------------------------------------------------------
-// ✔ 7. YOUR CUSTOM LAYOUT AND DESIGN SASS
-// THIS IS WHERE MOST CUSTOM WORK WILL GO
-// -- PRIMARY DESIGN --
-@import partials/08-your-design-here/design
-// ------ OR ------
-// -- STYLE TILE DESIGN --
-// enable these partials for styletile layout and design
-// work with styletile.html
-// see: http://badassideas.com/style-tiles-as-a-web-design-process-tool/
-// (requires susy)
-@import survivalkit/style-tile/all
-@import partials/09-styletile/tile-design
-// --------------------------------------------------------------------------------------
-
-
-// ✔ 9. ENABLE PRINT STYLES
-// @import partials/10-media/print
-
-
-// ✔ 10 ADJUST FOR LESSER/GREATER SYSTEMS
-// @import partials/11-browser_adjustments/modernizr
-// IE STYLES - aren't needed by other browsers, so compile them as a separate file and load via conditionals
-// SELECTIVIZR is nice, but the fallback css should really be compiled to a separate file