Vertical center

README.md

@@ -30,6 +30,7 @@ Think of Toolkit as your swiss army knife for Progressive Enhancement and Respon
 1. [Webfont Helpers](#webfont-helpers)
 	* [Enable Ligatures](#enable-ligatures)
 	* [Content Fade In](#content-fade-in)
+1. [Vertical center](#vertical-center)
 1. [Viewport](#viewport)
 1. [Element Queries](#element-queries)
 1. [Carousels](#carousels)
@@ -958,6 +959,20 @@ One of the big challenges of working with webfonts is the Flash of Unstyled Text
 }
 ```
 
+## Vertical center
+
+Vertical center anything, literally anything, with the `vertical center` mixin. Based on [Sebastian Ekström’s vertical align technique](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/).
+
+```Sass
+@include vertical-center;
+```
+
+You can also shift the midpoint to somthing other than 50% center.
+
+```Sass
+@include vertical-center(40%);
+```
+
 ## Viewport
 
 Currently in the Draft stage, but being implemented by Microsoft is the CSS directive [`@viewport`](http://dev.w3.org/csswg/css-device-adapt/#the-atviewport-rule). This mixin simply provides prefixing for the directive:

compass/stylesheets/_toolkit.scss

@@ -16,4 +16,5 @@
 @import "toolkit/pe";
 @import "toolkit/properties";
 @import "toolkit/triangle";
+@import "toolkit/vertical-center";
 @import "toolkit/viewport";

compass/stylesheets/toolkit/_parallax.scss

@@ -1,6 +1,6 @@
 // Magic parallax mixins
 @mixin parallax-init($perspective: null, $element: null, $parallax-ios: null) {
-  
+
   $perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
   $element: if($element != null, $element, toolkit-get('parallax element'));
   $parallax-ios: if($parallax-ios != null, $parallax-ios, toolkit-get('parallax ios'));
@@ -16,38 +16,44 @@
   }
   #{$element} {
     overflow: auto;
-    -webkit-perspective: $perspective * 1px;
-    -moz-perspective: $perspective * 1px;
-    -ms-perspective: $perspective * 1px;
-    -o-perspective: $perspective * 1px;
-    perspective: $perspective * 1px;
+    @if mixin-exists(perspective) {
+      @include perspective($perspective * 1px);
+    }
+    @else {
+      -webkit-perspective: $perspective * 1px;
+      perspective: $perspective * 1px;
+    }
     // Allows for smooth scrolling but disables parallax effects.
     @if $parallax-ios == false {
       -webkit-overflow-scrolling: touch;
     }
     // Make sure 3D perspective is preserved
     &, & * {
-      -webkit-transform-style: preserve-3d;
-      -moz-transform-style: preserve-3d;
-      -ms-transform-style: preserve-3d;
-      -o-transform-style: preserve-3d;
-      transform-style: preserve-3d;
+      @if mixin-exists(transform-style) {
+  @include transform-style(preserve-3d);
+      }
+      @else {
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+      }
     }
   }
 }
 
 @mixin parallax($distance: null, $perspective: null) {
-  
+
   $distance: if($distance != null, $distance, toolkit-get('parallax distance'));
   $perspective: if($perspective != null, $perspective, toolkit-get('parallax perspective'));
-
-  $transform: translateZ($distance * $perspective * 1px)
-    scale(abs($distance - 1));
 
-  -webkit-transform: $transform;
-  -moz-transform: $transform;
-  -ms-transform: $transform;
-  -o-transform: $transform;
-  transform: $transform;
+  $transform: translateZ($distance * $perspective * 1px) scale(abs($distance - 1));
+
+  @if mixin-exists(transform) {
+    @include transform($transform);
+  }
+  @else {
+    -webkit-transform: $transform;
+    transform: $transform;
+  }
+
   z-index: $distance * 100;
 }

compass/stylesheets/toolkit/_settings.scss

@@ -26,16 +26,14 @@ $Toolkit-Settings: (
   'parallax element': 'body',
   'parallax ios': true,
   'parallax distance': 0,
+  'vertical midpoint': 50%,
 );
 
 //////////////////////////////
 // User Settings
 //////////////////////////////
 $toolkit: () !default;
 
-//////////////////////////////
-// Has Setting
-//////////////////////////////
 //////////////////////////////
 // Has Setting
 //////////////////////////////

compass/stylesheets/toolkit/_vertical-center.scss

@@ -0,0 +1,16 @@
+// Vertically center anything, literally anything.
+// http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
+@mixin vertical-center($midpoint: null) {
+
+  $midpoint: if($midpoint != null, $midpoint, toolkit-get('vertical midpoint'));
+
+  position: relative;
+  top: $midpoint;
+  @if mixin-exists(transform) {
+    @include transform(translateY(-50%));
+  } @else {
+    -webkit-transform: translateY(-50%);
+    -ms-transform: translateY(-50%);
+    transform: translateY(-50%);
+  }
+}