stipe 0.0.5.2 → 0.0.5.3

data/stylesheets/stipe/_manifest.scss

@@ -8,3 +8,4 @@
 @import "gradients";
 @import "forms";
 @import "buttons";
+@import "plug-ins";

data/stylesheets/stipe/_media.scss

@@ -11,4 +11,9 @@ $tablet:                    "screen and (max-width: 64em)" !default;
 $tablet_portrait:           "screen and (max-width: 64em) and (orientation: portrait)" !default;
 $tablet_landscape:          "screen and (max-width: 64em) and (orientation: landscape)" !default;
 
-$desktop:                   "screen and (max-width: 120em) and (min-width: 50em)" !default;
+$desktop:                   "screen and (max-width: 120em) and (min-width: 50em)" !default;
+
+$hidpi:                     "(-webkit-min-device-pixel-ratio: 1.3), 
+                             (-o-min-device-pixel-ratio: 2.6/2), 
+                             (min--moz-device-pixel-ratio: 1.3), 
+                             (min-device-pixel-ratio: 1.3),(min-resolution: 1.3dppx)" !default;

data/stylesheets/stipe/_plug-ins.scss

@@ -0,0 +1,3 @@
+// General manifest of plug-in awesome from other projects
+
+@import "plug-ins/hidpi";

data/stylesheets/stipe/plug-ins/_hidpi.scss

@@ -0,0 +1,32 @@
+// Inspired by Tim Kadlec | Media Query & Asset Downloading Results
+// http://timkadlec.com/2012/04/media-query-asset-downloading-results/
+
+// Inspired by kaelig / hidpi
+// https://github.com/kaelig/hidpi
+// hidpi() is a Sass mixin that serves high resolution graphics to high density (Retina-like) displays
+
+$extension: png !default;
+
+@mixin hidpi($image: false, $extension: $extension) {
+  @if $image {
+    background: url('#{$imgDir}#{$image}.#{$extension}') no-repeat;
+  }
+  @media #{$hidpi} {
+    @if $image {
+      $image-hidpi-fullname: '#{$imgDir}#{$image}_x2.#{$extension}';
+      background: url($image-hidpi-fullname) no-repeat;
+      @content;
+    } 
+    @else {
+      @content;
+    }
+  }
+}
+
+@mixin hidpi-image ($image: false, $width: false, $height: false, $extension: $extension) {
+  width: em($width);
+  height: em($height);
+  @include hidpi ($image, $extension) {
+    background-size: em($width) em($height);
+  }
+}

data/stylesheets/stipe/plug-ins/readme.md

@@ -0,0 +1,45 @@
+#Stipe Plug-Ins
+The following is a growing list of awesome work from others that I felt would be awesome to include in the Toadstool framework.
+
+##Retinafy your website with Sass & Compass
+Inspired by Kaelig's [`hidpi()` mixin](https://github.com/kaelig/hidpi) and [Tim Kadlec's work](http://timkadlec.com/2012/04/media-query-asset-downloading-results/) on optimizing the delivering of images, Stipe supports a simple mixing to 'retinafy' your site.
+
+##How to use
+Using Stipe's hidpi support you can either retinafy common elements in the UI or serve up different images.  
+
+###hidpi common elements
+Example: alter a visual element based on the resolution of the device, you could do the following:
+
+```scss
+#logo {
+  border: 1px solid green;
+  width: 100%;
+  height: 200px;
+  float: left;
+  @include hidpi {
+    border: 1px solid orange;
+  }
+}
+```
+
+In this example, all standard def devices will get the base green border. But anything that falls within the hidpi device spectrum will get the orange border. 
+
+###hidpi images
+The more common case is that you need to address two different resolution images. The process is simple. Use the `hidpi-image` mixing and pass in a few simple arguments. `$image`, `$width` and `$height`. By default the file extension is set to `png`, but you can change that with the final argument `$extension`.
+
+The trick to the hipdi solution is that you need to place a corresponding image in the same directory with `_x2` in the name. Example `logo_x2.png` would work. 
+
+Simply write your CSS rule like the following:
+
+```scss
+#logo {
+  @include hidpi-image (logo, 250, 188);
+}
+```
+
+If you were to want to use a `.jpg` file, it would look something like this:
+```scss
+#logo {
+  @include hidpi-image (logo, 250, 188, jpg);
+}
+```

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stipe
 version: !ruby/object:Gem::Version
-  version: 0.0.5.2
+  version: 0.0.5.3
   prerelease: 
 platform: ruby
 authors:
@@ -59,6 +59,7 @@ files:
 - stylesheets/stipe/_grid.scss
 - stylesheets/stipe/_manifest.scss
 - stylesheets/stipe/_media.scss
+- stylesheets/stipe/_plug-ins.scss
 - stylesheets/stipe/_stipe.scss
 - stylesheets/stipe/_typography.scss
 - stylesheets/stipe/buttons/_extends.scss
@@ -85,6 +86,8 @@ files:
 - stylesheets/stipe/grid/lib/_push_logic.scss
 - stylesheets/stipe/grid/lib/_the_grid.scss
 - stylesheets/stipe/grid/readme.md
+- stylesheets/stipe/plug-ins/_hidpi.scss
+- stylesheets/stipe/plug-ins/readme.md
 - stylesheets/stipe/resets/_eric_meyer.scss
 - stylesheets/stipe/resets/_toadstool.scss
 - stylesheets/stipe/stipe/_extends.scss