survivalkit 1.0.beta.11 → 1.0.beta.12

data/stylesheets/survivalkit/reset/_reset.scss

@@ -4,6 +4,7 @@ $init-headers: true !default;
 @import "survivalkit/reset/meyer-reset";
 @import "survivalkit/reset/normalize";
 @import "survivalkit/reset/formalize";
+@import 'survivalkit/reset/pixel-normalize';
 
 @mixin init($init-type, $init-headers) {
   @if $init-type == meyer {
@@ -23,6 +24,9 @@ $init-headers: true !default;
   @if $formalize {
     @include formalize;
   }
+  @if $pixel-normalize {
+    @include pixel-normalize;
+  }
 }
 
 

data/templates/clean/manifest.rb

@@ -11,8 +11,6 @@ file '../shared/partials/03-extend/_all.scss', :like => :stylesheet, :to => 'par
 file '../shared/partials/03-extend/_typography.scss', :like => :stylesheet, :to => 'partials/03-extend/_typography.scss'
 file '../shared/partials/04-base/_all.scss', :like => :stylesheet, :to => 'partials/04-base/_all.scss'
 file '../shared/partials/04-base/_common.scss', :like => :stylesheet, :to => 'partials/04-base/_common.scss'
-file '../shared/partials/04-base/_edits.scss', :like => :stylesheet, :to => 'partials/04-base/_edits.scss'
-file '../shared/partials/04-base/_font-face.scss', :like => :stylesheet, :to => 'partials/04-base/_font-face.scss'
 file '../shared/partials/04-base/_form-defaults.scss', :like => :stylesheet, :to => 'partials/04-base/_form-defaults.scss'
 file '../shared/partials/04-base/_headers.scss', :like => :stylesheet, :to => 'partials/04-base/_headers.scss'
 file '../shared/partials/04-base/_images.scss', :like => :stylesheet, :to => 'partials/04-base/_images.scss'

data/templates/drupal/manifest.rb

@@ -11,8 +11,6 @@ file '../shared/partials/03-extend/_all.scss', :like => :stylesheet, :to => 'par
 file '../shared/partials/03-extend/_typography.scss', :like => :stylesheet, :to => 'partials/03-extend/_typography.scss'
 file '../shared/partials/04-base/_all.scss', :like => :stylesheet, :to => 'partials/04-base/_all.scss'
 file '../shared/partials/04-base/_common.scss', :like => :stylesheet, :to => 'partials/04-base/_common.scss'
-file '../shared/partials/04-base/_edits.scss', :like => :stylesheet, :to => 'partials/04-base/_edits.scss'
-file '../shared/partials/04-base/_font-face.scss', :like => :stylesheet, :to => 'partials/04-base/_font-face.scss'
 file '../shared/partials/04-base/_form-defaults.scss', :like => :stylesheet, :to => 'partials/04-base/_form-defaults.scss'
 file '../shared/partials/04-base/_headers.scss', :like => :stylesheet, :to => 'partials/04-base/_headers.scss'
 file '../shared/partials/04-base/_images.scss', :like => :stylesheet, :to => 'partials/04-base/_images.scss'

data/templates/project/manifest.rb

@@ -11,8 +11,6 @@ file '../shared/partials/03-extend/_all.scss', :like => :stylesheet, :to => 'par
 file '../shared/partials/03-extend/_typography.scss', :like => :stylesheet, :to => 'partials/03-extend/_typography.scss'
 file '../shared/partials/04-base/_all.scss', :like => :stylesheet, :to => 'partials/04-base/_all.scss'
 file '../shared/partials/04-base/_common.scss', :like => :stylesheet, :to => 'partials/04-base/_common.scss'
-file '../shared/partials/04-base/_edits.scss', :like => :stylesheet, :to => 'partials/04-base/_edits.scss'
-file '../shared/partials/04-base/_font-face.scss', :like => :stylesheet, :to => 'partials/04-base/_font-face.scss'
 file '../shared/partials/04-base/_form-defaults.scss', :like => :stylesheet, :to => 'partials/04-base/_form-defaults.scss'
 file '../shared/partials/04-base/_headers.scss', :like => :stylesheet, :to => 'partials/04-base/_headers.scss'
 file '../shared/partials/04-base/_images.scss', :like => :stylesheet, :to => 'partials/04-base/_images.scss'
@@ -76,50 +74,50 @@ file '../shared/drupal/watchdog-error.png', :like => :image, :to => 'drupal/watc
 file '../shared/drupal/watchdog-ok.png', :like => :image, :to => 'drupal/watchdog-ok.png'
 file '../shared/drupal/watchdog-warning.png', :like => :image, :to => 'drupal/watchdog-warning.png'
 
-font '../shared/fonts/font-awesome/fontawesome-webfont.eot',  :like => :font, :to => 'font-awesome/fontawesome-webfont.eot'
-font '../shared/fonts/font-awesome/fontawesome-webfont.svg',  :like => :font, :to => 'font-awesome/fontawesome-webfont.svg'
-font '../shared/fonts/font-awesome/fontawesome-webfont.ttf',  :like => :font, :to => 'font-awesome/fontawesome-webfont.ttf'
-font '../shared/fonts/font-awesome/fontawesome-webfont.woff', :like => :font, :to => 'font-awesome/fontawesome-webfont.woff'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.eot',  :like => :font, :to => 'league-gothic/leaguegothic-condensed-italic-webfont.eot'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.svg',  :like => :font, :to => 'league-gothic/leaguegothic-condensed-italic-webfont.svg'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.ttf',  :like => :font, :to => 'league-gothic/leaguegothic-condensed-italic-webfont.ttf'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.woff', :like => :font, :to => 'league-gothic/leaguegothic-condensed-italic-webfont.woff'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.eot',  :like => :font, :to => 'league-gothic/leaguegothic-condensed-regular-webfont.eot'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.svg',  :like => :font, :to => 'league-gothic/leaguegothic-condensed-regular-webfont.svg'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.ttf',  :like => :font, :to => 'league-gothic/leaguegothic-condensed-regular-webfont.ttf'
-font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.woff', :like => :font, :to => 'league-gothic/leaguegothic-condensed-regular-webfont.woff'
-font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.eot',  :like => :font, :to => 'league-gothic/leaguegothic-italic-webfont.eot'
-font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.svg',  :like => :font, :to => 'league-gothic/leaguegothic-italic-webfont.svg'
-font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.ttf',  :like => :font, :to => 'league-gothic/leaguegothic-italic-webfont.ttf'
-font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.woff', :like => :font, :to => 'league-gothic/leaguegothic-italic-webfont.woff'
-font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.eot',  :like => :font, :to => 'league-gothic/leaguegothic-regular-webfont.eot'
-font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.svg',  :like => :font, :to => 'league-gothic/leaguegothic-regular-webfont.svg'
-font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.ttf',  :like => :font, :to => 'league-gothic/leaguegothic-regular-webfont.ttf'
-font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.woff', :like => :font, :to => 'league-gothic/leaguegothic-regular-webfont.woff'
-font '../shared/fonts/ostrich/ostrich-black-webfont.eot', :like => :font, :to => 'ostrich/ostrich-black-webfont.eot'
-font '../shared/fonts/ostrich/ostrich-black-webfont.svg', :like => :font, :to => 'ostrich/ostrich-black-webfont.svg'
-font '../shared/fonts/ostrich/ostrich-black-webfont.ttf', :like => :font, :to => 'ostrich/ostrich-black-webfont.ttf'
-font '../shared/fonts/ostrich/ostrich-black-webfont.woff', :like => :font, :to => 'ostrich/ostrich-black-webfont.woff'
-font '../shared/fonts/ostrich/ostrich-bold-webfont.eot', :like => :font, :to => 'ostrich/ostrich-bold-webfont.eot'
-font '../shared/fonts/ostrich/ostrich-bold-webfont.svg', :like => :font, :to => 'ostrich/ostrich-bold-webfont.svg'
-font '../shared/fonts/ostrich/ostrich-bold-webfont.ttf', :like => :font, :to => 'ostrich/ostrich-bold-webfont.ttf'
-font '../shared/fonts/ostrich/ostrich-bold-webfont.woff', :like => :font, :to => 'ostrich/ostrich-bold-webfont.woff'
-font '../shared/fonts/ostrich/ostrich-dashed-webfont.eot', :like => :font, :to => 'ostrich/ostrich-dashed-webfont.eot'
-font '../shared/fonts/ostrich/ostrich-dashed-webfont.svg', :like => :font, :to => 'ostrich/ostrich-dashed-webfont.svg'
-font '../shared/fonts/ostrich/ostrich-dashed-webfont.ttf', :like => :font, :to => 'ostrich/ostrich-dashed-webfont.ttf'
-font '../shared/fonts/ostrich/ostrich-dashed-webfont.woff', :like => :font, :to => 'ostrich/ostrich-dashed-webfont.woff'
-font '../shared/fonts/ostrich/ostrich-light-webfont.eot', :like => :font, :to => 'ostrich/ostrich-light-webfont.eot'
-font '../shared/fonts/ostrich/ostrich-light-webfont.svg', :like => :font, :to => 'ostrich/ostrich-light-webfont.svg'
-font '../shared/fonts/ostrich/ostrich-light-webfont.ttf', :like => :font, :to => 'ostrich/ostrich-light-webfont.ttf'
-font '../shared/fonts/ostrich/ostrich-light-webfont.woff', :like => :font, :to => 'ostrich/ostrich-light-webfont.woff'
-font '../shared/fonts/ostrich/ostrich-regular-webfont.eot', :like => :font, :to => 'ostrich/ostrich-regular-webfont.eot'
-font '../shared/fonts/ostrich/ostrich-regular-webfont.svg', :like => :font, :to => 'ostrich/ostrich-regular-webfont.svg'
-font '../shared/fonts/ostrich/ostrich-regular-webfont.ttf', :like => :font, :to => 'ostrich/ostrich-regular-webfont.ttf'
-font '../shared/fonts/ostrich/ostrich-regular-webfont.woff', :like => :font, :to => 'ostrich/ostrich-regular-webfont.woff'
-font '../shared/fonts/ostrich/ostrich-rounded-webfont.eot', :like => :font, :to => 'ostrich/ostrich-rounded-webfont.eot'
-font '../shared/fonts/ostrich/ostrich-rounded-webfont.svg', :like => :font, :to => 'ostrich/ostrich-rounded-webfont.svg'
-font '../shared/fonts/ostrich/ostrich-rounded-webfont.ttf', :like => :font, :to => 'ostrich/ostrich-rounded-webfont.ttf'
-font '../shared/fonts/ostrich/ostrich-rounded-webfont.woff', :like => :font, :to => 'ostrich/ostrich-rounded-webfont.woff'
+font '../shared/fonts/font-awesome/fontawesome-webfont.eot',  :like => :font, :to => 'fontawesome-webfont.eot'
+font '../shared/fonts/font-awesome/fontawesome-webfont.svg',  :like => :font, :to => 'fontawesome-webfont.svg'
+font '../shared/fonts/font-awesome/fontawesome-webfont.ttf',  :like => :font, :to => 'fontawesome-webfont.ttf'
+font '../shared/fonts/font-awesome/fontawesome-webfont.woff', :like => :font, :to => 'fontawesome-webfont.woff'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.eot',   :like => :font, :to => 'leaguegothic-condensed-italic-webfont.eot'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.svg',   :like => :font, :to => 'leaguegothic-condensed-italic-webfont.svg'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.ttf',   :like => :font, :to => 'leaguegothic-condensed-italic-webfont.ttf'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-italic-webfont.woff',  :like => :font, :to => 'leaguegothic-condensed-italic-webfont.woff'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.eot',  :like => :font, :to => 'leaguegothic-condensed-regular-webfont.eot'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.svg',  :like => :font, :to => 'leaguegothic-condensed-regular-webfont.svg'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.ttf',  :like => :font, :to => 'leaguegothic-condensed-regular-webfont.ttf'
+font '../shared/fonts/league-gothic/leaguegothic-condensed-regular-webfont.woff', :like => :font, :to => 'leaguegothic-condensed-regular-webfont.woff'
+font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.eot',   :like => :font, :to => 'leaguegothic-italic-webfont.eot'
+font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.svg',   :like => :font, :to => 'leaguegothic-italic-webfont.svg'
+font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.ttf',   :like => :font, :to => 'leaguegothic-italic-webfont.ttf'
+font '../shared/fonts/league-gothic/leaguegothic-italic-webfont.woff',  :like => :font, :to => 'leaguegothic-italic-webfont.woff'
+font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.eot',  :like => :font, :to => 'leaguegothic-regular-webfont.eot'
+font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.svg',  :like => :font, :to => 'leaguegothic-regular-webfont.svg'
+font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.ttf',  :like => :font, :to => 'leaguegothic-regular-webfont.ttf'
+font '../shared/fonts/league-gothic/leaguegothic-regular-webfont.woff', :like => :font, :to => 'leaguegothic-regular-webfont.woff'
+font '../shared/fonts/ostrich/ostrich-black-webfont.eot',  :like => :font, :to => 'ostrich-black-webfont.eot'
+font '../shared/fonts/ostrich/ostrich-black-webfont.svg',  :like => :font, :to => 'ostrich-black-webfont.svg'
+font '../shared/fonts/ostrich/ostrich-black-webfont.ttf',  :like => :font, :to => 'ostrich-black-webfont.ttf'
+font '../shared/fonts/ostrich/ostrich-black-webfont.woff', :like => :font, :to => 'ostrich-black-webfont.woff'
+font '../shared/fonts/ostrich/ostrich-bold-webfont.eot',  :like => :font, :to => 'ostrich-bold-webfont.eot'
+font '../shared/fonts/ostrich/ostrich-bold-webfont.svg',  :like => :font, :to => 'ostrich-bold-webfont.svg'
+font '../shared/fonts/ostrich/ostrich-bold-webfont.ttf',  :like => :font, :to => 'ostrich-bold-webfont.ttf'
+font '../shared/fonts/ostrich/ostrich-bold-webfont.woff', :like => :font, :to => 'ostrich-bold-webfont.woff'
+font '../shared/fonts/ostrich/ostrich-dashed-webfont.eot',  :like => :font, :to => 'ostrich-dashed-webfont.eot'
+font '../shared/fonts/ostrich/ostrich-dashed-webfont.svg',  :like => :font, :to => 'ostrich-dashed-webfont.svg'
+font '../shared/fonts/ostrich/ostrich-dashed-webfont.ttf',  :like => :font, :to => 'ostrich-dashed-webfont.ttf'
+font '../shared/fonts/ostrich/ostrich-dashed-webfont.woff', :like => :font, :to => 'ostrich-dashed-webfont.woff'
+font '../shared/fonts/ostrich/ostrich-light-webfont.eot',  :like => :font, :to => 'ostrich-light-webfont.eot'
+font '../shared/fonts/ostrich/ostrich-light-webfont.svg',  :like => :font, :to => 'ostrich-light-webfont.svg'
+font '../shared/fonts/ostrich/ostrich-light-webfont.ttf',  :like => :font, :to => 'ostrich-light-webfont.ttf'
+font '../shared/fonts/ostrich/ostrich-light-webfont.woff', :like => :font, :to => 'ostrich-light-webfont.woff'
+font '../shared/fonts/ostrich/ostrich-regular-webfont.eot',  :like => :font, :to => 'ostrich-regular-webfont.eot'
+font '../shared/fonts/ostrich/ostrich-regular-webfont.svg',  :like => :font, :to => 'ostrich-regular-webfont.svg'
+font '../shared/fonts/ostrich/ostrich-regular-webfont.ttf',  :like => :font, :to => 'ostrich-regular-webfont.ttf'
+font '../shared/fonts/ostrich/ostrich-regular-webfont.woff', :like => :font, :to => 'ostrich-regular-webfont.woff'
+font '../shared/fonts/ostrich/ostrich-rounded-webfont.eot',  :like => :font, :to => 'ostrich-rounded-webfont.eot'
+font '../shared/fonts/ostrich/ostrich-rounded-webfont.svg',  :like => :font, :to => 'ostrich-rounded-webfont.svg'
+font '../shared/fonts/ostrich/ostrich-rounded-webfont.ttf',  :like => :font, :to => 'ostrich-rounded-webfont.ttf'
+font '../shared/fonts/ostrich/ostrich-rounded-webfont.woff', :like => :font, :to => 'ostrich-rounded-webfont.woff'
 
 help %Q{
 This is a Compass extension for The Coding Designer's Survival Kit by Mason Wendell

data/templates/project/sources/FitVids/README.md

@@ -0,0 +1,49 @@
+# Introducing FitVids.js
+A lightweight, easy-to-use jQuery plugin for fluid width video embeds.
+
+FitVids automates [the Intrinsic Ratio Method by Thierry Koblentz](http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/) to achieve fluid width videos in your responsive web design.
+
+## How Do I Use It?
+Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with `fitVids()`.
+
+```html
+<script src="path/to/jquery.min.js"></script>
+<script src="path/to/jquery.fitvids.js"></script>
+<script>
+  $(document).ready(function(){
+    // Target your .container, .wrapper, .post, etc.
+    $("#thing-with-videos").fitVids();
+  });
+</script>
+```
+
+This will wrap each video in a `div.fluid-width-video-wrapper` and apply the necessary CSS. After the initial Javascript call, it's all percentage-based CSS magic.
+
+## Currently Supported Players
+<table>
+<tr><td>YouTube</td><td>Y</td></tr>
+<tr><td>Vimeo</td><td>Y</td></tr>
+<tr><td>Blip.tv</td><td>Y</td></tr>
+<tr><td>Viddler</td><td>Y</td></tr>
+<tr><td>Kickstarter</td><td> Y</td></tr>
+</table>
+
+## Add Your Own Video Vendor
+Have a custom video player? We now have a `customSelector` option where you can add your own specific video vendor selector (_mileage may vary depending on vendor and fluidity of player_):
+
+```javascript
+  $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
+  // Selectors are comma separated, just like CSS
+```
+
+_Note:_ This will be the quickest way to add your own custom vendor as well as test your player's compatibility with FitVids.
+
+## Changelog
+* _09.02.11 - v1 - 2.376kb_
+  * Added `customSelector` option
+* _09.02.11 - v1 - 2.135kb_
+	* Initial release
+	* Vimeo,YouTube, Blip.tv, Viddler, Kickstarter
+
+## Credits
+@ChrisCoyier, @davatron5000, @TrentWalton, @raygunray

data/templates/project/sources/FitVids/jquery.fitvids.js

@@ -0,0 +1,80 @@
+/*global jQuery */
+/*jshint multistr:true browser:true */
+/*!
+* FitVids 1.0
+*
+* Copyright 2011, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com
+* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/
+* Released under the WTFPL license - http://sam.zoy.org/wtfpl/
+*
+* Date: Thu Sept 01 18:00:00 2011 -0500
+*/
+
+(function( $ ){
+
+  "use strict";
+
+  $.fn.fitVids = function( options ) {
+    var settings = {
+      customSelector: null
+    };
+
+    var div = document.createElement('div'),
+        ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0];
+
+    div.className = 'fit-vids-style';
+    div.innerHTML = '&shy;<style>         \
+      .fluid-width-video-wrapper {        \
+         width: 100%;                     \
+         position: relative;              \
+         padding: 0;                      \
+      }                                   \
+                                          \
+      .fluid-width-video-wrapper iframe,  \
+      .fluid-width-video-wrapper object,  \
+      .fluid-width-video-wrapper embed {  \
+         position: absolute;              \
+         top: 0;                          \
+         left: 0;                         \
+         width: 100%;                     \
+         height: 100%;                    \
+      }                                   \
+    </style>';
+
+    ref.parentNode.insertBefore(div,ref);
+
+    if ( options ) {
+      $.extend( settings, options );
+    }
+
+    return this.each(function(){
+      var selectors = [
+        "iframe[src*='player.vimeo.com']",
+        "iframe[src*='www.youtube.com']",
+        "iframe[src*='www.kickstarter.com']",
+        "object",
+        "embed"
+      ];
+
+      if (settings.customSelector) {
+        selectors.push(settings.customSelector);
+      }
+
+      var $allVideos = $(this).find(selectors.join(','));
+
+      $allVideos.each(function(){
+        var $this = $(this);
+        if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; }
+        var height = ( this.tagName.toLowerCase() === 'object' || $this.attr('height') ) ? parseInt($this.attr('height'), 10) : $this.height(),
+            width = $this.attr('width') ? parseInt($this.attr('width'), 10) : $this.width(),
+            aspectRatio = height / width;
+        if(!$this.attr('id')){
+          var videoID = 'fitvid' + Math.floor(Math.random()*999999);
+          $this.attr('id', videoID);
+        }
+        $this.wrap('<div class="fluid-width-video-wrapper"></div>').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");
+        $this.removeAttr('height').removeAttr('width');
+      });
+    });
+  };
+})( jQuery );

data/templates/project/sources/FitVids/tests.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+    <head>
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+        <title>Fluid Width Videos with Fitvids.js</title>
+        <style>
+        	body {
+	background-image: url(data:image/png;base64,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);
+        	}
+        
+          video {
+            width: 100%;
+            height: auto;
+          }
+          
+          .container {
+            width: 70%;
+            padding: 5%;
+            margin:0px auto;
+            background:#fff;
+            box-shadow: 0 5px 5px rgba(0,0,0,0.5);
+          }
+          
+          .vendor {
+            padding: 2%;
+            background: #d1eed1;
+            margin-bottom: 2em;
+          }
+          
+          .unsupported {
+            background: #fddfde;
+          }
+        </style>
+    </head>
+    <body>
+      <div class="container">
+        <div class="vendor">
+        	<iframe width="425" height="349" src="http://www.youtube.com/embed/FKWwdQu6_ok" frameborder="0" allowfullscreen></iframe>
+	      </div>
+	      <div class="vendor">
+        	<iframe src="http://player.vimeo.com/video/25708134?title=0&amp;byline=0&amp;portrait=0" width="400" height="225" frameborder="0"></iframe>
+        </div>
+        <div class="vendor">
+        	<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="437" height="288" id="viddler"><param name="movie" value="http://www.viddler.com/player/d6c37b62/" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="true" /><param name="flashvars" value="fake=1"/><embed src="http://www.viddler.com/player/d6c37b62/" width="437" height="288" type="application/x-shockwave-flash" allowScriptAccess="always" allowFullScreen="true" flashvars="fake=1" name="viddler" ></embed></object>
+        </div>
+        <div class="vendor">
+        	<embed src="http://blip.tv/play/AYHCnikC" type="application/x-shockwave-flash" width="550" height="396" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" ></embed>
+        </div>
+        <div class="vendor">
+<iframe frameborder="0" height="410px" src="http://www.kickstarter.com/projects/30453381/the-shape-of-design/widget/video.html" width="480px"></iframe>
+        </div>
+        <div class="vendor">
+          <iframe width="520px" height="391px" src="http://socialcam.com/videos/XRMP3Y5t/embed?utm_campaign=web&utm_source=embed" frameborder="0" allowfullscreen></iframe>
+        </div>
+      </div>
+    
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+      <script src="jquery.fitvids.js"></script>
+      <script>
+        // Basic FitVids Test
+        $(".container").fitVids();
+        // Custom selector and No-Double-Wrapping Prevention Test
+        $(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});  
+      </script>
+      </body>
+  </html>

data/templates/project/sources/Geared-Scrolling/README.md

@@ -0,0 +1,31 @@
+[Heyday Labs](http://labs.heyday.co.nz/) - Geared Scroller
+================================
+
+Huh? What is it?
+----------------
+
+This is a little effect we dreamed up for a project of ours: [Down to the Wire - The Story of New Zealand's Internet](http://downtothewire.co.nz/).
+
+Basically, we wanted a way to prolong the visibility of certain columns in a 3-column layout.
+
+We thought - how about we do some funky *proportional* scrolling that slows the scrolling of shorter columns so that, as a user scrolls down the page, the columns will line up along the baseline of the tallest column... if this makes no sense it's probably better you check it out in action:
+[http://downtothewire.co.nz/](http://downtothewire.co.nz/) - sorry, our implmentation is for Webkit browsers only (see known issues below)
+
+It ain't perfect...
+-------------------
+
+Damn! Why do Webkit browsers have to be the only sh*t hot browsers! ;)
+
+OK - so it does *work* on all modern browsers but we've only enabled it for Webkit. Reason being that other browsers (including Firefox) have a slight stuttering of the animated columns when using the scrollbar (using a wheel mouse is fine - this probably comes down to the number of times the **`scroll`** event is fired).
+
+We tried changing it to animate the **`scrollTop`** property instead (usually better for animating the **`top`** position - but same deal.
+
+So... have a crack and if you can resolve this little issue we'll be your friend forever.
+
+[Update] User mleibman gave us a tip which improved the performance and allowed us to enable this in Firefox and IE7+, unfortunately in the Down To The Wire implementation due to [a bug involving Flash](https://bugzilla.mozilla.org/show_bug.cgi?id=90268) we had to disable the plugin for Firefox users for that site. The plugin will work by default in all modern browsers.
+
+Would you like to know more?
+----------------------------
+
+If you want to ask us a question, tell us about a bug or, you're just bored, please feel free to drop by our labs:  
+[http://labs.heyday.co.nz/](http://labs.heyday.co.nz/) or email us: [labs@heyday.co.nz](mailto:labs@heyday.co.nz)

data/templates/project/sources/Geared-Scrolling/css/specific.css

@@ -0,0 +1,88 @@
+html, body {
+	background-color: #F8F6EE;
+	margin: 0;
+}
+
+#Header h1 {
+	font-size: 9em;
+	text-transform: uppercase;
+	text-align: center;
+}
+
+#Container {
+	width: 960px;
+	padding: 0 0 150px 0;
+	margin: 0 auto;
+}
+
+img {
+	display: block;
+}
+
+.columnHolder {
+	position: relative;
+	zoom: 1;
+}
+
+.columnHolder .short {
+	top: 0;
+}
+
+.tall1 .columnOne {
+	margin-left: 0;
+}
+
+.tall2 .columnOne,
+.tall3 .columnOne {
+	left: 0;
+}
+
+.tall1 .columnTwo,
+.tall3 .columnTwo {
+	left: 320px;
+}
+
+.tall2 .columnTwo {
+	margin-left: 320px;
+}
+
+.tall1 .columnThree,
+.tall2 .columnThree {
+	left: 750px;
+}
+
+.tall3 .columnThree {
+	margin-left: 750px;
+}
+
+.columnHolder .static {
+	float: left;
+	position: static;
+	margin: 0;
+}
+
+.fixed {
+	float: none;
+	position: fixed;
+}
+
+.column {
+	float: left;
+	zoom: 1;
+}
+
+.columnOne {
+	width: 320px;
+	background: red;
+}
+
+.columnTwo {
+	width: 430px;
+	background: green;
+
+}
+
+.columnThree {
+	width: 210px;
+	background: blue;
+}