Simpler Susy grid

bensmithett · Oct 22, 2013 · f948f21 · f948f21
1 parent 7d3c738
commit f948f21
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 84 deletions.
diff --git a/index.html b/index.html
@@ -1,24 +1,18 @@
 <!DOCTYPE html>
-<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if lte IE 8]> <html class="no-js lt-ie9 fixed-layout"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
   <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
     <title>Example</title>
 
-    <!--[if gt IE 9]><!-->
+    <!--[if gt IE 8]><!-->
       <link rel="stylesheet" href="css/application.css" />
     <!--<![endif]-->
 
-    <!--[if IE 9]>
-      <link rel="stylesheet" href="css/application-ie9.css" />
-    <![endif]-->
-
-    <!--[if IE 8]>
-      <link rel="stylesheet" href="css/application-ie8.css" />
-    <![endif]-->
-
-    <!--[if IE 7]>
-      <link rel="stylesheet" href="css/application-ie7.css" />
+    <!--[if lte IE 8]>
+      <link rel="stylesheet" href="css/application-lt-ie9.css" />
     <![endif]-->
   </head>
 

diff --git a/stylesheets/_config.sass b/stylesheets/_config.sass
@@ -1,15 +1,14 @@
-// IE version variables
+// Responsive
 // ------------------------------------------------
-$ie7: false !default
-$ie8: false !default
-$ie9: false !default
-$lt-ie9: $ie7 or $ie8
+$responsive: true !default
 
-// Compass cross-browser support configuration
-// http://compass-style.org/reference/compass/support/
+
+// Cross browser support settings
+// ------------------------------------------------
+$lt-ie9: false !default
 $legacy-support-for-ie6: false
-$legacy-support-for-ie7: $ie7
-$legacy-support-for-ie8: $ie8
+$legacy-support-for-ie7: $lt-ie9
+$legacy-support-for-ie8: $lt-ie9
 
 
 // Vertical rhythm settings
@@ -27,43 +26,27 @@ $green: #20e320
 
 // Font stacks
 // ------------------------------------------------
-$sans-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif
+$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif
 
 
-// Susy: grid container settings
-// ------------------------------------------------
-$container-style: magic
-
-// Mobile first default grid settings
-// http://gridcalculator.dk/#/568/4/20/10
+// Susy
+// ------------------------
+// Grid settings
+$container-style: fluid
 $total-columns: 4
-$column-width: pxtoem(122px, $base-font-size)
-$gutter-width: pxtoem(20px, $base-font-size)
-$grid-padding: pxtoem(10px, $base-font-size)
-
-// Tablet grid settings
-// http://gridcalculator.dk/#/1024/8/20/10
-$tablet-total-columns: 8
-$tablet-column-width: pxtoem(108px, $base-font-size)
-$tablet-gutter-width: pxtoem(20px, $base-font-size)
-$tablet-grid-padding: pxtoem(10px, $base-font-size)
+$column-width: pxtoem(65px)
+$gutter-width: pxtoem(20px)
+$grid-padding: pxtoem(10px)
 
-// Desktop grid settings
-// http://gridcalculator.dk/#/1024/12/16/10
-$desktop-total-columns: 12
-$desktop-column-width: pxtoem(69px, $base-font-size)
-$desktop-gutter-width: pxtoem(16px, $base-font-size)
-$desktop-grid-padding: pxtoem(10px, $base-font-size)
-
-
-// Susy: responsive breakpoint settings
-// ------------------------------------------------
 // Breakpoints
-$tablet:      pxtoem(569px, $base-font-size) lt-ie9
-$tablet-only: pxtoem(569px, $base-font-size) 8 pxtoem(1024px, $base-font-size)
-$tablet-max:  8 pxtoem(1024px, $base-font-size)
-$desktop:     pxtoem(1025px, $base-font-size) lt-ie9
-
-// In IE7 & 8 at-breakpoint() blocks are scoped to a .lt-ie9 class instead of desktop or tablet media queries.
-$breakpoint-media-output: not $lt-ie9
-$breakpoint-ie-output: $lt-ie9
+$phone-only: 4 pxtoem(568px)
+$tablet-and-above: pxtoem(569px) 8 fixed-layout
+$tablet-only: pxtoem(569px) 8 pxtoem(1024px)
+$tablet-and-below: 8 pxtoem(1024px)
+$desktop-and-above: pxtoem(1025px) 12 fixed-layout
+
+// Where `at-breakpoint` is used with one of the `fixed-layout` breakpoints above,
+// the block will be scoped to a `fixed-layout` class instead of being scoped to 
+// media queries.
+$breakpoint-media-output: $responsive and not $lt-ie9
+$breakpoint-ie-output: $lt-ie9 or not $responsive
diff --git a/stylesheets/application-ie8.sass b/stylesheets/application-ie8.sass
diff --git a/stylesheets/application-ie9.sass b/stylesheets/application-ie9.sass
diff --git a/stylesheets/application-ie7.sass → stylesheets/application-lt-ie9.sass b/stylesheets/application-ie7.sass → stylesheets/application-lt-ie9.sass
@@ -1,3 +1,3 @@
 @charset "utf-8"
-$ie7: true
+$lt-ie9: true
 @import application
diff --git a/stylesheets/base/_elements.sass b/stylesheets/base/_elements.sass
@@ -8,7 +8,7 @@
 
 // The basics
 html
-  font-family: $sans-font-stack
+  font-family: $helvetica
   height: 100%
 
 body

diff --git a/stylesheets/functions/_pxtoem.sass b/stylesheets/functions/_pxtoem.sass
@@ -1,3 +1,3 @@
-@function pxtoem ($px, $basepx)
+@function pxtoem ($px, $basepx: $base-font-size)
   @return ($px/$basepx) + 0em
 
diff --git a/stylesheets/modules/_example_module_b.sass b/stylesheets/modules/_example_module_b.sass
@@ -4,14 +4,14 @@
   +post(1)
   background-color: rgba(255, 0, 0, 0.5)
 
-  +at-breakpoint($tablet)
-    +pre(1, $tablet-total-columns)
-    +span-columns(6, $tablet-total-columns)
-    +post(1, $tablet-total-columns)
+  +at-breakpoint($tablet-and-above)
+    +pre(1)
+    +span-columns(6)
+    +post(1)
     background-color: rgba(0, 255, 0, 0.5)
 
-  +at-breakpoint($desktop)
-    +pre(2, $desktop-total-columns)
-    +span-columns(8, $desktop-total-columns)
-    +post(2, $desktop-total-columns)
+  +at-breakpoint($desktop-and-above)
+    +pre(2)
+    +span-columns(8)
+    +post(2)
     background-color: rgba(0, 0, 255, 0.5)
diff --git a/stylesheets/modules/_grid.sass b/stylesheets/modules/_grid.sass
@@ -11,14 +11,16 @@
   +container
   +susy-grid-background
 
-  +at-breakpoint($tablet)
-    +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding)
-      +container
-      +susy-grid-background
+  +at-breakpoint($tablet-and-above)
+    +container
+    +susy-grid-background
 
-  +at-breakpoint($desktop)
-    +with-grid-settings($desktop-total-columns, $desktop-column-width, $desktop-gutter-width, $desktop-grid-padding)
-      +container
-      +susy-grid-background
-      @if $lt-ie9
-        width: pxtoem(1024px, $base-font-size) // Force static width for IE7+8
+  +at-breakpoint($desktop-and-above)
+    +container
+    +susy-grid-background
+    @if $lt-ie9
+      // Force static width for IE7+8
+      width: pxtoem(1024px)
+    @else
+      // Constrain the fluid grid to a max width
+      max-width: pxtoem(1024px)