🔧 Allow config-overrides

 - allow $layout-breakpoints to override $hagrid-breakpoints
 - allow $layout-gutters to override $hagrid-gutters
 - store the defaults in $hagrid-gutters-default &
$hagrid-breakpoints-defaults

README.md

@@ -82,17 +82,18 @@ npm install hagrid
 
 ```scss
 
-
 // *  Specify gutters between items. They are used like modifiers or applied to all grids
-$hagrid-gutters: (
+// * If $layout-gutters exists it will be used instead (so you don't have to modify this file directly)
+$hagrid-gutters-default: (
     default: 1.5rem,
     full: 0,
     narrow: 0.5rem,
     wide: 3rem
 );
 
 // * Set common breakpoints used in your project. Can be used in the @bp-mixin (see below)
-$hagrid-breakpoints: (
+// * If $layout-breakpoints exists it will be used instead (so you don't have to modify this file directly)
+$hagrid-breakpoints-default: (
     sm: "(min-width: 35.5em)",
     md: "(min-width: 48em)",
     lg: "(min-width: 64em)",

scss/_hagrid.scss

@@ -6,31 +6,43 @@
 /// @group Config
 ////
 
-/// Gutters
-/// Set gutters usable as modifiers
+/// Default gutters
 /// @property {Number}
 
-$hagrid-gutters:
+$hagrid-gutters-default:
   (
     default: 1.5rem,
     full: 0,
     narrow: 0.5rem,
     wide: 3rem
   );
 
-/// Breakpoints
-/// Can be used for the grid e.g. @include i(breakpoint 2/3)
-/// Can be used for mediaqueries @include bp(breakpoint){@content}
+/// Gutters
+/// Set gutters usable as modifiers.
+/// Overwritten by $layout-gutters if it exists
+/// @property {Number}
+
+$hagrid-gutters: if(variable-exists(layout-gutters), $layout-gutters, $hagrid-gutters-default);
+
+/// Default breakpoints
 /// @property {String}
 
-$hagrid-breakpoints:
+$hagrid-breakpoints-default:
   (
     sm: "(min-width: 35.5em)",
     md: "(min-width: 48em)",
     lg: "(min-width: 64em)",
     xl: "(min-width: 80em)"
   );
 
+/// Breakpoints
+/// Can be used for the grid e.g. @include i(breakpoint 2/3)
+/// Can be used for mediaqueries @include bp(breakpoint){@content}
+/// Overwritten by $layout-breakpoints if it exists
+/// @property {String}
+
+$hagrid-breakpoints: if(variable-exists(layout-breakpoints), $layout-breakpoints, $hagrid-breakpoints-default);
+
 /// Gutter & Modifier Selector
 /// Gutters and modifiers are applied to all children of each grid-container
 /// By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set it here