dialog-settings - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

package.json

 {
   "name": "dialog-settings",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "SASS/SCSS module settings",
   "main": "gulpfile.js",
   "scripts": {
-    "test": "gulp test:sass"
+    "test": "gulp test:sass",
+    "build": "gulp build",
+    "dev": "gulp",
+    "deploy": "gulp build && gh-pages -d demo"
   },
@@ -9,0 +12,0 @@ "repository": {

README.md

@@ -10,4 +10,39 @@ ![dialog(settings)](media/logo.png)
 A simple key value store for module settings, to make modules more portable.
-With the nice side-effect that all settings can be output as native CSS variables.
+With the nice side-effect that all settings can be rendered as native CSS variables. Play with the [demo](http://www.sassmeister.com/gist/230dc13729262d55d92f1efbcd2a69a5).
 
+## Why ⁉️️
+1. Easy way to switch between rendered values and CSS variables.
+2. Better portabily: Only have to rename one string, not tons of variable names as well, when renaming/moving a module.
+3. Warn when variables are missing instead of failing the build. Allows to mock the CSS for a module withought knowing the values for each property.
+
+### Before
+```scss
+$module-name: 'mymodule';
+
+$mymodule-background: $colors-dark;
+$mymodule-color: $colors-contrast;
+$mymodule-margin: 2rem;
+
+.#{$module-name} {
+  color: $mymodule-color;
+  background: $mymodule-background;
+  margin: $mymodule-margin;
+}
+```
+### With dialog(settings)
+```scss
+$module-name: 'mymodule';
+
+@include settings((
+  color: $colors-dark,
+  background: $colors-contrast,
+  margin: 2rem
+));
+
+.#{$module-name} {
+  color: setting(color);
+  background: setting(background);
+  margin: setting(margin);
+}
+```
 ## Installation 💾
@@ -14,0 +49,0 @@

No alert changes

Improved metrics

Total package byte prevSize

88548

increased by1.28%

Number of lines in readme file

89

increased by64.81%

No dependency changes