diff --git a/index.html b/index.html index 57d5411..98cee55 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,18 @@ - - + + + + Example - + - - - - - diff --git a/stylesheets/_config.sass b/stylesheets/_config.sass index 267d092..9ca0672 100644 --- 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 deleted file mode 100644 index b96d4e7..0000000 --- a/stylesheets/application-ie8.sass +++ /dev/null @@ -1,3 +0,0 @@ -@charset "utf-8" -$ie8: true -@import application diff --git a/stylesheets/application-ie9.sass b/stylesheets/application-ie9.sass deleted file mode 100644 index de630ff..0000000 --- a/stylesheets/application-ie9.sass +++ /dev/null @@ -1,3 +0,0 @@ -@charset "utf-8" -$ie9: true -@import application diff --git a/stylesheets/application-ie7.sass b/stylesheets/application-lt-ie9.sass similarity index 72% rename from stylesheets/application-ie7.sass rename to stylesheets/application-lt-ie9.sass index 195794f..d1b95d3 100644 --- a/stylesheets/application-ie7.sass +++ b/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 index 105da16..77179bd 100644 --- 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 index af7bb91..b8e089a 100644 --- 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 \ No newline at end of file diff --git a/stylesheets/modules/_example_module_b.sass b/stylesheets/modules/_example_module_b.sass index 4899a9b..9b034bd 100644 --- 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 index 4a69771..16fd61b 100644 --- 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)