diff --git a/stylesheets/_config.sass b/stylesheets/_config.sass index 267d092..f781f55 100644 --- a/stylesheets/_config.sass +++ b/stylesheets/_config.sass @@ -59,10 +59,10 @@ $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 +$bp-tablet: pxtoem(569px, $base-font-size) lt-ie9 +$bp-tablet-only: pxtoem(569px, $base-font-size) 8 pxtoem(1024px, $base-font-size) +$bp-tablet-max: 8 pxtoem(1024px, $base-font-size) +$bp-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 diff --git a/stylesheets/application.sass b/stylesheets/application.sass index cfab821..ec2ceac 100644 --- a/stylesheets/application.sass +++ b/stylesheets/application.sass @@ -8,7 +8,7 @@ // Yours @import functions/**/* -// @import mixins/**/* +@import mixins/**/* // Global config variables, colour palette, etc diff --git a/stylesheets/mixins/.gitkeep b/stylesheets/mixins/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/stylesheets/mixins/_at_breakpoint_with_grid_settings.sass b/stylesheets/mixins/_at_breakpoint_with_grid_settings.sass new file mode 100644 index 0000000..14c9463 --- /dev/null +++ b/stylesheets/mixins/_at_breakpoint_with_grid_settings.sass @@ -0,0 +1,19 @@ +// If you want to use Susy's grid mixins (eg span-columns) at a breakpoint other than the +// default mobile one, you'll need to use this mixin instead of at-breakpoint to ensure the +// correct grid settings are used. + +=at-breakpoint-with-grid-settings( $bp ) + @if $bp == "tablet" + +at-breakpoint($bp-tablet) + +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding) + @content + + @else if $bp == "tablet-only" + +at-breakpoint($bp-tablet-only) + +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding) + @content + + @else if $bp == "desktop" + +at-breakpoint( $bp-desktop ) + +with-grid-settings($desktop-total-columns, $desktop-column-width, $desktop-gutter-width, $desktop-grid-padding) + @content diff --git a/stylesheets/modules/_example_module_b.sass b/stylesheets/modules/_example_module_b.sass index 4899a9b..e3fcd13 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-with-grid-settings("tablet") + +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-with-grid-settings("desktop") + +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..bdb1ab5 100644 --- a/stylesheets/modules/_grid.sass +++ b/stylesheets/modules/_grid.sass @@ -1,7 +1,7 @@ // This module is a top-level Susy grid container. // -// You can use Susy methods like span-columns() and at-breakpoint() in modules that -// are placed inside this container. +// You can use Susy's at-breakpoint() in modules that are placed inside this container. +// To use Susy's grid mixins (eg span-columns), use at-breakpoint-with-grid-settings() instead. // // You'll eventually want to delete the +susy-grid-background lines. // @@ -11,14 +11,12 @@ +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-with-grid-settings("tablet") + +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-with-grid-settings("desktop") + +container + +susy-grid-background + @if $lt-ie9 + width: pxtoem(1024px, $base-font-size) // Force static width for IE7+8