dialog-settings

dialog(settings) :book:

A simple key value store for module settings, to make modules more portable. With the nice side-effect that all settings can be rendered as native CSS variables. Play with the demo.

Why ⁉️️

• Easy way to switch between rendered values and CSS variables.
• Better portabily: Only have to rename one string, not tons of variable names as well, when renaming/moving a module.
• 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

$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)

$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 💾

npm install dialog-settings

Basic usage ☝️

• Import dialog-settings.scss

  @import 'dialog-settings/dist/dialog-settings';
  

  PS: make sure to add node_modules to your import paths

• Setup your module by setting a name-space and calling the setting mixin

  $module-name: 'somerandommodule';
  
  @include settings((
    gutter         : 1rem,
    color          : silver,
    color-contrast : gold
  ));
  

• Call the setting() function.

  .#{$module-name} {
    padding: setting('gutter');
    &__submodule {
      color: setting(color);
    }
  }
  

• By setting the global variable $module-cssvariables the variable are rendered as CSS variables.

License 👮🏼

Created with ♥ by meodai. Licensed under the MIT License.