🐛 (variables, docs, version) Makes vars configurable, adds docs, bump…

…s v#

README.md

@@ -6,16 +6,53 @@ An SCSS base layout and styles library by Evans Hunt.
 
 This library uses `@forward` and `@use` keywords only available in [Dart Sass](https://sass-lang.com/dart-sass). It will not compile with Node Sass. [Fibers](https://github.com/laverdet/node-fibers) should be included as well to improve compile speed.
 
+Resources:
+
+* https://css-tricks.com/introducing-sass-modules/
+* https://stackoverflow.com/questions/63289593/overriding-a-large-number-of-default-values-with-the-use-rule-in-sass-scss
+
 ## Usage
 
+### With @import
+
 `@import` '~@evanshunt/derekstrap/index' to make use of the entire library or pull in individual files to pick and choose the pieces you want.
 
 To override any variables defined in the library simply `@import` your own variables with the same name prior to importing the library.
 
+### With @use
+
+You can configure a module exactly once. Before using other styles add something like the following in a `_config.scss` file to override variables
+
+```
+@use '~@evanshunt/derekstrap' with (
+    $base-font-family: ('Raleway', Tacoma, sans-serif),
+    $base-line-height: 1.8,
+    $heading-margin-top: 0
+);
+```
+
+## Features
+
+SubModules
+
+* Breakpoints
+* Proportional Box
+* Proportional Text
+* Spacing
+* Text Sizing
+
+JS features
+
+* adds a data-attribute to the dom body with the browser user agent
+* includes a handy `debounce()` function
+* breakpoint object that you can pass an array of breakpoints to, and you can then check the object to determine your current breakpoint, or listen for a breakpoint change event. You can actually pull in the Derekstrap Sass breakpoints into the JS via a sass :export block. It'll work even if you update/override the Derekstrap `$breakpointList` var
+
 ## Examples
 
 Big ol' @TODO here....
 
+The breakpoint stuff is probably the hardest to grok without docs, so chat with @davejtoews if you need a primer.
+
 ## Gotchas
 
 This library is in active development. Pull in a particular commit or tag, or coordinate with Dave if you'd like to use it in your project as it may be subject to change.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@evanshunt/derekstrap",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A base layout and styles library by Evans Hunt",
   "main": "dist/main.js",
   "sass": "_index.scss",

spacing/_variables.scss

@@ -1,2 +1,2 @@
-$horizontal-spacing-attribute: 'padding';
-$vertical-spacing-attribute: 'padding';
+$horizontal-spacing-attribute: 'padding' !default;
+$vertical-spacing-attribute: 'padding' !default;

text-sizing/_variables.scss

@@ -11,12 +11,12 @@ $base-font-size: 16px !default;
 $base-font-family: Helvetica, Tacoma, sans-serif !default;
 $base-font-color: #000 !default; //@todo: Use variable
 $base-line-height: 1.6 !default;
-$base-font-weight: $fw-regular;
+$base-font-weight: $fw-regular !default;
 
 $heading-font-family: $base-font-family !default;
 $heading-line-height: 1.2 !default;
 $heading-font-color: $base-font-color !default;
-$heading-font-weight: $fw-bold;
+$heading-font-weight: $fw-bold !default;
 
 $heading-margin: 1rem !default; //@todo: use variable
 $heading-margin-top: $heading-margin !default;