Added responsive grid to SCSS and started to apply it on templates#new

app/assets/stylesheets/application/common/mixins.scss.erb

@@ -57,32 +57,6 @@
 }
 .clearfix { @include clearfix; }
 
-// Grid System
-@mixin fixed-container {
-  width: $siteWidth;
-  margin-left: auto;
-  margin-right: auto;
-  @include clearfix();
-}
-.fixed-container { @include fixed-container; }
-@mixin columns($columnSpan: 1) {
-  width: ($gridColumnWidth * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1));
-}
-@mixin offset($columnOffset: 1) {
-  margin-left: ($gridColumnWidth * $columnOffset) + ($gridGutterWidth * ($columnOffset - 1)) + $extraSpace;
-}
-// Necessary grid styles for every column to make them appear next to each other horizontally
-@mixin gridColumn() {
-  display: inline;
-  float: left;
-  margin-left: $gridGutterWidth;
-}
-// makeColumn can be used to mark any element (e.g., .content-primary) as a column without changing markup to .span something
-@mixin makeColumn($columnSpan: 1) {
-  @include gridColumn();
-  @include columns($columnSapn);
-}
-
 
 // Gradients
 @mixin horizontal-gradient ($startColor: #555, $endColor: #333) {
@@ -128,6 +102,14 @@
          opacity: $opacity / 100;
 }
 
+// Box sizing
+@mixin box-sizing($boxmodel) {
+  -webkit-box-sizing: $boxmodel;
+     -moz-box-sizing: $boxmodel;
+      -ms-box-sizing: $boxmodel;
+          box-sizing: $boxmodel;
+}
+
 
 // Font Stacks
 @mixin shorthand-font($weight: normal, $size: 14px, $lineHeight: 20px) {
@@ -154,6 +136,17 @@
   line-height: $lineHeight;
 }
 
+
+// form fields
+
+@mixin input-block-level() {
+  display: block;
+  width: 100%;
+  min-height: 28px; // Make inputs at least the height of their button counterpart
+  @include box-sizing(border-box); // Makes inputs behave like true block-level elements
+}
+
+
 // IE7 inline-block
 // ----------------
 @mixin ie7-inline-block() {
@@ -182,3 +175,104 @@
     *margin-left: 0;
   }
 }
+
+
+@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
+  background-image: image_url($image_name + $extention);
+  $x2img : $image_name + '@2x' + $extention;
+
+  @media all and (-webkit-min-device-pixel-ratio : 1.5) {
+    background-image: image_url($x2img);
+    background-size: $w $h;
+  }  
+}
+
+
+// The Grid
+@mixin gridCore($columnWidth, $gutterWidth) {
+  .row {
+    margin-left: $gutterWidth * -1;
+    @include clearfix();
+  }
+
+  [class*="span"] {
+    float: left;
+    margin-left: $gutterWidth;
+  }
+
+  // Set the container width, and override it for fixed navbars in media queries
+  .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { @include gridCoreSpan($gridColumns, $columnWidth, $gutterWidth); }
+
+  @include gridCoreSpanX($gridColumns, $columnWidth, $gutterWidth);
+  @include gridCoreOffsetX($gridColumns, $columnWidth, $gutterWidth);
+}
+@mixin gridCoreSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .span#{$i} { @include gridCoreSpan($i, $columnWidth, $gutterWidth) };
+  }
+}
+@mixin gridCoreSpan($columns, $columnWidth, $gutterWidth) {
+  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
+}
+@mixin gridCoreOffsetX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .offset#{$i} { @include gridCoreOffset($i, $columnWidth, $gutterWidth); };
+  }
+}
+@mixin gridCoreOffset($columns, $columnWidth, $gutterWidth) {
+  margin-left: ($columnWidth * $columns) + ($gutterWidth * ($columns + 1));
+}
+
+// responsive grid
+
+@mixin gridFluid($columnWidth, $gutterWidth) {
+  .row-fluid {
+    width: 100%;
+    @include clearfix();
+    [class*="span"] {
+      @include input-block-level();
+      float: left;
+      margin-left: $gutterWidth;
+      *margin-left: $gutterWidth - (.5 / ($gridRowWidth/1px) * 100 * 1%);
+    }
+    [class*="span"]:first-child {
+      margin-left: 0;
+    }
+
+    // generate .spanX
+    @include gridFluidSpanX($gridColumns, $columnWidth, $gutterWidth);
+  }
+}
+@mixin gridFluidSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    .span#{$i} { @include gridFluidSpan($i, $columnWidth, $gutterWidth) };
+  }
+}
+@mixin gridFluidSpan($columns, $columnWidth, $gutterWidth) {
+  width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1));
+  *width: ($columnWidth * $columns) + ($gutterWidth * ($columns - 1)) - (.5 / ($gridRowWidth/1px) * 100 * 1%);
+}
+
+@mixin gridInput($columnWidth, $gutterWidth) {
+  input, textarea, .uneditable-input {
+    margin-left: 0; // override margin-left from core grid system
+  }
+
+  // generate .spanX
+  @include gridInputSpanX($gridColumns, $columnWidth, $gutterWidth);
+}
+@mixin gridInputSpanX($cols, $columnWidth, $gutterWidth) {
+  @for $i from 1 through $cols {
+    input.span#{$i}, textarea.span#{$i}, .uneditable-input.span#{$i} { @include gridInputSpan($i, $columnWidth, $gutterWidth); }
+  }
+}
+@mixin gridInputSpan($columns, $columnWidth, $gutterWidth) {
+  width: (($columnWidth) * $columns) + ($gutterWidth * ($columns - 1)) - 10;
+}
+
+@mixin makeFluidColumn($columns, $columnWidth, $gutterWidth) {
+  // This isn't perfect, but it's better than nothing.
+  float: left;
+  margin-left: $gutterWidth;
+  @include gridFluidSpan($columns, $columnWidth, $gutterWidth);
+}

app/assets/stylesheets/application/common/reset.scss.erb

@@ -6,8 +6,11 @@
 //////////////////
 
 html {
-	color: #000;
- 	background: #eeeeee image-url('layout/pagebg.gif') center center repeat;
+	// include background with retina mixin:
+	@include at2x('layout/pagebg', 12px, 12px, '.gif');
+	background-repeat: repeat;
+
+ 	color: #000;
  	font-family: $sans-body;
 	min-width: 800px;
 }

app/assets/stylesheets/application/common/variables.scss.erb

@@ -38,30 +38,71 @@ $linkColorHover:    darken($linkColor, 15);
 
 $sans-headers: 			"Myriad Pro", Helvetica, Arial, sans-serif;
 $sans-body: 				"Lucida Grande",Arial,sans-serif;
-
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif !default;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace !default;
 
 // OTHER VALUES:
 
+// Z-index master list
+// -------------------------
+// Used for a bird's eye view of components dependent on the z-axis
+// Try to avoid customizing these :)
+$zindexDropdown:          1000;
+$zindexPopover:           1010;
+$zindexTooltip:           1020;
+$zindexFixedNavbar:       1030;
+$zindexModalBackdrop:     1040;
+$zindexModal:             1050;
+
+
+
 $main-width: 				980px;
 
 // Baseline grid
 $basefont:          13px;
 $baseline:          18px;
+$baseFontSize:          13px !default;
+$baseFontFamily:        sans-headers !default;
+$baseLineHeight:        18px !default;
+$altFontFamily:         $serifFontFamily !default;
 
-// Griditude
-// Modify the grid styles in mixins
-$gridColumns:       16;
-$gridColumnWidth:   40px;
-$gridGutterWidth:   20px;
-$extraSpace:        ($gridGutterWidth * 2); // For our grid calculations
-$siteWidth:         ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
 
-// Z-index master list
-// Used for a bird's eye view of components dependent on the z-axis
-// Try to avoid customizing these :)
-$zindexDropdown:        1000;
-$zindexPopover:         1010;
-$zindexTooltip:         1020;
-$zindexFixedNavbar:     1030;
-$zindexModalBackdrop:   1040;
-$zindexModal:           1050;
+// FIXED GRID
+// --------------------------------------------------
+
+// Default, 940px
+// -------------------------
+$gridColumns:             12 !default;
+$gridColumnWidth:         60px !default;
+$gridGutterWidth:         20px !default;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
+
+// Portrait tablet to default desktop
+// -------------------------
+$gridColumnWidthTablet:   42px !default;
+$gridGutterWidthTablet:   20px !default;
+
+// Large desktop and up
+// -------------------------
+$gridColumnWidthLarge:    70px !default;
+$gridGutterWidthLarge:    30px !default;
+
+
+
+/// FLUID GRID
+// --------------------------------------------------
+
+// Default
+// -------------------------
+$fluidGridColumnWidth:         6.382978723% !default;
+$fluidGridGutterWidth:         2.127659574% !default;
+
+// Portrait tablet to default desktop
+// -------------------------
+$fluidGridColumnWidthTablet:   5.801104972% !default;
+$fluidGridGutterWidthTablet:   2.762430939% !default;
+
+// Large desktop and up
+// -------------------------
+$fluidGridColumnWidthLarge:    5.982905983% !default;
+$fluidGridGutterWidthLarge:    2.564102564% !default;

app/assets/stylesheets/application/index-manifest.scss

@@ -20,3 +20,9 @@
 @import "layout/modalselector";
 @import "layout/alerts-badges";
 @import "layout/screenmodel";
+
+@import "layout/responsive-utilities";
+@import "layout/responsive-767px-max";
+@import "layout/responsive-768px-979px";
+@import "layout/responsive-1200px-min";
+

app/assets/stylesheets/application/layout/responsive-1200px-min.scss.erb

@@ -0,0 +1,26 @@
+// LARGE DESKTOP & UP
+// ------------------
+
+@media (min-width: 1200px) {
+
+  // Fixed grid
+  @include gridCore($gridColumnWidthLarge, $gridGutterWidthLarge);
+
+  // Fluid grid
+  @include gridFluid($fluidGridColumnWidthLarge, $fluidGridGutterWidthLarge);
+
+  // Input grid
+  @include gridInput($gridColumnWidthLarge, $gridGutterWidthLarge);
+
+  // Thumbnails
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
+  .row-fluid .thumbnails {
+    margin-left: 0;
+  }
+
+}