toolkit 0.1 → 0.1.6

data/stylesheets/_toolkit.scss

@@ -3,11 +3,6 @@
 ////////////////////////
 @import 'compass';
 
-////////////////////////
-// Compass Extensions
-////////////////////////
-@import 'susy';
-
 ////////////////////////
 // Import Border Box Awesomesauce
 ////////////////////////
@@ -21,4 +16,4 @@
 ////////////////////////
 // Import Progressive Enhancement
 ////////////////////////
-@import 'toolkit/progressive-enhancement';
+@import 'toolkit/pe';

data/stylesheets/toolkit/_fluid-media.scss

@@ -8,6 +8,8 @@ img {
 
 ////////////////////////
 // Scaling Embeds WITH NO JAVASCIPT!
+//
+// From the outrageously awesome Scott Kellum
 ////////////////////////
 @mixin scale-elements($ratio: 16/9, $width: 100%, $elements: '*') {
   @extend %scaling-elements-parent;

data/stylesheets/toolkit/_pe.scss

@@ -0,0 +1,115 @@
+////////////////////////
+// Enhance From
+//
+// - $feature: Modernizr feature (base CSS class name)
+////////////////////////
+@mixin enhance-with($feature) {
+  .#{$feature} & {
+    @content;
+  }
+}
+
+////////////////////////
+// Degrade From
+//
+// - $feature: Modernizr feature (base CSS class name)
+////////////////////////
+@mixin degrade-from($feature) {
+  .no-#{$feature} &,
+  .no-js & {
+    @content;
+  }
+}
+
+////////////////////////
+// Progressive Enhancement Text Replace Mixin
+//
+// - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
+// - $sprite: The name of the sprite you want to use (this is the file name without extension)
+// - $inline-svg: Switches between a Base64 encoded SVG or a normal url() for the SVG. Default to true
+// - $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not. Defaults to true.
+// - $inline: Whether or not the containing selector is an inline element. Defaults to false.
+////////////////////////
+@mixin replace-text-pe($png-path, $sprite, $inline-svg: true, $with-dimensions: true, $inline: false) {
+  // Map Out the Sprite
+  $sprite-map: sprite-map($png-path);
+  
+  // Build SVG file name
+  $svg-file: str-replace('*.png', '#{$sprite}.svg', $png-path);
+  
+  // Default Sprite File
+  $sprite-file: '' !default;
+  
+  @if $with-dimensions {
+    // Get Sprite File for Height/Width
+    $sprite-file: sprite-file($sprite-map, $sprite);
+
+    // Put the height/width of the image in
+    width: image-width($sprite-file);
+    height: image-height($sprite-file);
+  }
+  
+  // Hide text. Use squish-text() if the element is inline
+  @if $inline {
+    @extend %replace-text-pe-squish;
+  }
+  @else {
+    @extend %replace-text-pe-hide;
+  }
+  
+  // Enhance with SVG
+  @include enhance-with('svg') {
+    // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
+    @if $inline-svg {
+      background-image: inline-image($svg-file);
+    }
+    @else {
+      background-image: image-url($svg-file);
+    }
+    // No repeating backgrounds, please
+    background-repeat: no-repeat;
+    // Set background size to ensure that our SVG is the right size.
+    @if $with-dimensions {
+      background-size: image-width($sprite-file) image-height($sprite-file);
+    }
+  }
+  
+  // Degrade from SVG 
+  @include degrade-from('svg') {
+    // Extend the Sprite Background
+    @extend %#{sprite-map-name($sprite-map)}-image-map;
+    // Call the Sprite'd image's position.
+    @include sprite($sprite-map, $sprite);
+  }
+}
+
+//////////////////////////////
+// Sprite Map Generator
+//
+// Need a custom mixin to create extendable classes classes for background image for sprites because dynamic mixin names don't work.
+//
+// - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
+//////////////////////////////
+@mixin sprite-map-generator($png-path) {
+  $png-path: sprite-map($png-path);
+  %#{sprite-map-name($png-path)}-image-map {
+    background: {
+      image: $png-path;
+      repeat: no-repeat;
+    }
+  }
+}
+
+//////////////////////////////
+// Extendable Class for Squish Text mixin
+//////////////////////////////
+%replace-text-pe-squish {
+  @include squish-text();
+}
+
+//////////////////////////////
+// Extendable Class for Hide Text mixin
+//////////////////////////////
+%replace-text-pe-hide {
+  @include hide-text();
+}

data/templates/project/{partials/global/_base.scss → _base.scss}

@@ -8,12 +8,15 @@
 
 ////////////////////////
 // Compass Imports
+//
+// Toolkit include @import 'compass' so you don't need to.
 ////////////////////////
 
 ////////////////////////
 // Compass Extensions
 ////////////////////////
 @import 'toolkit';
+@import 'susy';
 @import 'breakpoint';
 
 ////////////////////////

data/templates/project/manifest.rb

@@ -1,29 +1,31 @@
 description "Responsive Web Design Kickstart"
 
 # Stylesheets
-stylesheet 'style.scss',  :media => 'screen, projection'
+file '../shared/style.scss',  :like => :stylesheet, :media => 'screen, projection', :to => 'style.scss'
 
-stylesheet 'partials/global/_base.scss'
-stylesheet 'partials/global/_variables.scss'
-stylesheet 'partials/global/_functions.scss'
-stylesheet 'partials/global/_mixins.scss'
-stylesheet 'partials/global/_extendables.scss'
+file '_base.scss',  :like => :stylesheet, :to => 'partials/global/_base.scss'
+file '../shared/_variables.scss', :like => :stylesheet, :to => 'partials/global/_variables.scss'
+file '../shared/_functions.scss', :like => :stylesheet, :to => 'partials/global/_functions.scss'
+file '../shared/_mixins.scss', :like => :stylesheet, :to => 'partials/global/_mixins.scss'
+file '../shared/_extendables.scss', :like => :stylesheet, :to => 'partials/global/_extendables.scss'
 
-stylesheet 'partials/styleguide/_style-guide.scss'
+file '../shared/_style-guide.scss', :like => :stylesheet, :to => 'partials/styleguide/_style-guide.scss'
 
-stylesheet 'partials/layout/_layout.scss'
-stylesheet 'partials/layout/_ie-layout.scss'
-stylesheet 'partials/layout/_print-layout.scss'
+file '../shared/_layout.scss', :like => :stylesheet, :to => 'partials/layout/_layout.scss'
+file '../shared/_ie-layout.scss', :like => :stylesheet, :to => 'partials/layout/_ie-layout.scss'
+file '../shared/_print-layout.scss', :like => :stylesheet, :to => 'partials/layout/_print-layout.scss'
 
-stylesheet 'partials/design/_design.scss'
-stylesheet 'partials/design/_ie-design.scss'
-stylesheet 'partials/design/_print-design.scss'
+file '../shared/_design.scss', :like => :stylesheet, :to => 'partials/design/_design.scss'
+file '../shared/_ie-design.scss', :like => :stylesheet, :to => 'partials/design/_ie-design.scss'
+file '../shared/_print-design.scss', :like => :stylesheet, :to => 'partials/design/_print-design.scss'
 
-stylesheet 'print.scss',  :media => 'print'
-stylesheet 'ie.scss',     :media => 'screen, projection', :condition => "lt IE 8"
+file '../shared/print.scss',  :like => :stylesheet, :media => 'print', :to => 'print.scss'
+file '../shared/ie.scss',     :like => :stylesheet, :media => 'screen, projection', :condition => "lt IE 8", :to => 'ie.scss'
 
-# JavaScript and Images
-discover :javascripts
+# JavaScript
+file '../shared/hammer.js',           :like => :javascript, :to => 'hammer.js'
+file '../shared/loader.js',           :like => :javascript, :to => 'loader.js'
+file '../shared/modernizr-2.5.3.js',  :like => :javascript, :to => 'modernizr-2.5.3.js'
 
 help %Q{
   Please contact Sam Richard or Mason Wendell with questions:
@@ -38,15 +40,16 @@ welcome_message %Q{
   
   Welcome to the Responsive Web Design Kickstart gem! Provided are the basic tools needed to kickstart a custom Responsive Web Design solution tailor made to your needs! Remember, tools and best practices are always changing, so keep up to date!
   
-  The following is included in this build:
+The following is included in this build:
   Compass Extensions:
    * Susy
+   * Toolkit
    * Breakpoint
+   
   JavaScript:
    * Modernizr Custom Build with all Standard features of 2.3.5 except html5shiv w/printshiv or Media Queries. Build your own from http://modernizr.com/download/ when you are ready for production
    * Loader.js custom JavaScript file for holding conditional asset loading scripts thanks to Modernizr's yepnope (http://yepnopejs.com/). Comes with yepnope code for loading in Hammer.js, just make sure the path is correct from root.. Ready for production, but remember to minify and gzip!
    * Hammer.js (http://eightmedia.github.com/hammer.js/) for awesome touch events. Ready for production, but remember to minify and gzip!
-   * embeds.respond.js is an fluid iFrame solution for YouTube and Vimeo embeds that requires jQuery (for the time being, not included).
     
   Include the following in your <head> tag:
   

data/templates/respond-to/{partials/global/_base.scss → _base.scss}

@@ -8,12 +8,15 @@
 
 ////////////////////////
 // Compass Imports
+//
+// Toolkit include @import 'compass' so you don't need to.
 ////////////////////////
 
 ////////////////////////
 // Compass Extensions
 ////////////////////////
 @import 'toolkit';
+@import 'susy';
 @import 'respond-to';
 
 ////////////////////////

data/templates/respond-to/manifest.rb

@@ -1,29 +1,31 @@
 description "Responsive Web Design Kickstart"
 
 # Stylesheets
-stylesheet 'style.scss',  :media => 'screen, projection'
+file '../shared/style.scss',  :like => :stylesheet, :media => 'screen, projection', :to => 'style.scss'
 
-stylesheet 'partials/global/_base.scss'
-stylesheet 'partials/global/_variables.scss'
-stylesheet 'partials/global/_functions.scss'
-stylesheet 'partials/global/_mixins.scss'
-stylesheet 'partials/global/_extendables.scss'
+file '_base.scss',  :like => :stylesheet, :to => 'partials/global/_base.scss'
+file '../shared/_variables.scss', :like => :stylesheet, :to => 'partials/global/_variables.scss'
+file '../shared/_functions.scss', :like => :stylesheet, :to => 'partials/global/_functions.scss'
+file '../shared/_mixins.scss', :like => :stylesheet, :to => 'partials/global/_mixins.scss'
+file '../shared/_extendables.scss', :like => :stylesheet, :to => 'partials/global/_extendables.scss'
 
-stylesheet 'partials/styleguide/_style-guide.scss'
+file '../shared/_style-guide.scss', :like => :stylesheet, :to => 'partials/styleguide/_style-guide.scss'
 
-stylesheet 'partials/layout/_layout.scss'
-stylesheet 'partials/layout/_ie-layout.scss'
-stylesheet 'partials/layout/_print-layout.scss'
+file '../shared/_layout.scss', :like => :stylesheet, :to => 'partials/layout/_layout.scss'
+file '../shared/_ie-layout.scss', :like => :stylesheet, :to => 'partials/layout/_ie-layout.scss'
+file '../shared/_print-layout.scss', :like => :stylesheet, :to => 'partials/layout/_print-layout.scss'
 
-stylesheet 'partials/design/_design.scss'
-stylesheet 'partials/design/_ie-design.scss'
-stylesheet 'partials/design/_print-design.scss'
+file '../shared/_design.scss', :like => :stylesheet, :to => 'partials/design/_design.scss'
+file '../shared/_ie-design.scss', :like => :stylesheet, :to => 'partials/design/_ie-design.scss'
+file '../shared/_print-design.scss', :like => :stylesheet, :to => 'partials/design/_print-design.scss'
 
-stylesheet 'print.scss',  :media => 'print'
-stylesheet 'ie.scss',     :media => 'screen, projection', :condition => "lt IE 8"
+file '../shared/print.scss',  :like => :stylesheet, :media => 'print', :to => 'print.scss'
+file '../shared/ie.scss',     :like => :stylesheet, :media => 'screen, projection', :condition => "lt IE 8", :to => 'ie.scss'
 
-# JavaScript and Images
-discover :javascripts
+# JavaScript
+file '../shared/hammer.js',           :like => :javascript, :to => 'hammer.js'
+file '../shared/loader.js',           :like => :javascript, :to => 'loader.js'
+file '../shared/modernizr-2.5.3.js',  :like => :javascript, :to => 'modernizr-2.5.3.js'
 
 help %Q{
   Please contact Sam Richard or Mason Wendell with questions:
@@ -41,13 +43,13 @@ welcome_message %Q{
 The following is included in this build:
   Compass Extensions:
    * Susy
-   * Respond-To
+   * Toolkit
+   * Respond-to
    
   JavaScript:
    * Modernizr Custom Build with all Standard features of 2.3.5 except html5shiv w/printshiv or Media Queries. Build your own from http://modernizr.com/download/ when you are ready for production
    * Loader.js custom JavaScript file for holding conditional asset loading scripts thanks to Modernizr's yepnope (http://yepnopejs.com/). Comes with yepnope code for loading in Hammer.js, just make sure the path is correct from root.. Ready for production, but remember to minify and gzip!
    * Hammer.js (http://eightmedia.github.com/hammer.js/) for awesome touch events. Ready for production, but remember to minify and gzip!
-   * embeds.respond.js is an fluid iFrame solution for YouTube and Vimeo embeds that requires jQuery (for the time being, not included).
     
   Include the following in your <head> tag:
   

metadata

@@ -5,7 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 1
-  version: "0.1"
+  - 6
+  version: 0.1.6
 platform: ruby
 authors: 
 - Sam Richard
@@ -75,47 +76,28 @@ files:
 - stylesheets/_toolkit.scss
 - stylesheets/toolkit/_border-box.scss
 - stylesheets/toolkit/_fluid-media.scss
-- stylesheets/toolkit/_progressive-enhancement.scss
-- templates/project/embeds.respond.js
-- templates/project/hammer.js
-- templates/project/ie.scss
-- templates/project/loader.js
+- stylesheets/toolkit/_pe.scss
+- templates/project/_base.scss
 - templates/project/manifest.rb
-- templates/project/modernizr-2.5.3.js
-- templates/project/partials/design/_design.scss
-- templates/project/partials/design/_ie-design.scss
-- templates/project/partials/design/_print-design.scss
-- templates/project/partials/global/_base.scss
-- templates/project/partials/global/_extendables.scss
-- templates/project/partials/global/_functions.scss
-- templates/project/partials/global/_mixins.scss
-- templates/project/partials/global/_variables.scss
-- templates/project/partials/layout/_ie-layout.scss
-- templates/project/partials/layout/_layout.scss
-- templates/project/partials/layout/_print-layout.scss
-- templates/project/partials/styleguide/_style-guide.scss
-- templates/project/print.scss
-- templates/project/style.scss
-- templates/respond-to/embeds.respond.js
-- templates/respond-to/hammer.js
-- templates/respond-to/ie.scss
-- templates/respond-to/loader.js
+- templates/respond-to/_base.scss
 - templates/respond-to/manifest.rb
-- templates/respond-to/modernizr-2.5.3.js
-- templates/respond-to/partials/design/_design.scss
-- templates/respond-to/partials/design/_ie-design.scss
-- templates/respond-to/partials/design/_print-design.scss
-- templates/respond-to/partials/global/_base.scss
-- templates/respond-to/partials/global/_extendables.scss
-- templates/respond-to/partials/global/_functions.scss
-- templates/respond-to/partials/global/_mixins.scss
-- templates/respond-to/partials/global/_variables.scss
-- templates/respond-to/partials/layout/_ie-layout.scss
-- templates/respond-to/partials/layout/_layout.scss
-- templates/respond-to/partials/layout/_print-layout.scss
-- templates/respond-to/partials/styleguide/_style-guide.scss
-- templates/respond-to/print.scss
-- templates/respond-to/style.scss
+- templates/shared/_design.scss
+- templates/shared/_extendables.scss
+- templates/shared/_functions.scss
+- templates/shared/_ie-design.scss
+- templates/shared/_ie-layout.scss
+- templates/shared/_layout.scss
+- templates/shared/_mixins.scss
+- templates/shared/_print-design.scss
+- templates/shared/_print-layout.scss
+- templates/shared/_style-guide.scss
+- templates/shared/_variables.scss
+- templates/shared/hammer.js
+- templates/shared/ie.scss
+- templates/shared/loader.js
+- templates/shared/modernizr-2.5.3.js
+- templates/shared/print.scss
+- templates/shared/style.scss
 has_rdoc: true
 homepage: https://github.com/Snugug/toolkit
 licenses: []

data/stylesheets/toolkit/_progressive-enhancement.scss

@@ -1,57 +0,0 @@
-////////////////////////
-// Enhance From
-//
-// - $feature: Modernizr feature (base CSS class name)
-////////////////////////
-@mixin enhance-with($feature) {
-  .#{$feature} & {
-    @content;
-  }
-}
-
-////////////////////////
-// Degrade From
-//
-// - $feature: Modernizr feature (base CSS class name)
-////////////////////////
-@mixin degrade-from($feature) {
-  .no-#{$feature} &,
-  .no-js & {
-    @content;
-  }
-}
-
-////////////////////////
-// Progressive Enhancement Text Replace Mixin
-//
-// - $image-name: Name of the image file without extension. 
-// - $path-from-images: The path from your images folder where the .png and .svg are stored. They should be stored in the same folder.
-// - $sprite-name: The name of the folder your files are stored in in order to name the sprite. See Compass Image Spriting for more info.
-// - $inline: Whether or not the parent item is an inline item. If the item is inline, squish-text() needs to be used. Defaults to false.
-////////////////////////
-@mixin replace-text-pe($image-name, $path-from-images, $sprite-name, $inline: false) {
-  // Put the height/width of the image in
-  height: image-height('#{$path-from-images}/#{$image-name}.png');
-  width: image-width('#{$path-from-images}/#{$image-name}.png');
-  // Hide text. Use squish-text() if the element is inline
-  @if $inline {
-    @include squish-text();
-  }
-  @else {
-    @include hide-text();
-  }
-  // No repeating backgrounds, please.
-  background-repeat: no-repeat;
-  
-  @include enhance-with('svg') {
-    // Inline the SVG so that advanced browsers and future tech doesn't need the extra HTTP requests for the SVG
-    background-image: inline-image('#{$path-from-images}/#{$image-name}.svg');
-    // Set background size to ensure that our SVG is the right size.
-    background-size: image-width('#{$path-from-images}/#{$image-name}.png') image-height('#{$path-from-images}/#{$image-name}.png');
-  }
-  
-  @include degrade-from('svg') {
-    // Call the Sprite'd image's position.
-    @include #{$sprite-name}-sprite(#{$image-name});
-  }
-}

data/templates/project/embeds.respond.js

@@ -1,37 +0,0 @@
-jQuery(document).ready(function($) {
-  // Find all YouTube videos
-  var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com']");
-
-      // The element that is fluid width
-      $fluidEl = $("#content");
-
-  // Figure out and save aspect ratio for each video
-  $allVideos.each(function() {
-
-    $(this)
-      .data('aspectRatio', this.height / this.width)
-
-      // and remove the hard coded width/height
-      .removeAttr('height')
-      .removeAttr('width');
-
-  });
-
-  // When the window is resized
-  $(window).resize(function() {
-
-    var newWidth = $fluidEl.width();
-
-    // Resize all videos according to their own aspect ratio
-    $allVideos.each(function() {
-
-      var $el = $(this);
-      $el
-        .width(newWidth)
-        .height(newWidth * $el.data('aspectRatio'));
-
-    });
-
-  // Kick off one resize to fix all videos on page load
-  }).resize();
-});

data/templates/respond-to/embeds.respond.js

@@ -1,37 +0,0 @@
-jQuery(document).ready(function($) {
-  // Find all YouTube videos
-  var $allVideos = $("iframe[src^='http://player.vimeo.com'], iframe[src^='http://www.youtube.com']");
-
-      // The element that is fluid width
-      $fluidEl = $("#content");
-
-  // Figure out and save aspect ratio for each video
-  $allVideos.each(function() {
-
-    $(this)
-      .data('aspectRatio', this.height / this.width)
-
-      // and remove the hard coded width/height
-      .removeAttr('height')
-      .removeAttr('width');
-
-  });
-
-  // When the window is resized
-  $(window).resize(function() {
-
-    var newWidth = $fluidEl.width();
-
-    // Resize all videos according to their own aspect ratio
-    $allVideos.each(function() {
-
-      var $el = $(this);
-      $el
-        .width(newWidth)
-        .height(newWidth * $el.data('aspectRatio'));
-
-    });
-
-  // Kick off one resize to fix all videos on page load
-  }).resize();
-});