toolkit 0.1.18 → 0.2

data/stylesheets/toolkit/_clearfix.scss

@@ -58,4 +58,72 @@
   content: "";
   display: table;
   clear: both;
+}
+
+//////////////////////////////
+// Massive Clearfix Mixin
+//
+// Clearfix mixin for all of your clearfixing needs. Will choose the right mixin for you.
+// Can choose whether to extend or to write.
+//////////////////////////////
+$clearfix-extend: false !default;
+$legacy-support-for-mozilla: true !default;
+
+@mixin clearfix($extend: $clearfix-extend) {
+  @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
+    @if $extend {
+      @extend %clearfix-micro;
+    }
+    @else {
+      /* for IE 6/7 */
+      *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+      /* non-JS fallback */
+      *zoom: 1;
+
+      &:before,
+      &:after {
+        content: "";
+        display: table;
+      }
+
+      &:after {
+        clear: both;
+      }
+    }
+  }
+  @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
+    @if $extend {
+      @extend %clearfix-legacy;
+    }
+    @else {
+      /* for IE 6/7 */
+      *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
+      /* non-JS fallback */
+      *zoom: 1;
+
+      &:before,
+      &:after {
+        content: ".";
+        display: block;
+        height: 0;
+        overflow: hidden;
+      }
+
+      &:after {
+        clear: both;
+      }
+    }
+  }
+  @else {
+    @if $extend {
+      @extend %clearfix
+    }
+    @else {
+      &:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
+  }
 }

data/stylesheets/toolkit/_fluid-media.scss

@@ -1,7 +1,7 @@
 ////////////////////////
-// Fluid Images
+// Fluid Images and Video
 ////////////////////////
-img {
+img, video {
   max-width: 100%;
   height: auto;
 }
@@ -11,19 +11,24 @@ img {
 //
 // From the outrageously awesome Scott Kellum
 ////////////////////////
-@mixin scale-elements($ratio: 16/9, $width: 100%, $elements: '*', $no-extend: false) {
-  @if $no-extend {
+$intrinsic-ratio: 16/9 !default;
+$intrinsic-ratio-width: 100% !default;
+$intrinsic-ratio-elements: '*' !default;
+$intrinsic-ratio-extend: true !default;
+
+@mixin intrinsic-ratio($ratio: $intrinsic-ratio-extend, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
+  @if not $extend {
     position: relative;
     height: 0;
   }
   @else {
-    @extend %scaling-elements-parent;
+    @extend %intrinsic-ratio-parent;
   }
   padding-top: (1 / $ratio) * $width;
   width: $width;
   @each $element in $elements {
     > #{$element} {
-      @if $no-extend {
+      @if not $extend {
         display: block;
         position: absolute;
         width: 100%;
@@ -33,18 +38,18 @@ img {
         padding: 0;
       }
       @else {
-        @extend %scaling-elements-child;
+        @extend %intrinsic-ratio-child;
       }
     }
   }
 }
 
-%scaling-elements-parent {
+%intrinsic-ratio-parent {
   position: relative;
   height: 0;
 }
 
-%scaling-elements-child {
+%intrinsic-ratio-child {
   display: block;
   position: absolute;
   width: 100%;

data/stylesheets/toolkit/_pe.scss

@@ -37,18 +37,42 @@
 // - $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($img-path, $sprite, $inline-svg: true, $with-dimensions: true, $inline-element: false) {
-  // Map Out the Sprite
+$replace-text-pe-method: 'svg' !default;
+$replace-text-pe-inline-svg: true !default;
+$replace-text-pe-with-dimensions: true !default;
+$replace-text-inline-element: false !default;
+
+@mixin replace-text-pe($img-path, $sprite, $method: $replace-text-pe-method, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions, $inline-element: $replace-text-inline-element) {
+  // Hide text. Use squish-text() if the element is inline
+  @if $inline-element {
+    @extend %replace-text-pe-squish;
+  }
+  @else {
+    @extend %replace-text-pe-hide;
+  }
+  
+  @if $method == 'svg' {
+    @include svg-background($img-path, $sprite, $inline-svg, $with-dimensions);
+  }
+  @else if $method == 'retina' {
+    @include retina-background($img-path, $sprite, $with-dimensions);
+  }
+  
+}
+
+//////////////////////////////
+// SVG Background Image with Fallback
+//////////////////////////////
+@mixin svg-background($img-path, $sprite, $inline-svg: $replace-text-pe-inline-svg, $with-dimensions: $replace-text-pe-with-dimensions) {
   $png-path: $img-path + '/*.png';
   $sprite-map: sprite-map($png-path);
   
   // Build SVG file name
-//  $svg-file: str-replace('*.png', '#{$sprite}.svg', $png-path);
   $svg-file: $img-path + '/#{$sprite}.svg';
   
   // Default Sprite File
   $sprite-file: '' !default;
-  
+
   @if $with-dimensions {
     // Get Sprite File for Height/Width
     $sprite-file: sprite-file($sprite-map, $sprite);
@@ -58,15 +82,6 @@
     height: image-height($sprite-file);
   }
   
-  // Hide text. Use squish-text() if the element is inline
-  @if $inline-element {
-    @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 {
@@ -92,6 +107,79 @@
   }
 }
 
+//////////////////////////////
+// Retina Background Image with Fallback
+//////////////////////////////
+@mixin retina-background($img-path, $sprite, $with-dimensions: $replace-text-pe-with-dimensions) {
+  $png-path: $img-path + '/*.png';
+  $sprite-map: sprite-map($png-path);
+  
+  $png2x-path: $img-path + '_2x/*.png';
+  $retina-map: sprite-map($png2x-path);
+  
+  // Default Sprite File
+  $sprite-file: '' !default;
+
+  @if $with-dimensions {
+    // Get Sprite File for Height/Width
+    $sprite-file: sprite-file($sprite-map, $sprite);
+    
+    width: image-width($sprite-file);
+    height: image-height($sprite-file);
+  }
+  
+  .ie6 &,
+  .ie7 &,
+  .ie8 & {
+    @extend %#{sprite-map-name($sprite-map)}-image-map-fallback;
+    @include sprite($sprite-map, $sprite);
+  }
+
+  //////////////////////////////
+  // Ugly Hack
+  //
+  // Due to a bug plus a design decision, I cannot extend the background image
+  //   like I would like to or you would do by hand. This sucks, but it's the
+  //   only way to get it to work for now.
+  //////////////////////////////
+  @media (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (-o-max-device-pixel-ratio: 7/5), (min-resolution: 1.4dppx), (min-resolution: 134.4dpi) {
+    background: {
+      image: $sprite-map;
+      repeat: no-repeat;
+    }
+    @include sprite($sprite-map, $sprite);
+  }
+  @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+    background: {
+      image: $retina-map;
+      repeat: no-repeat;
+    }
+    @if $with-dimensions {
+      background-size: image-width($sprite-file) image-height($sprite-file);
+    }
+    @include sprite($retina-map, $sprite);
+  }
+  
+    //////////////////////////////
+    // Actual Hotness
+    //
+    // Do to a bug plus a design decision, I cannot extend the background image
+    //   like I would like to or you would do by hand. This is how it'll work
+    //   when I can.
+    //////////////////////////////
+//  @media (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (-o-max-device-pixel-ratio: 7/5), (min-resolution: 1.4dppx), (min-resolution: 134.4dpi) {
+//      @extend %#{sprite-map-name($png-path)}-image-map;
+//      @include sprite($png-path, $sprite)
+//    }
+//    @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+//      @extend %#{sprite-map-name($png2x-path)}-image-map;
+//      @include sprite($retina-map, $sprite);
+//      @if $with-dimensions {
+//        background-size: image-width($sprite-file) image-height($sprite-file);
+//      }
+//    }
+}
+
 //////////////////////////////
 // Sprite Map Generator
 //
@@ -99,15 +187,48 @@
 //
 // - $png-path: The path to the pngs for the image sprite, including the *.png (just like normal image sprites)
 //////////////////////////////
-@mixin sprite-map-generator($img-path) {
+@mixin sprite-map-generator($img-path, $method: $replace-text-pe-method) {
   $png-path: $img-path + '/*.png';
   $png-path: sprite-map($png-path);
-  %#{sprite-map-name($png-path)}-image-map {
-    background: {
-      image: $png-path;
-      repeat: no-repeat;
+  
+  @if $method == 'retina' {
+    $png2x-path: $img-path + '_2x/*.png';
+    $png2x-path: sprite-map($png2x-path);
+    
+    %#{sprite-map-name($png-path)}-image-map-fallback {
+      background: {
+        image: $png-path;
+        repeat: no-repeat;
+      }
+    }
+    
+    @media (-webkit-max-device-pixel-ratio: 1.4), (max--moz-device-pixel-ratio: 1.4), (-o-max-device-pixel-ratio: 7/5), (min-resolution: 1.4dppx), (min-resolution: 134.4dpi) {
+      %#{sprite-map-name($png-path)}-image-map {
+        background: {
+          image: $png-path;
+          repeat: no-repeat;
+        }
+      }
+    }
+    @media (-webkit-max-device-pixel-ratio: 1.5), (max--moz-device-pixel-ratio: 1.5), (-o-max-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx), (min-resolution: 144dpi) {
+      %#{sprite-map-name($png2x-path)}-image-map {
+        background: {
+          image: $png2x-path;
+          repeat: no-repeat;
+        }
+      }
+    }
+  }
+  @else {
+    %#{sprite-map-name($png-path)}-image-map {
+      background: {
+        image: $png-path;
+        repeat: no-repeat;
+      }
     }
   }
+  
+  
 }
 
 //////////////////////////////

metadata

@@ -4,9 +4,8 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 0
-  - 1
-  - 18
-  version: 0.1.18
+  - 2
+  version: "0.2"
 platform: ruby
 authors: 
 - Sam Richard
@@ -15,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2011-10-10 00:00:00 -04:00
+date: 2011-10-17 00:00:00 -04:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency