Skip to content

Commit 321f59b

Browse files
committed
Added Settings documentation
1 parent 6ff2e82 commit 321f59b

File tree

1 file changed

+100
-2
lines changed

1 file changed

+100
-2
lines changed

README.md

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Think of Toolkit as your swiss army knife for Progressive Enhancement and Respon
1010
1. [Basics](#basics)
1111
* [Requirements](#requirements)
1212
* [Installation](#installation)
13-
* [Settings](#settings)
13+
* [Changing Settings](#changing-settings)
1414
* [Extends](#extends)
1515
1. [Clearfix](#clearfix)
1616
1. [Colors](#colors)
@@ -29,6 +29,7 @@ Think of Toolkit as your swiss army knife for Progressive Enhancement and Respon
2929
1. [Nested Context](#nested-context)
3030
1. [Parallax](#parallax)
3131
1. [RTL](#rtl)
32+
1. [Settings](#settings)
3233
1. [Triangles](#triangles)
3334
1. [Center](#center)
3435
* [Vertical Center](#vertical-center)
@@ -62,7 +63,7 @@ To install as a Bower package, run the following:
6263
bower install sass-toolkit --save-dev
6364
```
6465

65-
### Settings
66+
### Changing Settings
6667

6768
All of Toolkit's settings can be changed with a simple mixin. Whenever you would like to change a default, include the following mixin, and from then on out, whenever that default is needed, the value you've changed it to will be used:
6869

@@ -320,6 +321,103 @@ Quickly and easily write your left-to-right and right-to-left properties with on
320321

321322
#### @include rtl($property, $value)
322323

324+
## Settings
325+
326+
While the standard `$variable: value !default` for allowing users the ability to change defaults in a system is okay, it can become cumbersome quickly. Cascading user changes is hard, doesn't always work as expected, and for large systems all of those settings pollute the global namespace. These setting functions and mixins make it easy to work with setting in the same way that [Toolkit does](#changing-settings). We're even dogfooding here, using these internally to work with Toolkit's settings! And none of our tests broke when we made the transition!
327+
328+
### User Setting Exists
329+
330+
Used to see if a user has set a setting. Will return `true` or `false`.
331+
332+
#### user-setting-exists($setting)
333+
334+
Pass in a comma separated list of user settings you would like to test. Will return a map where the keys are the settings and the values are their respective state.
335+
336+
#### user-setting-exists-multiple($settings...)
337+
338+
### Setting Get
339+
340+
Used to retrieve a setting. Will attempt to find the user setting first, and if a user hasn't set a value for that setting, will use the default setting. Returns the value of the setting
341+
342+
#### setting-get($setting)
343+
344+
Pass in a comma separated list of user settings you would like to retrieve. Will return a map where the keys are the settings and the values are their respective values.
345+
346+
#### setting-get-multiple($setting...)
347+
348+
### Setting Set
349+
350+
Used to set a setting. Returns `true`. The function and the mixins take the same input.
351+
352+
#### setting-set($setting, $value)
353+
354+
#### @include setting-set($setting, $value)
355+
356+
#### @include setting-change($setting, $value)
357+
358+
Used to set multiple settings at once. The input should be a map where the key is the setting and the value is the value of said setting.
359+
360+
#### setting-set-multiple($settings)
361+
362+
#### @include setting-set-multiple($settings)
363+
364+
#### @include setting-change-multiple($settings)
365+
366+
### Setting Clear
367+
368+
Used to clear a single user setting. Will return `true`. The function and the mixins take the same input.
369+
370+
#### setting-clear($setting)
371+
372+
#### @include setting-clear($setting)
373+
374+
Pass in a comma separated list of user settings you would like to clear. Will return `true`. The function and the mixins take the same input.
375+
376+
#### setting-clear-multiple($settings...)
377+
378+
#### @include setting-clear-multiple($settings...)
379+
380+
Used to clear all user settings. Will return `true`. The function and the mixins take the same input.
381+
382+
#### setting-reset()
383+
384+
#### @include setting-reset()
385+
386+
### Setting Pick
387+
388+
The most common usecase of actually needing to determine the setting to use is within a custom function or mixin. The recommended way of doing this is to provide a default value of `null` for arguments that are controlled by settings, then check to see if that value is `null` and, if not, get the correct setting. The setting pick functions do this.
389+
390+
#### setting-pick($setting, $input)
391+
392+
Used to pick multiple settings at once. The input should be a map where the key is the setting and the value is the input to be tested. Will return a map where the keys are the setting and the value is the determined value.
393+
394+
#### setting-pick-multiple($settings)
395+
396+
```scss
397+
@mixin button($size, $color: null) {
398+
$color: setting-pick('button color', $color);
399+
// ... rest of stuff goes here
400+
}
401+
```
402+
403+
### Setting Defaults
404+
405+
Congratulations! You now have an API for working with setting that you didn't need to write! Awesome! But how do you actually make global settings to use? Well, simple. Create a map of your settings, the keys being the setting name, the values being the value of the setting, and merge it into the `$GlobalSettings` variable. This will put them in the global setting namespace. If you would like your variables namespaced, it's recommended that you write wrapper functions for the setting functions for your plugin.
406+
407+
```scss
408+
@import "toolkit";
409+
410+
$MyAwesomePluginSettings: (
411+
'button color': #b4d455,
412+
'mug fill color': #c0ffee
413+
);
414+
415+
$GlobalSettings: map-merge($GlobalSettings, $MyAwesomePluginSettings);
416+
417+
// ... The rest of your awesome plugin stuff here
418+
```
419+
420+
323421
## Triangles
324422

325423
You love em! Triangles! Now create them using just CSS! Turn any element or pseudo element into a triangle just by using the `@include triangle;`. It's perfect for flags, speech bubbles, and arrows.

0 commit comments

Comments
 (0)