switch to app.net style yui3 grid mixins

Thanks @voidfiles
https://gist.github.com/voidfiles/3362608

h/css/base.scss

@@ -79,16 +79,6 @@ $score-height: $score-width;
 $heatmap-width: 22px;
 $input-border-radius: 2px;
 
-// Grid
-$gridColumns: 12 !default;
-$gridColumnWidth: 48 !default;
-$gridGutterWidth: 24 !default;
-$em: 14 / 1em !default;
-
-@function grid($cols:1) {
-  @return (($cols * $gridColumnWidth) + (($cols - 1) * $gridGutterWidth)) / $em;
-}
-
 /* Shadow mixins */
 @mixin smallshadow($a: 2px, $b: 2px, $c: .1) {
   @include box-shadow($a $b 3px hsla(0, 0%, 0%, $c));

h/css/common.scss

@@ -2,6 +2,9 @@
 
 @import 'reset';
 @import 'base';
+@import 'responsive';
+@import 'yui_grid';
+
 
 $sansFontFamily: "Source Sans Pro", $sansFontFamily;
 $serifFontFamily: "Merriweather", $serifFontFamily;
@@ -38,6 +41,20 @@ em { font-style: italic; }
 html {
   font-size: $baseFontSize / 16px * 1em;
   line-height: $baseLineHeight / 16px * 1em;
+
+  @include yui_grid();
+
+  @include respond-to(handhelds) {
+    @include yui_grid('h-');
+  }
+
+  @include respond-to(wide-handhelds) {
+    @include yui_grid('wh-');
+  }
+
+  @include respond-to(tablets) {
+    @include yui_grid('t-');
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {

h/css/responsive.scss

+$break-small: 479px !default;
+$break-large: 911px !default;;
+
+@mixin respond-to($media) {
+  @if type-of($media) == string {
+    @if $media == handhelds {
+      @media only screen and (max-width: $break-small) { @content; }
+    }
+    @else if $media == wide-handhelds {
+      @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+    }
+    @else if $media == tablets {
+      @media only screen and (min-width: $break-large) { @content; }
+    }
+  }
+  @else if type-of($media) == list {
+    @if index($media, handhelds) != false {
+      @media only screen and (max-width: $break-small) { @content; }
+    }
+    @if index($media, wide-handhelds) != false {
+      @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+    }
+    @if index($media, tablets) != false {
+      @media only screen and (min-width: $break-large) { @content; }
+    }
+  }
+}

h/css/site.scss

@@ -12,6 +12,24 @@ body {
   font-family: $serifFontFamily;
 }
 
+header {
+  @include respond-to(handhelds) {
+    text-align: center;
+  }
+
+  @include respond-to(wide-handhelds tablets) {
+    @include pie-clearfix;
+    text-align: left;
+    img { float: left; }
+  }
+
+  margin-bottom: 2em;
+
+  hgroup h1 {
+    margin-bottom: 0 !important;
+  }
+}
+
 section {
   margin: 2em 0;
 }
@@ -43,90 +61,21 @@ ol {
   border: 1px dashed $gray;
 }
 
-#toolbar {
-  font-size: .9em;
-  position: absolute;
-  text-align: center;
-  width: 100%;
-
-  & > div {
-    margin: .5em 0;
-    width: 100%;
-  }
-}
-
-hgroup {
-  h1 {
-    margin-bottom: 0 !important;
-  }
-}
-
-/*
-    Mobile layout
-    240-479 px
-    Zoomed out below 320 px
-*/
-
-@media screen and (min-width: 15em) {
-  .auth { width: 100%; }
-
-  .content { padding: 3em 1em; }
-
-  header {
-    margin-bottom: 2em;
-    text-align: center;
+.content {
+  @include respond-to(handhelds) {
+    padding: 3em 1em;
   }
-}
-
-/*
-    Wide mobile layout
-    480-767 px
-    Zoomed in above 480 px
-*/
 
-@media screen and (min-width: 30em) {
-  .auth { width: grid(4); }
-
-  header {
-    @include pie-clearfix;
-    text-align: left;
-    img { float: left; }
-  }
-}
-
-/*
-    Tablet layout
-    600-911 px
-    Zoomed in above 600 px
-*/
-
-@media screen and (min-width: 37.5em) {
-  .content { padding: 6em; }
-}
-
-/*
-    Widescreen layout
-    912-1887 px
-    Zoomed in above 912 px
-*/
-
-@media screen and (min-width: 57em) {
-  .content {
-    max-width: grid(12);
+  @include respond-to(tablets) {
+    padding: 6em;
     margin: auto;
+    max-width: $break-large;
   }
+}
 
-  .topbar .inner {
-    max-width: grid(12);
+.topbar .inner {
+  @include respond-to(tablets) {
+    max-width: $break-large;
     margin: 0 auto;
   }
 }
-
-/*
-    Huge-screen layout
-    1888-2520 px
-    Zoomed in above 1920 px
-*/
-
-@media screen and (min-width: 118em) {
-}

h/css/yui_grid.scss

+/*
+  Namespace-aware yui_grid mixin courtesy of Alex Kissinger (@voidfiles).
+  https://gist.github.com/voidfiles/3362608
+*/
+@import 'responsive';
+
+@mixin yui_grid($namespace:'') {
+  /*
+    Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+    Code licensed under the BSD License:
+    http://developer.yahoo.com/yui/license.html
+    version: 3.3.0
+    build: 3167
+    */
+  .#{$namespace}yui3-g {
+    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
+    *letter-spacing: normal; /* reset IE < 8 */
+    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
+  }
+
+  .#{$namespace}yui3-u,
+  .#{$namespace}yui3-u-1,
+  .#{$namespace}yui3-u-1-2,
+  .#{$namespace}yui3-u-1-3,
+  .#{$namespace}yui3-u-2-3,
+  .#{$namespace}yui3-u-1-4,
+  .#{$namespace}yui3-u-3-4,
+  .#{$namespace}yui3-u-1-5,
+  .#{$namespace}yui3-u-2-5,
+  .#{$namespace}yui3-u-3-5,
+  .#{$namespace}yui3-u-4-5,
+  .#{$namespace}yui3-u-1-6,
+  .#{$namespace}yui3-u-5-6,
+  .#{$namespace}yui3-u-1-8,
+  .#{$namespace}yui3-u-3-8,
+  .#{$namespace}yui3-u-5-8,
+  .#{$namespace}yui3-u-7-8,
+  .#{$namespace}yui3-u-1-12,
+  .#{$namespace}yui3-u-5-12,
+  .#{$namespace}yui3-u-7-12,
+  .#{$namespace}yui3-u-11-12,
+  .#{$namespace}yui3-u-1-24,
+  .#{$namespace}yui3-u-5-24,
+  .#{$namespace}yui3-u-7-24,
+  .#{$namespace}yui3-u-11-24,
+  .#{$namespace}yui3-u-13-24,
+  .#{$namespace}yui3-u-17-24,
+  .#{$namespace}yui3-u-19-24,
+  .#{$namespace}yui3-u-23-24 {
+    display: inline-block;
+    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
+    letter-spacing: normal;
+    word-spacing: normal;
+    vertical-align: top;
+  }
+
+  .#{$namespace}yui3-u-1 {
+    display: block;
+    width: auto;
+  }
+
+  .#{$namespace}yui3-u-1-2 {
+    width: 50%;
+  }
+
+  .#{$namespace}yui3-u-1-3 {
+    width: 33.33333%;
+  }
+
+  .#{$namespace}yui3-u-2-3 {
+    width: 66.66666%;
+  }
+
+  .#{$namespace}yui3-u-1-4 {
+    width: 25%;
+  }
+
+  .#{$namespace}yui3-u-3-4 {
+    width: 75%;
+  }
+
+  .#{$namespace}yui3-u-1-5 {
+    width: 20%;
+  }
+
+  .#{$namespace}yui3-u-2-5 {
+    width: 40%;
+  }
+
+  .#{$namespace}yui3-u-3-5 {
+    width: 60%;
+  }
+
+  .#{$namespace}yui3-u-4-5 {
+    width: 80%;
+  }
+
+  .#{$namespace}yui3-u-1-6 {
+    width: 16.656%;
+  }
+
+  .#{$namespace}yui3-u-5-6 {
+    width: 83.33%;
+  }
+
+  .#{$namespace}yui3-u-1-8 {
+    width: 12.5%;
+  }
+
+  .#{$namespace}yui3-u-3-8 {
+    width: 37.5%;
+  }
+
+  .#{$namespace}yui3-u-5-8 {
+    width: 62.5%;
+  }
+
+  .#{$namespace}yui3-u-7-8 {
+    width: 87.5%;
+  }
+
+  .#{$namespace}yui3-u-1-12 {
+    width: 8.3333%;
+  }
+
+  .#{$namespace}yui3-u-5-12 {
+    width: 41.6666%;
+  }
+
+  .#{$namespace}yui3-u-7-12 {
+    width: 58.3333%;
+  }
+
+  .#{$namespace}yui3-u-11-12 {
+    width: 91.6666%;
+  }
+
+  .#{$namespace}yui3-u-1-24 {
+    width: 4.1666%;
+  }
+
+  .#{$namespace}yui3-u-5-24 {
+    width: 20.8333%;
+  }
+
+  .#{$namespace}yui3-u-7-24 {
+    width: 29.1666%;
+  }
+
+  .#{$namespace}yui3-u-11-24 {
+    width: 45.8333%;
+  }
+
+  .#{$namespace}yui3-u-13-24 {
+    width: 54.1666%;
+  }
+
+  .#{$namespace}yui3-u-17-24 {
+    width: 70.8333%;
+  }
+
+  .#{$namespace}yui3-u-19-24 {
+    width: 79.1666%;
+  }
+
+  .#{$namespace}yui3-u-23-24 {
+    width: 95.8333%;
+  }
+
+  .#{$namespace}yui3-u-none {
+    display: none;
+  }
+
+}