diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 310dae48f..c3ed31c2e 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -6,6 +6,9 @@ **Resolves** #(issue number) + +**Lodash[ACTION]** #100 -> https://lodash.com/docs/4.17.4#(method) + ## What does your PR belong to? - [ ] Website - [ ] Snippets @@ -17,6 +20,12 @@ - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) +## [Lodash Backlog](https://github.com/Chalarangelo/30-seconds-of-code/issues/100) + + +- [ ] I added the prefix [UPDATE: `method.md`] or [ADD: `method.md`] +- [ ] I have referenced the `method` to the lodash backlog. + ## Checklist: - [ ] My code follows the code style of this project. diff --git a/COLLABORATING.md b/COLLABORATING.md new file mode 100644 index 000000000..119870112 --- /dev/null +++ b/COLLABORATING.md @@ -0,0 +1,24 @@ +# Collaborator team rules and guidelines for community moderation + +**As a contributor/member of the community, remember that you can always open issues about moderation and problems with how community moderation is done. We are always open to constructive criticism and feedback!** + +## Responsibilities of a collaborator + +As a member of the team that manages **30 seconds of code**, you have the following responsibilities: + +- **Be part of the conversation in the issue tracker.** That includes (but is not limited to) helping out new members, discussing new features and explaining decisions to people. +- **Review pull requests.** You do not have to read through all of the pull requests and review them, but taking the time each day to review a few can help a great deal. +- **Be civil and polite.** If you are about to lose your temper, take a step back and go do something else. We want our interactions with the community to be polite, so that more people can join the project and contribute in any way they can. Remember to always thank contributors for their help, even if it's minor changes or changes that did not make it into the project. This way we can reward and encourage people to keep being part of the community. +- **Contribute when you want, moderate when you can.** If you have a lot on your plate outside of this project, it's alright. It's better to take a break for a few days rather than hastily deal with issues and pull requests that might break things. + +## Guidelines for merging pull requests and making changes to the project + +- **[Usual guidelines](https://github.com/Chalarangelo/30-seconds-of-code/blob/master/CONTRIBUTING.md) apply.** Make sure to follow them, like everybody else. +- **For a pull request to be considered ready to merge, there should be at least 2 (preferrably 3) reviews approving it for merge.** There are, however, certain exceptions: + - **If a pull request only fixes typos**, there is no need to wait for a second reviewer (unless you are not absolutely certain these were not typos in the first place). + - **If a pull request only clarifies a snippet's description or enforces the styleguide for an existng snippet**, you might be able to merge it without getting a second reviewer to review it, but only if you are absolutely certain about it. + - **Changes to build scripts, guidelines and things that might break the processes we have in place need to be reviewed by [@Chalarangelo](https://github.com/Chalarangelo)** (this is temporary, but we need a baseline to make sure we break as few things as possible in the beginning). +- **After merging a pull request, make sure to check for untagged snippets and tag them appropriately.** Try to keep all snippets tagged, so that the list and website are up to date. +- (*Irrelevant once we set up CI*) **You should rebuild the README and website after merging pull requests and push to the repository, so that both files are up to date.** +- **If you make changes or additions to existing snippets or if you want to add you own snippets, you will go through the pull request process that everyone else goes.** Exceptions apply similarly to the ones mentioned above about merging pull requests (i.e. typos, description clarification and the way script and build process changes are handled). Pull requests suggested by collaborators should be reviewed by at least two other collaborators to be considered ready to merge. +- **Pull requests that are inactive for over a week should be closed or put on hold.** diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ac39ceccc..100d05aca 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -12,7 +12,7 @@ Here's what you can do to help: ### Snippet submission and Pull request guidelines -- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run build-list` to update the README.md file automatically, based on the changes you have made. +- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. You can optionally run `npm run builder` to update the README.md file automatically, based on the changes you have made. - **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `### awesomeSnippet` the filename should be `awesomeSnippet.md`. - Use `camelCase`, not `kebab-case` or `snake_case`. - Avoid capitalization of words, except if the whole word is capitalized (e.g. `URL` should be capitalized in the filename and the snippet title). diff --git a/README.md b/README.md index e30f1b5e1..d48327a92 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ ## Table of Contents ### Array +* [`arrayGcd`](#arraygcd) * [`arrayMax`](#arraymax) * [`arrayMin`](#arraymin) * [`chunk`](#chunk) @@ -51,6 +52,7 @@ * [`union`](#union) * [`without`](#without) * [`zip`](#zip) +* [`zipObject`](#zipobject) ### Browser * [`arrayToHtmlList`](#arraytohtmllist) @@ -80,6 +82,7 @@ ### Math * [`arrayAverage`](#arrayaverage) * [`arraySum`](#arraysum) +* [`clampNumber`](#clampnumber) * [`collatz`](#collatz) * [`digitize`](#digitize) * [`distance`](#distance) @@ -87,6 +90,7 @@ * [`fibonacci`](#fibonacci) * [`gcd`](#gcd) * [`hammingDistance`](#hammingdistance) +* [`inRange`](#inrange) * [`isArmstrongNumber`](#isarmstrongnumber) * [`isDivisible`](#isdivisible) * [`isEven`](#iseven) @@ -151,6 +155,23 @@ ## Array +### arrayGcd + +Calculates the greatest common denominator (gcd) of an array of numbers. + +Use `Array.reduce()` and the `gcd` formula (uses recursion) to calculate the greatest common denominator of an array of numbers. + +```js +const arrayGcd = arr =>{ + const gcd = (x, y) => !y ? x : gcd(y, x % y); + return arr.reduce((a,b) => gcd(a,b)); +} +// arrayGcd([1,2,3,4,5]) -> 1 +// arrayGcd([4,8,12]) -> 4 +``` + +[⬆ back to top](#table-of-contents) + ### arrayMax Returns the maximum value in an array. @@ -532,8 +553,10 @@ _(For a snippet that does not mutate the original array see [`without`](#without ```js const pull = (arr, ...args) => { - let pulled = arr.filter((v, i) => !args.toString().split(',').includes(v)); - arr.length = 0; pulled.forEach(v => arr.push(v)); + let argState = Array.isArray(args[0]) ? args[0] : args; + let pulled = arr.filter((v, i) => !argState.includes(v)); + arr.length = 0; + pulled.forEach(v => arr.push(v)); }; // let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c']; @@ -764,6 +787,20 @@ const zip = (...arrays) => { //zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]] ``` +[⬆ back to top](#table-of-contents) + +### zipObject + +Given an array of valid property identifiers and an array of values, return an object associating the properties to the values. + +Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using `Array.reduce()`. + +```js +const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} ) +// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined} +// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2} +``` + [⬆ back to top](#table-of-contents) ## Browser @@ -1117,6 +1154,26 @@ const arraySum = arr => arr.reduce((acc, val) => acc + val, 0); [⬆ back to top](#table-of-contents) +### clampNumber + +Clamps `num` within the inclusive `lower` and `upper` bounds. + +If `lower` is greater than `upper`, swap them. +If `num` falls within the range, return `num`. +Otherwise return the nearest number in the range. + +```js +const clampNumber = (num, lower, upper) => { + if(lower > upper) upper = [lower, lower = upper][0]; + return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper) +} +// clampNumber(2, 3, 5) -> 3 +// clampNumber(1, -1, -5) -> -1 +// clampNumber(3, 2, 4) -> 3 +``` + +[⬆ back to top](#table-of-contents) + ### collatz Applies the Collatz algorithm. @@ -1221,6 +1278,26 @@ const hammingDistance = (num1, num2) => [⬆ back to top](#table-of-contents) +### inRange + +Checks if the given number falls in the given range. + +Use arithmetic comparison to check if the given number is in the specified range. +If the second parameter, `end`, is not specified, the reange is considered to be from `0` to `start`. + +```js +const inRange = (n, start, end=null) => { + if(end && start > end) end = [start, start=end][0]; + return (end == null) ? (n>=0 && n=start && n true +// inRange(3, 4) -> true +// inRange(2, 3, 5) -> false +// inrange(3, 2) -> false +``` + +[⬆ back to top](#table-of-contents) + ### isArmstrongNumber Checks if the given number is an armstrong number or not. @@ -1549,7 +1626,7 @@ const orderBy = (arr, props, orders) => arr.sort((a, b) => props.reduce((acc, prop, i) => { if (acc === 0) { - const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]]; + const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]]; acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0; } return acc; diff --git a/docs/index.html b/docs/index.html index ac8f10545..49a3b13df 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,245 +1,724 @@ -30 seconds of code

 30 seconds of code Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

 

Array

arrayMax

Returns the maximum value in an array.

Use Math.max() combined with the spread operator (...) to get the maximum value in the array.

const arrayMax = arr => Math.max(...arr);
-// arrayMax([10, 1, 5]) -> 10
-

arrayMin

Returns the minimum value in an array.

Use Math.min() combined with the spread operator (...) to get the minimum value in the array.

const arrayMin = arr => Math.min(...arr);
-// arrayMin([10, 1, 5]) -> 1
-

chunk

Chunks an array into smaller arrays of a specified size.

Use Array.from() to create a new array, that fits the number of chunks that will be produced. Use Array.slice() to map each element of the new array to a chunk the length of size. If the original array can't be split evenly, the final chunk will contain the remaining elements.

const chunk = (arr, size) =>
-  Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));
-// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]]
-

compact

Removes falsey values from an array.

Use Array.filter() to filter out falsey values (false, null, 0, "", undefined, and NaN).

const compact = (arr) => arr.filter(Boolean);
-// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]
-

countOccurrences

Counts the occurrences of a value in an array.

Use Array.reduce() to increment a counter each time you encounter the specific value inside the array.

const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
-// countOccurrences([1,1,2,1,2,3], 1) -> 3
-

deepFlatten

Deep flattens an array.

Use recursion. Use Array.concat() with an empty array ([]) and the spread operator (...) to flatten an array. Recursively flatten each element that is an array.

const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
-// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]
-

difference

Returns the difference between two arrays.

Create a Set from b, then use Array.filter() on a to only keep values not contained in b.

const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };
-// difference([1,2,3], [1,2,4]) -> [3]
-

differenceWith

Filters out all values from an array for which the comparator function does not return true.

Use Array.filter() and Array.find() to find the appropriate values.

const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b)))
-// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)) -> [1, 1.2]
-

distinctValuesOfArray

Returns all the distinct values of an array.

Use ES6 Set and the ...rest operator to discard all duplicated values.

const distinctValuesOfArray = arr => [...new Set(arr)];
-// distinctValuesOfArray([1,2,2,3,4,4,5]) -> [1,2,3,4,5]
-

dropElements

Removes elements in an array until the passed function returns true. Returns the remaining elements in the array.

Loop through the array, using Array.slice() to drop the first element of the array until the returned value from the function is true. Returns the remaining elements.

const dropElements = (arr, func) => {
-  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
+    }
+  
+  
+    
+    

+      
 30 seconds of code
+        Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.
+      

+      
+    

+    

+      
+        
 
Array

+
arrayGcd

+
Calculates the greatest common denominator (gcd) of an array of numbers.

+
Use Array.reduce() and the gcd formula (uses recursion) to calculate the greatest common denominator of an array of numbers.

+
const arrayGcd = arr =>{
+  const gcd = (x, y) => !y ? x : gcd(y, x % y);
+  return arr.reduce((a,b) => gcd(a,b));
+}
+// arrayGcd([1,2,3,4,5]) -> 1
+// arrayGcd([4,8,12]) -> 4
+

+

arrayMax

+
Returns the maximum value in an array.

+
Use Math.max() combined with the spread operator (...) to get the maximum value in the array.

+
const arrayMax = arr => Math.max(...arr);
+// arrayMax([10, 1, 5]) -> 10
+

+

arrayMin

+
Returns the minimum value in an array.

+
Use Math.min() combined with the spread operator (...) to get the minimum value in the array.

+
const arrayMin = arr => Math.min(...arr);
+// arrayMin([10, 1, 5]) -> 1
+

+

chunk

+
Chunks an array into smaller arrays of a specified size.

+
Use Array.from() to create a new array, that fits the number of chunks that will be produced.
+Use Array.slice() to map each element of the new array to a chunk the length of size.
+If the original array can't be split evenly, the final chunk will contain the remaining elements.

+
const chunk = (arr, size) =>
+  Array.from({length: Math.ceil(arr.length / size)}, (v, i) => arr.slice(i * size, i * size + size));
+// chunk([1,2,3,4,5], 2) -> [[1,2],[3,4],[5]]
+

+

compact

+
Removes falsey values from an array.

+
Use Array.filter() to filter out falsey values (false, null, 0, "", undefined, and NaN).

+
const compact = (arr) => arr.filter(Boolean);
+// compact([0, 1, false, 2, '', 3, 'a', 'e'*23, NaN, 's', 34]) -> [ 1, 2, 3, 'a', 's', 34 ]
+

+

countOccurrences

+
Counts the occurrences of a value in an array.

+
Use Array.reduce() to increment a counter each time you encounter the specific value inside the array.

+
const countOccurrences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0);
+// countOccurrences([1,1,2,1,2,3], 1) -> 3
+

+

deepFlatten

+
Deep flattens an array.

+
Use recursion.
+Use Array.concat() with an empty array ([]) and the spread operator (...) to flatten an array.
+Recursively flatten each element that is an array.

+
const deepFlatten = arr => [].concat(...arr.map(v => Array.isArray(v) ? deepFlatten(v) : v));
+// deepFlatten([1,[2],[[3],4],5]) -> [1,2,3,4,5]
+

+

difference

+
Returns the difference between two arrays.

+
Create a Set from b, then use Array.filter() on a to only keep values not contained in b.

+
const difference = (a, b) => { const s = new Set(b); return a.filter(x => !s.has(x)); };
+// difference([1,2,3], [1,2,4]) -> [3]
+

+

differenceWith

+
Filters out all values from an array for which the comparator function does not return true.

+
Use Array.filter() and Array.find() to find the appropriate values.

+
const differenceWith = (arr, val, comp) => arr.filter(a => !val.find(b => comp(a, b)))
+// differenceWith([1, 1.2, 1.5, 3], [1.9, 3], (a,b) => Math.round(a) == Math.round(b)) -> [1, 1.2]
+

+

distinctValuesOfArray

+
Returns all the distinct values of an array.

+
Use ES6 Set and the ...rest operator to discard all duplicated values.

+
const distinctValuesOfArray = arr => [...new Set(arr)];
+// distinctValuesOfArray([1,2,2,3,4,4,5]) -> [1,2,3,4,5]
+

+

dropElements

+
Removes elements in an array until the passed function returns true. Returns the remaining elements in the array.

+
Loop through the array, using Array.slice() to drop the first element of the array until the returned value from the function is true.
+Returns the remaining elements.

+
const dropElements = (arr, func) => {
+  while (arr.length > 0 && !func(arr[0])) arr = arr.slice(1);
   return arr;
 };
-// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]
-

dropRight
Returns a new array with n elements removed from the right
Check if n is shorter than the given array and use Array.slice() to slice it accordingly or return an empty array.
const dropRight = (arr, n = 1) => n < arr.length ? arr.slice(0, arr.length - n) : []
-//dropRight([1,2,3]) -> [1,2]
-//dropRight([1,2,3], 2) -> [1]
-//dropRight([1,2,3], 42) -> []
-

everyNth
Returns every nth element in an array.
Use Array.filter() to create a new array that contains every nth element of a given array.
const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === 0);
-// everyNth([1,2,3,4,5,6], 2) -> [ 1, 3, 5 ]
-

filterNonUnique
Filters out the non-unique values in an array.
Use Array.filter() for an array containing only the unique values.
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
-// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]
-

flatten
Flattens an array.
Use Array.reduce() to get all elements inside the array and concat() to flatten them.
const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
-// flatten([1,[2],3,4]) -> [1,2,3,4]
-

flattenDepth
Flattens an array up to the specified depth.
Use recursion, decrementing depth by 1 for each level of depth. Use Array.reduce() and Array.concat() to merge elements or arrays. Base case, for depth equal to 1 stops recursion. Omit the second element, depth to flatten only to a depth of 1 (single flatten).
const flattenDepth = (arr, depth = 1) =>
-  depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), [])
-  : arr.reduce((a, v) => a.concat(v), []);
-// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]
-

groupBy
Groups the element of an array based on the given function.
Use Array.map() to map the values of an array to a function or property name. Use Array.reduce() to create an object, where the keys are produced from the mapped results.
const groupBy = (arr, func) =>
-  arr.map(typeof func === 'function' ? func : val => val[func])
-    .reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {});
-// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]}
-// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}
-

Returns the head of a list.
Use arr[0] to return the first element of the passed array.
const head = arr => arr[0];
-// head([1,2,3]) -> 1
-

initial
Returns all the elements of an array except the last one.
Use arr.slice(0,-1)to return all but the last element of the array.
const initial = arr => arr.slice(0, -1);
-// initial([1,2,3]) -> [1,2]
-

initialize2DArray
Initializes an 2D array of given width and height and value.
Use Array.map() to generate h rows where each is a new array of size w initialize with value. If value is not provided, default to null.
const initialize2DArray = (w, h, val = null) => Array(h).fill().map(() => Array(w).fill(val));
-// initializeArrayWithRange(2, 2, 0) -> [[0,0], [0,0]]
-

initializeArrayWithRange
Initializes an array containing the numbers in the specified range where start and end are inclusive.
Use Array((end + 1) - start) to create an array of the desired length, Array.map() to fill with the desired values in a range. You can omit start to use a default value of 0.
const initializeArrayWithRange = (end, start = 0) => 
-  Array.from({ length: (end + 1) - start }).map((v, i) => i + start);
-// initializeArrayWithRange(5) -> [0,1,2,3,4,5]
-// initializeArrayWithRange(7, 3) -> [3,4,5,6,7]
-

initializeArrayWithValues
Initializes and fills an array with the specified values.
Use Array(n) to create an array of the desired length, fill(v) to fill it with the desired values. You can omit value to use a default value of 0.
const initializeArrayWithValues = (n, value = 0) => Array(n).fill(value);
-// initializeArrayWithValues(5, 2) -> [2,2,2,2,2]
-

intersection
Returns a list of elements that exist in both arrays.
Create a Set from b, then use Array.filter() on a to only keep values contained in b.
const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x)); };
-// intersection([1,2,3], [4,3,2]) -> [2,3]
-

last
Returns the last element in an array.
Use arr.length - 1 to compute index of the last element of the given array and returning it.
const last = arr => arr[arr.length - 1];
-// last([1,2,3]) -> 3
-

mapObject
Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the mapped value.
Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new Array to stor the array with a map of the function over its data set and a comma operator to return a second step, without needing to move from one context to another (due to closures and order of operations).
const mapObject = (arr, fn) => 
-  (a => (a = [arr, arr.map(fn)], a[0].reduce( (acc,val,ind) => (acc[val] = a[1][ind], acc), {}) )) ( );
+// dropElements([1, 2, 3, 4], n => n >= 3) -> [3,4]
+

+

dropRight

+
Returns a new array with n elements removed from the right

+
Check if n is shorter than the given array and use Array.slice() to slice it accordingly or return an empty array.

+
const dropRight = (arr, n = 1) => n < arr.length ? arr.slice(0, arr.length - n) : []
+//dropRight([1,2,3]) -> [1,2]
+//dropRight([1,2,3], 2) -> [1]
+//dropRight([1,2,3], 42) -> []
+

+

everyNth

+
Returns every nth element in an array.

+
Use Array.filter() to create a new array that contains every nth element of a given array.

+
const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === 0);
+// everyNth([1,2,3,4,5,6], 2) -> [ 1, 3, 5 ]
+

+

filterNonUnique

+
Filters out the non-unique values in an array.

+
Use Array.filter() for an array containing only the unique values.

+
const filterNonUnique = arr => arr.filter(i => arr.indexOf(i) === arr.lastIndexOf(i));
+// filterNonUnique([1,2,2,3,4,4,5]) -> [1,3,5]
+

+

flatten

+
Flattens an array.

+
Use Array.reduce() to get all elements inside the array and concat() to flatten them.

+
const flatten = arr => arr.reduce((a, v) => a.concat(v), []);
+// flatten([1,[2],3,4]) -> [1,2,3,4]
+

+

flattenDepth

+
Flattens an array up to the specified depth.

+
Use recursion, decrementing depth by 1 for each level of depth.
+Use Array.reduce() and Array.concat() to merge elements or arrays.
+Base case, for depth equal to 1 stops recursion.
+Omit the second element, depth to flatten only to a depth of 1 (single flatten).

+
const flattenDepth = (arr, depth = 1) =>
+  depth != 1 ? arr.reduce((a, v) => a.concat(Array.isArray(v) ? flattenDepth(v, depth - 1) : v), [])
+  : arr.reduce((a, v) => a.concat(v), []);
+// flattenDepth([1,[2],[[[3],4],5]], 2) -> [1,2,[3],4,5]
+

+

groupBy

+
Groups the element of an array based on the given function.

+
Use Array.map() to map the values of an array to a function or property name.
+Use Array.reduce() to create an object, where the keys are produced from the mapped results.

+
const groupBy = (arr, func) =>
+  arr.map(typeof func === 'function' ? func : val => val[func])
+    .reduce((acc, val, i) => { acc[val] = (acc[val] || []).concat(arr[i]); return acc; }, {});
+// groupBy([6.1, 4.2, 6.3], Math.floor) -> {4: [4.2], 6: [6.1, 6.3]}
+// groupBy(['one', 'two', 'three'], 'length') -> {3: ['one', 'two'], 5: ['three']}
+

+


+
Returns the head of a list.

+
Use arr[0] to return the first element of the passed array.

+
const head = arr => arr[0];
+// head([1,2,3]) -> 1
+

+

initial

+
Returns all the elements of an array except the last one.

+
Use arr.slice(0,-1)to return all but the last element of the array.

+
const initial = arr => arr.slice(0, -1);
+// initial([1,2,3]) -> [1,2]
+

+

initialize2DArray

+
Initializes an 2D array of given width and height and value.

+
Use Array.map() to generate h rows where each is a new array of size w initialize with value. If value is not provided, default to null.

+
const initialize2DArray = (w, h, val = null) => Array(h).fill().map(() => Array(w).fill(val));
+// initializeArrayWithRange(2, 2, 0) -> [[0,0], [0,0]]
+

+

initializeArrayWithRange

+
Initializes an array containing the numbers in the specified range where start and end are inclusive.

+
Use Array((end + 1) - start) to create an array of the desired length, Array.map() to fill with the desired values in a range.
+You can omit start to use a default value of 0.

+
const initializeArrayWithRange = (end, start = 0) => 
+  Array.from({ length: (end + 1) - start }).map((v, i) => i + start);
+// initializeArrayWithRange(5) -> [0,1,2,3,4,5]
+// initializeArrayWithRange(7, 3) -> [3,4,5,6,7]
+

+

initializeArrayWithValues

+
Initializes and fills an array with the specified values.

+
Use Array(n) to create an array of the desired length, fill(v) to fill it with the desired values.
+You can omit value to use a default value of 0.

+
const initializeArrayWithValues = (n, value = 0) => Array(n).fill(value);
+// initializeArrayWithValues(5, 2) -> [2,2,2,2,2]
+

+

intersection

+
Returns a list of elements that exist in both arrays.

+
Create a Set from b, then use Array.filter() on a to only keep values contained in b.

+
const intersection = (a, b) => { const s = new Set(b); return a.filter(x => s.has(x)); };
+// intersection([1,2,3], [4,3,2]) -> [2,3]
+

+

last

+
Returns the last element in an array.

+
Use arr.length - 1 to compute index of the last element of the given array and returning it.

+
const last = arr => arr[arr.length - 1];
+// last([1,2,3]) -> 3
+

+

mapObject

+
Maps the values of an array to an object using a function, where the key-value pairs consist of the original value as the key and the mapped value.

+
Use an anonymous inner function scope to declare an undefined memory space, using closures to store a return value. Use a new Array to stor the array with a map of the function over its data set and a comma operator to return a second step, without needing to move from one context to another (due to closures and order of operations).

+
const mapObject = (arr, fn) => 
+  (a => (a = [arr, arr.map(fn)], a[0].reduce( (acc,val,ind) => (acc[val] = a[1][ind], acc), {}) )) ( );
 /*
-const squareIt = arr => mapObject(arr, a => a*a)
+const squareIt = arr => mapObject(arr, a => a*a)
 squareIt([1,2,3]) // { 1: 1, 2: 4, 3: 9 }
 */
-

nthElement
Returns the nth element of an array.
Use Array.slice() to get an array containing the nth element at the first place. If the index is out of bounds, return []. Omit the second argument, n, to get the first element of the array.
const nthElement = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0];
-// nthElement(['a','b','c'],1) -> 'b'
-// nthElement(['a','b','b'],-3) -> 'a'
-

pick
Picks the key-value pairs corresponding to the given keys from an object.
Use Array.reduce() to convert the filtered/picked keys back to a object with the corresponding key-value pair if the key exist in the obj.
const pick = (obj, arr) =>
-  arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {});
-// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 }
-

pull
Mutates the original array to filter out the values specified.
Use Array.filter() and Array.includes() to pull out the values that are not needed. Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.
(For a snippet that does not mutate the original array see without)
const pull = (arr, ...args) => {
-  let pulled = arr.filter((v, i) => !args.toString().split(',').includes(v));
-  arr.length = 0; pulled.forEach(v => arr.push(v));
+

+

nthElement

+
Returns the nth element of an array.

+
Use Array.slice() to get an array containing the nth element at the first place.
+If the index is out of bounds, return [].
+Omit the second argument, n, to get the first element of the array.

+
const nthElement = (arr, n=0) => (n>0? arr.slice(n,n+1) : arr.slice(n))[0];
+// nthElement(['a','b','c'],1) -> 'b'
+// nthElement(['a','b','b'],-3) -> 'a'
+

+

pick

+
Picks the key-value pairs corresponding to the given keys from an object.

+
Use Array.reduce() to convert the filtered/picked keys back to a object with the corresponding key-value pair if the key exist in the obj.

+
const pick = (obj, arr) =>
+  arr.reduce((acc, curr) => (curr in obj && (acc[curr] = obj[curr]), acc), {});
+// pick({ 'a': 1, 'b': '2', 'c': 3 }, ['a', 'c']) -> { 'a': 1, 'c': 3 }
+

+

pull

+
Mutates the original array to filter out the values specified.

+
Use Array.filter() and Array.includes() to pull out the values that are not needed.
+Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.

+
(For a snippet that does not mutate the original array see without)

+
const pull = (arr, ...args) => {
+  let argState = Array.isArray(args[0]) ? args[0] : args;
+  let pulled = arr.filter((v, i) => !argState.includes(v));
+  arr.length = 0; 
+  pulled.forEach(v => arr.push(v));
 };
 
 // let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];
 // pull(myArray1, 'a', 'c');
-// console.log(myArray1) -> [ 'b', 'b' ]
+// console.log(myArray1) -> [ 'b', 'b' ]
 
 // let myArray2 = ['a', 'b', 'c', 'a', 'b', 'c'];
 // pull(myArray2, ['a', 'c']);
-// console.log(myArray2) -> [ 'b', 'b' ]
-

pullAtIndex
Mutates the original array to filter out the values at the specified indexes.
Use Array.filter() and Array.includes() to pull out the values that are not needed. Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values. Use Array.push() to keep track of pulled values
const pullAtIndex = (arr, pullArr) => {
+// console.log(myArray2) -> [ 'b', 'b' ]
+

+

pullAtIndex

+
Mutates the original array to filter out the values at the specified indexes.

+
Use Array.filter() and Array.includes() to pull out the values that are not needed.
+Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.
+Use Array.push() to keep track of pulled values

+
const pullAtIndex = (arr, pullArr) => {
   let removed = [];
-  let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v)
-                  .filter((v, i) => !pullArr.includes(i))
+  let pulled = arr.map((v, i) => pullArr.includes(i) ? removed.push(v) : v)
+                  .filter((v, i) => !pullArr.includes(i))
   arr.length = 0; 
-  pulled.forEach(v => arr.push(v));
+  pulled.forEach(v => arr.push(v));
   return removed;
 }
 
 // let myArray = ['a', 'b', 'c', 'd'];
 // let pulled = pullAtIndex(myArray, [1, 3]);
 
-// console.log(myArray); -> [ 'a', 'c' ]
-// console.log(pulled); -> [ 'b', 'd' ]
-

pullAtValue
Mutates the original array to filter out the values specified. Returns the removed elements.
Use Array.filter() and Array.includes() to pull out the values that are not needed. Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values. Use Array.push() to keep track of pulled values
const pullAtValue = (arr, pullArr) => {
+// console.log(myArray); -> [ 'a', 'c' ]
+// console.log(pulled); -> [ 'b', 'd' ]
+

+

pullAtValue

+
Mutates the original array to filter out the values specified. Returns the removed elements.

+
Use Array.filter() and Array.includes() to pull out the values that are not needed.
+Use Array.length = 0 to mutate the passed in array by resetting it's length to zero and Array.push() to re-populate it with only the pulled values.
+Use Array.push() to keep track of pulled values

+
const pullAtValue = (arr, pullArr) => {
   let removed = [], 
-    pushToRemove = arr.forEach((v, i) => pullArr.includes(v) ? removed.push(v) : v),
-    mutateTo = arr.filter((v, i) => !pullArr.includes(v));
+    pushToRemove = arr.forEach((v, i) => pullArr.includes(v) ? removed.push(v) : v),
+    mutateTo = arr.filter((v, i) => !pullArr.includes(v));
   arr.length = 0;
-  mutateTo.forEach(v => arr.push(v));
+  mutateTo.forEach(v => arr.push(v));
   return removed;
 }
 /*
 let myArray = ['a', 'b', 'c', 'd'];
 let pulled = pullAtValue(myArray, ['b', 'd']);
-console.log(myArray); -> [ 'a', 'c' ]
-console.log(pulled); -> [ 'b', 'd' ]
+console.log(myArray); -> [ 'a', 'c' ]
+console.log(pulled); -> [ 'b', 'd' ]
 */
-

remove
Removes elements from an array for which the given function returns false.
Use Array.filter() to find array elements that return truthy values and Array.reduce() to remove elements using Array.splice(). The func is invoked with three arguments (value, index, array).
const remove = (arr, func) =>
-  Array.isArray(arr) ? arr.filter(func).reduce((acc, val) => {
+

+

remove

+
Removes elements from an array for which the given function returns false.

+
Use Array.filter() to find array elements that return truthy values and Array.reduce() to remove elements using Array.splice().
+The func is invoked with three arguments (value, index, array).

+
const remove = (arr, func) =>
+  Array.isArray(arr) ? arr.filter(func).reduce((acc, val) => {
     arr.splice(arr.indexOf(val), 1); return acc.concat(val);
     }, [])
   : [];
-// remove([1, 2, 3, 4], n => n % 2 == 0) -> [2, 4]
-

sample
Returns a random element from an array.
Use Math.random() to generate a random number, multiply it with length and round it of to the nearest whole number using Math.floor(). This method also works with strings.
const sample = arr => arr[Math.floor(Math.random() * arr.length)];
-// sample([3, 7, 9, 11]) -> 9
-

shuffle
Randomizes the order of the values of an array.
Use Array.sort() to reorder elements, using Math.random() in the comparator.
const shuffle = arr => arr.sort(() => Math.random() - 0.5);
-// shuffle([1,2,3]) -> [2,3,1]
-

similarity
Returns an array of elements that appear in both arrays.
Use filter() to remove values that are not part of values, determined using includes().
const similarity = (arr, values) => arr.filter(v => values.includes(v));
-// similarity([1,2,3], [1,2,4]) -> [1,2]
-

symmetricDifference
Returns the symmetric difference between two arrays.
Create a Set from each array, then use Array.filter() on each of them to only keep values not contained in the other.
const symmetricDifference = (a, b) => {
+// remove([1, 2, 3, 4], n => n % 2 == 0) -> [2, 4]
+

+

sample

+
Returns a random element from an array.

+
Use Math.random() to generate a random number, multiply it with length and round it of to the nearest whole number using Math.floor().
+This method also works with strings.

+
const sample = arr => arr[Math.floor(Math.random() * arr.length)];
+// sample([3, 7, 9, 11]) -> 9
+

+

shuffle

+
Randomizes the order of the values of an array.

+
Use Array.sort() to reorder elements, using Math.random() in the comparator.

+
const shuffle = arr => arr.sort(() => Math.random() - 0.5);
+// shuffle([1,2,3]) -> [2,3,1]
+

+

similarity

+
Returns an array of elements that appear in both arrays.

+
Use filter() to remove values that are not part of values, determined using includes().

+
const similarity = (arr, values) => arr.filter(v => values.includes(v));
+// similarity([1,2,3], [1,2,4]) -> [1,2]
+

+

symmetricDifference

+
Returns the symmetric difference between two arrays.

+
Create a Set from each array, then use Array.filter() on each of them to only keep values not contained in the other.

+
const symmetricDifference = (a, b) => {
   const sA = new Set(a), sB = new Set(b);
-  return [...a.filter(x => !sB.has(x)), ...b.filter(x => !sA.has(x))];
+  return [...a.filter(x => !sB.has(x)), ...b.filter(x => !sA.has(x))];
 }
-// symmetricDifference([1,2,3], [1,2,4]) -> [3,4]
-

tail
Returns all elements in an array except for the first one.
Return arr.slice(1) if the array's length is more than 1, otherwise return the whole array.
const tail = arr => arr.length > 1 ? arr.slice(1) : arr;
-// tail([1,2,3]) -> [2,3]
-// tail([1]) -> [1]
-

take
Returns an array with n elements removed from the beginning.
Use Array.slice() to create a slice of the array with n elements taken from the beginning.
const take = (arr, n = 1) => arr.slice(0, n);
-// take([1, 2, 3], 5) -> [1, 2, 3]
-// take([1, 2, 3], 0) -> []
-

takeRight
Returns an array with n elements removed from the end.
Use Array.slice() to create a slice of the array with n elements taken from the end.
const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
-// takeRight([1, 2, 3], 2) -> [ 2, 3 ]
-// takeRight([1, 2, 3]) -> [3]
-

union
Returns every element that exists in any of the two arrays once.
Create a Set with all values of a and b and convert to an array.
const union = (a, b) => Array.from(new Set([...a, ...b]));
-// union([1,2,3], [4,3,2]) -> [1,2,3,4]
-

without
Filters out the elements of an array, that have one of the specified values.
Use Array.filter() to create an array excluding(using !Array.includes()) all given values.
(For a snippet that mutates the original array see pull)
const without = (arr, ...args) => arr.filter(v => !args.includes(v));
-// without([2, 1, 2, 3], 1, 2) -> [3]
-

zip
Creates an array of elements, grouped based on the position in the original arrays.
Use Math.max.apply() to get the longest array in the arguments. Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements. If lengths of the argument-arrays vary, undefined is used where no value could be found.
const zip = (...arrays) => {
-  const maxLength = Math.max(...arrays.map(x => x.length));
-  return Array.from({length: maxLength}).map((_, i) => {
-   return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);
+// symmetricDifference([1,2,3], [1,2,4]) -> [3,4]
+

+

tail

+
Returns all elements in an array except for the first one.

+
Return arr.slice(1) if the array's length is more than 1, otherwise return the whole array.

+
const tail = arr => arr.length > 1 ? arr.slice(1) : arr;
+// tail([1,2,3]) -> [2,3]
+// tail([1]) -> [1]
+

+

take

+
Returns an array with n elements removed from the beginning.

+
Use Array.slice() to create a slice of the array with n elements taken from the beginning.

+
const take = (arr, n = 1) => arr.slice(0, n);
+// take([1, 2, 3], 5) -> [1, 2, 3]
+// take([1, 2, 3], 0) -> []
+

+

takeRight

+
Returns an array with n elements removed from the end.

+
Use Array.slice() to create a slice of the array with n elements taken from the end.

+
const takeRight = (arr, n = 1) => arr.slice(arr.length - n, arr.length);
+// takeRight([1, 2, 3], 2) -> [ 2, 3 ]
+// takeRight([1, 2, 3]) -> [3]
+

+

union

+
Returns every element that exists in any of the two arrays once.

+
Create a Set with all values of a and b and convert to an array.

+
const union = (a, b) => Array.from(new Set([...a, ...b]));
+// union([1,2,3], [4,3,2]) -> [1,2,3,4]
+

+

without

+
Filters out the elements of an array, that have one of the specified values.

+
Use Array.filter() to create an array excluding(using !Array.includes()) all given values.

+
(For a snippet that mutates the original array see pull)

+
const without = (arr, ...args) => arr.filter(v => !args.includes(v));
+// without([2, 1, 2, 3], 1, 2) -> [3]
+

+

zip

+
Creates an array of elements, grouped based on the position in the original arrays.

+
Use Math.max.apply() to get the longest array in the arguments.
+Creates an array with that length as return value and use Array.from() with a map-function to create an array of grouped elements.
+If lengths of the argument-arrays vary, undefined is used where no value could be found.

+
const zip = (...arrays) => {
+  const maxLength = Math.max(...arrays.map(x => x.length));
+  return Array.from({length: maxLength}).map((_, i) => {
+   return Array.from({length: arrays.length}, (_, k) => arrays[k][i]);
   })
 }
-//zip(['a', 'b'], [1, 2], [true, false]); -> [['a', 1, true], ['b', 2, false]]
-//zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]
-

Browser
arrayToHtmlList
Converts the given array elements into <li> tags and appends them to the list of the given id.
Use Array.map() and document.querySelector() to create a list of html tags.
const arrayToHtmlList = (arr, listID) => arr.map(item => document.querySelector("#"+listID).innerHTML+=`<li>${item}</li>`);
+//zip(['a', 'b'], [1, 2], [true, false]); -> [['a', 1, true], ['b', 2, false]]
+//zip(['a'], [1, 2], [true, false]); -> [['a', 1, true], [undefined, 2, false]]
+

+

zipObject

+
Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.

+
Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using Array.reduce().

+
const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} )
+// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined}
+// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2}
+

+

Browser

+
arrayToHtmlList

+
Converts the given array elements into <li> tags and appends them to the list of the given id.

+
Use Array.map() and document.querySelector() to create a list of html tags.

+
const arrayToHtmlList = (arr, listID) => arr.map(item => document.querySelector("#"+listID).innerHTML+=`<li>${item}</li>`);
 // arrayToHtmlList(['item 1', 'item 2'],'myListID')
-

bottomVisible
Returns true if the bottom of the page is visible, false otherwise.
Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.
const bottomVisible = () =>
-  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
-// bottomVisible() -> true
-

currentURL
Returns the current URL.
Use window.location.href to get current URL.
const currentURL = () => window.location.href;
-// currentUrl() -> 'https://google.com'
-

elementIsVisibleInViewport
Returns true if the element specified is visible in the viewport, false otherwise.
Use Element.getBoundingClientRect() and the window.inner(Width|Height) values to determine if a given element is visible in the viewport. Omit the second argument to determine if the element is entirely visible, or specify true to determine if it is partially visible.
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
+

+

bottomVisible

+
Returns true if the bottom of the page is visible, false otherwise.

+
Use scrollY, scrollHeight and clientHeight to determine if the bottom of the page is visible.

+
const bottomVisible = () =>
+  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
+// bottomVisible() -> true
+

+

currentURL

+
Returns the current URL.

+
Use window.location.href to get current URL.

+
const currentURL = () => window.location.href;
+// currentUrl() -> 'https://google.com'
+

+

elementIsVisibleInViewport

+
Returns true if the element specified is visible in the viewport, false otherwise.

+
Use Element.getBoundingClientRect() and the window.inner(Width|Height) values
+to determine if a given element is visible in the viewport.
+Omit the second argument to determine if the element is entirely visible, or specify true to determine if
+it is partially visible.

+
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
   const { top, left, bottom, right } = el.getBoundingClientRect();
   return partiallyVisible
-    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
-      ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
-    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
+      ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
+    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
 };
 // e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
-// elementIsVisibleInViewport(el) -> false (not fully visible)
-// elementIsVisibleInViewport(el, true) -> true (partially visible)
-

getScrollPosition
Returns the scroll position of the current page.
Use pageXOffset and pageYOffset if they are defined, otherwise scrollLeft and scrollTop. You can omit el to use a default value of window.
const getScrollPosition = (el = window) =>
+// elementIsVisibleInViewport(el) -> false (not fully visible)
+// elementIsVisibleInViewport(el, true) -> true (partially visible)
+

+

getScrollPosition

+
Returns the scroll position of the current page.

+
Use pageXOffset and pageYOffset if they are defined, otherwise scrollLeft and scrollTop.
+You can omit el to use a default value of window.

+
const getScrollPosition = (el = window) =>
   ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
     y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
-// getScrollPosition() -> {x: 0, y: 200}
-

getURLParameters
Returns an object containing the parameters of the current URL.
Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object. Pass location.search as the argument to apply to the current url.
const getURLParameters = url =>
-  url.match(/([^?=&]+)(=([^&]*))/g).reduce(
-    (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
+// getScrollPosition() -> {x: 0, y: 200}
+

+

getURLParameters

+
Returns an object containing the parameters of the current URL.

+
Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object.
+Pass location.search as the argument to apply to the current url.

+
const getURLParameters = url =>
+  url.match(/([^?=&]+)(=([^&]*))/g).reduce(
+    (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
   );
-// getURLParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}
-

redirect
Redirects to a specified URL.
Use window.location.href or window.location.replace() to redirect to url. Pass a second argument to simulate a link click (true - default) or an HTTP redirect (false).
const redirect = (url, asLink = true) =>
+// getURLParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}
+

+

redirect

+
Redirects to a specified URL.

+
Use window.location.href or window.location.replace() to redirect to url.
+Pass a second argument to simulate a link click (true - default) or an HTTP redirect (false).

+
const redirect = (url, asLink = true) =>
   asLink ? window.location.href = url : window.location.replace(url);
 // redirect('https://google.com')
-

scrollToTop
Smooth-scrolls to the top of the page.
Get distance from top using document.documentElement.scrollTop or document.body.scrollTop. Scroll by a fraction of the distance from top. Use window.requestAnimationFrame() to animate the scrolling.
const scrollToTop = () => {
+

+

scrollToTop

+
Smooth-scrolls to the top of the page.

+
Get distance from top using document.documentElement.scrollTop or document.body.scrollTop.
+Scroll by a fraction of the distance from top. Use window.requestAnimationFrame() to animate the scrolling.

+
const scrollToTop = () => {
   const c = document.documentElement.scrollTop || document.body.scrollTop;
-  if (c > 0) {
+  if (c > 0) {
     window.requestAnimationFrame(scrollToTop);
     window.scrollTo(0, c - c / 8);
   }
 };
 // scrollToTop()
-

Date
getDaysDiffBetweenDates
Returns the difference (in days) between two dates.
Calculate the difference (in days) between to Date objects.
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
-// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9
-

JSONToDate
Converts a JSON object to a date.
Use Date(), to convert dates in JSON format to readable format (dd/mm/yyyy).
const JSONToDate = arr => {
+

+

Date

+
getDaysDiffBetweenDates

+
Returns the difference (in days) between two dates.

+
Calculate the difference (in days) between to Date objects.

+
const getDaysDiffBetweenDates = (dateInitial, dateFinal) => (dateFinal - dateInitial) / (1000 * 3600 * 24);
+// getDaysDiffBetweenDates(new Date("2017-12-13"), new Date("2017-12-22")) -> 9
+

+

JSONToDate

+
Converts a JSON object to a date.

+
Use Date(), to convert dates in JSON format to readable format (dd/mm/yyyy).

+
const JSONToDate = arr => {
   const dt = new Date(parseInt(arr.toString().substr(6)));
   return `${ dt.getDate() }/${ dt.getMonth() + 1 }/${ dt.getFullYear() }`
 };
-// JSONToDate(/Date(1489525200000)/) -> "14/3/2017"
-

toEnglishDate
Converts a date from American format to English format.
Use Date.toISOString(), split('T') and replace() to convert a date from American format to English format. Throws an error if the passed time cannot be converted to a date.
const toEnglishDate  = (time) =>
+// JSONToDate(/Date(1489525200000)/) -> "14/3/2017"
+

+

toEnglishDate

+
Converts a date from American format to English format.

+
Use Date.toISOString(), split('T') and replace() to convert a date from American format to English format.
+Throws an error if the passed time cannot be converted to a date.

+
const toEnglishDate  = (time) =>
   {try{return new Date(time).toISOString().split('T')[0].replace(/-/g, '/')}catch(e){return}};
-// toEnglishDate('09/21/2010') -> '21/09/2010'
-

Function
chainAsync
Chains asynchronous functions.
Loop through an array of functions containing asynchronous events, calling next when each asynchronous event has completed.
const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); };
+// toEnglishDate('09/21/2010') -> '21/09/2010'
+

+

Function

+
chainAsync

+
Chains asynchronous functions.

+
Loop through an array of functions containing asynchronous events, calling next when each asynchronous event has completed.

+
const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); };
 /*
 chainAsync([
-  next => { console.log('0 seconds'); setTimeout(next, 1000); },
-  next => { console.log('1 second');  setTimeout(next, 1000); },
-  next => { console.log('2 seconds'); }
+  next => { console.log('0 seconds'); setTimeout(next, 1000); },
+  next => { console.log('1 second');  setTimeout(next, 1000); },
+  next => { console.log('2 seconds'); }
 ])
 */
-

compose
Performs right-to-left function composition.
Use Array.reduce() to perform right-to-left function composition. The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
+

+

compose

+
Performs right-to-left function composition.

+
Use Array.reduce() to perform right-to-left function composition.
+The last (rightmost) function can accept one or more arguments; the remaining functions must be unary.

+
const compose = (...fns) => fns.reduce((f, g) => (...args) => f(g(...args)));
 /*
-const add5 = x => x + 5
-const multiply = (x, y) => x * y
+const add5 = x => x + 5
+const multiply = (x, y) => x * y
 const multiplyAndAdd5 = compose(add5, multiply)
-multiplyAndAdd5(5, 2) -> 15
+multiplyAndAdd5(5, 2) -> 15
 */
-

curry
Curries a function.
Use recursion. If the number of provided arguments (args) is sufficient, call the passed function f. Otherwise return a curried function f that expects the rest of the arguments. If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. Math.min()), you can optionally pass the number of arguments to the second parameter arity.
const curry = (fn, arity = fn.length, ...args) =>
+

+

curry

+
Curries a function.

+
Use recursion.
+If the number of provided arguments (args) is sufficient, call the passed function f.
+Otherwise return a curried function f that expects the rest of the arguments.
+If you want to curry a function that accepts a variable number of arguments (a variadic function, e.g. Math.min()), you can optionally pass the number of arguments to the second parameter arity.

+
const curry = (fn, arity = fn.length, ...args) =>
   arity <= args.length
     ? fn(...args)
     : curry.bind(null, fn, arity, ...args);
-// curry(Math.pow)(2)(10) -> 1024
-// curry(Math.min, 3)(10)(50)(2) -> 2
-

functionName
Logs the name of a function.
Use console.debug() and the name property of the passed method to log the method's name to the debug channel of the console.
const functionName = fn => (console.debug(fn.name), fn);
-// functionName(Math.max) -> max (logged in debug channel of console)
-

pipe
Performs left-to-right function composition.
Use Array.reduce() with the spread operator (...) to perform left-to-right function composition. The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.
const pipeFunctions = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));
+// curry(Math.pow)(2)(10) -> 1024
+// curry(Math.min, 3)(10)(50)(2) -> 2
+

+

functionName

+
Logs the name of a function.

+
Use console.debug() and the name property of the passed method to log the method's name to the debug channel of the console.

+
const functionName = fn => (console.debug(fn.name), fn);
+// functionName(Math.max) -> max (logged in debug channel of console)
+

+

pipe

+
Performs left-to-right function composition.

+
Use Array.reduce() with the spread operator (...) to perform left-to-right function composition.
+The first (leftmost) function can accept one or more arguments; the remaining functions must be unary.

+
const pipeFunctions = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));
 /*
-const add5 = x => x + 5
-const multiply = (x, y) => x * y
+const add5 = x => x + 5
+const multiply = (x, y) => x * y
 const multiplyAndAdd5 = pipeFunctions(multiply, add5)
-multiplyAndAdd5(5, 2) -> 15
+multiplyAndAdd5(5, 2) -> 15
 */
-

promisify
Converts an asynchronous function to return a promise.
Use currying to return a function returning a Promise that calls the original function. Use the ...rest operator to pass in all the parameters.
In Node 8+, you can use util.promisify
const promisify = func =>
-  (...args) =>
-    new Promise((resolve, reject) =>
-      func(...args, (err, result) =>
+

+

promisify

+
Converts an asynchronous function to return a promise.

+
Use currying to return a function returning a Promise that calls the original function.
+Use the ...rest operator to pass in all the parameters.

+
In Node 8+, you can use util.promisify

+
const promisify = func =>
+  (...args) =>
+    new Promise((resolve, reject) =>
+      func(...args, (err, result) =>
         err ? reject(err) : resolve(result))
     );
-// const delay = promisify((d, cb) => setTimeout(cb, d))
-// delay(2000).then(() => console.log('Hi!')) -> Promise resolves after 2s
-

runPromisesInSeries
Runs an array of promises in series.
Use Array.reduce() to create a promise chain, where each promise returns the next promise when resolved.
const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
-// const delay = (d) => new Promise(r => setTimeout(r, d))
-// runPromisesInSeries([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete
-

sleep
Delays the execution of an asynchronous function.
Delay executing part of an async function, by putting it to sleep, returning a Promise.
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
+// const delay = promisify((d, cb) => setTimeout(cb, d))
+// delay(2000).then(() => console.log('Hi!')) -> Promise resolves after 2s
+

+

runPromisesInSeries

+
Runs an array of promises in series.

+
Use Array.reduce() to create a promise chain, where each promise returns the next promise when resolved.

+
const runPromisesInSeries = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
+// const delay = (d) => new Promise(r => setTimeout(r, d))
+// runPromisesInSeries([() => delay(1000), () => delay(2000)]) -> executes each promise sequentially, taking a total of 3 seconds to complete
+

+

sleep

+
Delays the execution of an asynchronous function.

+
Delay executing part of an async function, by putting it to sleep, returning a Promise.

+
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 /*
 async function sleepyWork() {
   console.log('I\'m going to sleep for 1 second.');
@@ -247,93 +726,241 @@ async function sleepyWork() {
   console.log('I woke up after 1 second.');
 }
 */
-

Math
arrayAverage
Returns the average of an array of numbers.
Use Array.reduce() to add each value to an accumulator, initialized with a value of 0, divide by the length of the array.
const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
-// arrayAverage([1,2,3]) -> 2
-

arraySum
Returns the sum of an array of numbers.
Use Array.reduce() to add each value to an accumulator, initialized with a value of 0.
const arraySum = arr => arr.reduce((acc, val) => acc + val, 0);
-// arraySum([1,2,3,4]) -> 10
-

collatz
Applies the Collatz algorithm.
If n is even, return n/2. Otherwise return 3n+1.
const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1);
-// collatz(8) --> 4
-// collatz(5) --> 16
-

digitize
Converts a number to an array of digits.
Convert the number to a string, using spread operators in ES6([...string]) build an array. Use Array.map() and parseInt() to transform each value to an integer.
const digitize = n => [...''+n].map(i => parseInt(i));
-// digitize(2334) -> [2, 3, 3, 4]
-

distance
Returns the distance between two points.
Use Math.hypot() to calculate the Euclidean distance between two points.
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
-// distance(1,1, 2,3) -> 2.23606797749979
-

factorial
Calculates the factorial of a number.
Use recursion. If n is less than or equal to 1, return 1. Otherwise, return the product of n and the factorial of n - 1. Throws an exception if n is a negative number.
const factorial = n =>
-  n < 0 ? (() => { throw new TypeError('Negative numbers are not allowed!') })()
-  : n <= 1 ? 1 : n * factorial(n - 1);
-// factorial(6) -> 720
-

fibonacci
Generates an array, containing the Fibonacci sequence, up until the nth term.
Create an empty array of the specific length, initializing the first two values (0 and 1). Use Array.reduce() to add values into the array, using the sum of the last two values, except for the first two.
const fibonacci = n =>
-  Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
-// fibonacci(5) -> [0,1,1,2,3]
-

gcd
Calculates the greatest common divisor between two numbers.
Use recursion. Base case is when y equals 0. In this case, return x. Otherwise, return the GCD of y and the remainder of the division x/y.
const gcd = (x, y) => !y ? x : gcd(y, x % y);
-// gcd (8, 36) -> 4
-

hammingDistance
Calculates the Hamming distance between two values.
Use XOR operator (^) to find the bit difference between the two numbers, convert to binary string using toString(2). Count and return the number of 1s in the string, using match(/1/g).
const hammingDistance = (num1, num2) =>
-  ((num1 ^ num2).toString(2).match(/1/g) || '').length;
-// hammingDistance(2,3) -> 1
-

isArmstrongNumber
Checks if the given number is an armstrong number or not.
Convert the given number into array of digits. Use Math.pow() to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return true otherwise false.
const isArmstrongNumber = digits => 
-  ( arr => arr.reduce( ( a, d ) => a + Math.pow( parseInt( d ), arr.length ), 0 ) == digits ? true : false )( ( digits+'' ).split( '' ) );
-// isArmstrongNumber(1634) -> true
-// isArmstrongNumber(371) -> true
-// isArmstrongNumber(56) -> false
-

isDivisible
Checks if the first numeric argument is divisible by the second one.
Use the modulo operator (%) to check if the remainder is equal to 0.
const isDivisible = (dividend, divisor) => dividend % divisor === 0;
-// isDivisible(6,3) -> true
-

isEven
Returns true if the given number is even, false otherwise.
Checks whether a number is odd or even using the modulo (%) operator. Returns true if the number is even, false if the number is odd.
const isEven = num => num % 2 === 0;
-// isEven(3) -> false
-

isPrime
Checks if the provided integer is a prime number.
Returns false if the provided number has positive divisors other than 1 and itself or if the number itself is less than 2.
const isPrime = num => {
-  for (var i = 2; i < num; i++) if (num % i == 0) return false;
-  return num >= 2;
+

+

Math

+
arrayAverage

+
Returns the average of an array of numbers.

+
Use Array.reduce() to add each value to an accumulator, initialized with a value of 0, divide by the length of the array.

+
const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length;
+// arrayAverage([1,2,3]) -> 2
+

+

arraySum

+
Returns the sum of an array of numbers.

+
Use Array.reduce() to add each value to an accumulator, initialized with a value of 0.

+
const arraySum = arr => arr.reduce((acc, val) => acc + val, 0);
+// arraySum([1,2,3,4]) -> 10
+

+

clampNumber

+
Clamps num within the inclusive lower and upper bounds.

+
If lower is greater than upper, swap them.
+If num falls within the range, return num.
+Otherwise return the nearest number in the range.

+
const clampNumber = (num, lower, upper) => {
+  if(lower > upper) upper = [lower, lower = upper][0];
+  return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper) 
 }
-// isPrime(11) -> true
-// isPrime(12) -> false
-// isPrime(1) -> false
-

lcm
Returns the least common multiple of two numbers.
Use the greatest common divisor (GCD) formula and Math.abs() to determine the least common multiple. The GCD formula uses recursion.
const lcm = (x,y) => {
-  const gcd = (x, y) => !y ? x : gcd(y, x % y);
+// clampNumber(2, 3, 5) -> 3
+// clampNumber(1, -1, -5) -> -1
+// clampNumber(3, 2, 4) -> 3
+

+

collatz

+
Applies the Collatz algorithm.

+
If n is even, return n/2. Otherwise  return 3n+1.

+
const collatz = n => (n % 2 == 0) ? (n / 2) : (3 * n + 1);
+// collatz(8) --> 4
+// collatz(5) --> 16
+

+

digitize

+
Converts a number to an array of digits.

+
Convert the number to a string, using spread operators in ES6([...string]) build an array.
+Use Array.map() and parseInt() to transform each value to an integer.

+
const digitize = n => [...''+n].map(i => parseInt(i));
+// digitize(2334) -> [2, 3, 3, 4]
+

+

distance

+
Returns the distance between two points.

+
Use Math.hypot() to calculate the Euclidean distance between two points.

+
const distance = (x0, y0, x1, y1) => Math.hypot(x1 - x0, y1 - y0);
+// distance(1,1, 2,3) -> 2.23606797749979
+

+

factorial

+
Calculates the factorial of a number.

+
Use recursion.
+If n is less than or equal to 1, return 1.
+Otherwise, return the product of n and the factorial of n - 1.
+Throws an exception if n is a negative number.

+
const factorial = n =>
+  n < 0 ? (() => { throw new TypeError('Negative numbers are not allowed!') })()
+  : n <= 1 ? 1 : n * factorial(n - 1);
+// factorial(6) -> 720
+

+

fibonacci

+
Generates an array, containing the Fibonacci sequence, up until the nth term.

+
Create an empty array of the specific length, initializing the first two values (0 and 1).
+Use Array.reduce() to add values into the array, using the sum of the last two values, except for the first two.

+
const fibonacci = n =>
+  Array(n).fill(0).reduce((acc, val, i) => acc.concat(i > 1 ? acc[i - 1] + acc[i - 2] : i), []);
+// fibonacci(5) -> [0,1,1,2,3]
+

+

gcd

+
Calculates the greatest common divisor between two numbers.

+
Use recursion.
+Base case is when y equals 0. In this case, return x.
+Otherwise, return the GCD of y and the remainder of the division x/y.

+
const gcd = (x, y) => !y ? x : gcd(y, x % y);
+// gcd (8, 36) -> 4
+

+

hammingDistance

+
Calculates the Hamming distance between two values.

+
Use XOR operator (^) to find the bit difference between the two numbers, convert to binary string using toString(2).
+Count and return the number of 1s in the string, using match(/1/g).

+
const hammingDistance = (num1, num2) =>
+  ((num1 ^ num2).toString(2).match(/1/g) || '').length;
+// hammingDistance(2,3) -> 1
+

+

inRange

+
Checks if the given number falls in the given range.

+
Use arithmetic comparison to check if the given number is in the specified range.
+If the second parameter, end, is not specified, the reange is considered to be from 0 to start.

+
const inRange = (n, start, end=null) => {
+  if(end && start > end) end = [start, start=end][0];
+  return (end == null) ? (n>=0 && n<start) : (n>=start && n<end);
+}
+// inRange(3, 2, 5) -> true
+// inRange(3, 4) -> true
+// inRange(2, 3, 5) -> false
+// inrange(3, 2) -> false
+

+

isArmstrongNumber

+
Checks if the given number is an armstrong number or not.

+
Convert the given number into array of digits. Use Math.pow() to get the appropriate power for each digit and sum them up. If the sum is equal to the number itself, return true otherwise false.

+
const isArmstrongNumber = digits => 
+  ( arr => arr.reduce( ( a, d ) => a + Math.pow( parseInt( d ), arr.length ), 0 ) == digits ? true : false )( ( digits+'' ).split( '' ) );
+// isArmstrongNumber(1634) -> true
+// isArmstrongNumber(371) -> true
+// isArmstrongNumber(56) -> false
+

+

isDivisible

+
Checks if the first numeric argument is divisible by the second one.

+
Use the modulo operator (%) to check if the remainder is equal to 0.

+
const isDivisible = (dividend, divisor) => dividend % divisor === 0;
+// isDivisible(6,3) -> true
+

+

isEven

+
Returns true if the given number is even, false otherwise.

+
Checks whether a number is odd or even using the modulo (%) operator.
+Returns true if the number is even, false if the number is odd.

+
const isEven = num => num % 2 === 0;
+// isEven(3) -> false
+

+

isPrime

+
Checks if the provided integer is a prime number.

+
Returns false if the provided number has positive divisors other than 1 and itself or if the number itself is less than 2.

+
const isPrime = num => {
+  for (var i = 2; i < num; i++) if (num % i == 0) return false;
+  return num >= 2;
+}
+// isPrime(11) -> true
+// isPrime(12) -> false
+// isPrime(1) -> false
+

+

lcm

+
Returns the least common multiple of two numbers.

+
Use the greatest common divisor (GCD) formula and Math.abs() to determine the least common multiple.
+The GCD formula uses recursion.

+
const lcm = (x,y) => {
+  const gcd = (x, y) => !y ? x : gcd(y, x % y);
   return Math.abs(x*y)/(gcd(x,y));
 };
-// lcm(12,7) -> 84
-

median
Returns the median of an array of numbers.
Find the middle of the array, use Array.sort() to sort the values. Return the number at the midpoint if length is odd, otherwise the average of the two middle numbers.
const median = arr => {
-  const mid = Math.floor(arr.length / 2), nums = [...arr].sort((a, b) => a - b);
+// lcm(12,7) -> 84
+

+

median

+
Returns the median of an array of numbers.

+
Find the middle of the array, use Array.sort() to sort the values.
+Return the number at the midpoint if length is odd, otherwise the average of the two middle numbers.

+
const median = arr => {
+  const mid = Math.floor(arr.length / 2), nums = [...arr].sort((a, b) => a - b);
   return arr.length % 2 !== 0 ? nums[mid] : (nums[mid - 1] + nums[mid]) / 2;
 };
-// median([5,6,50,1,-5]) -> 5
-// median([0,10,-2,7]) -> 3.5
-

palindrome
Returns true if the given string is a palindrome, false otherwise.
Convert string toLowerCase() and use replace() to remove non-alphanumeric characters from it. Then, split('') into individual characters, reverse(), join('') and compare to the original, unreversed string, after converting it tolowerCase().
const palindrome = str => {
+// median([5,6,50,1,-5]) -> 5
+// median([0,10,-2,7]) -> 3.5
+

+

palindrome

+
Returns true if the given string is a palindrome, false otherwise.

+
Convert string toLowerCase() and use replace() to remove non-alphanumeric characters from it.
+Then, split('') into individual characters, reverse(), join('') and compare to the original, unreversed string, after converting it tolowerCase().

+
const palindrome = str => {
   const s = str.toLowerCase().replace(/[\W_]/g,'');
   return s === s.split('').reverse().join('');
 }
-// palindrome('taco cat') -> true
-

percentile
Uses the percentile formula to calculate how many numbers in the given array are less or equal to the given value.
Use Array.reduce() to calculate how many numbers are below the value and how many are the same value and apply the percentile formula.
const percentile = (arr, val) =>
-  100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length;
-// percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55
-

powerset
Returns the powerset of a given array of numbers.
Use Array.reduce() combined with Array.map() to iterate over elements and combine into an array containing all combinations.
const powerset = arr =>
-  arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
-// powerset([1,2]) -> [[], [1], [2], [2,1]]
-

randomIntegerInRange
Returns a random integer in the specified range.
Use Math.random() to generate a random number and map it to the desired range, using Math.floor() to make it an integer.
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
-// randomIntegerInRange(0, 5) -> 2
-

randomNumberInRange
Returns a random number in the specified range.
Use Math.random() to generate a random value, map it to the desired range using multiplication.
const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;
-// randomNumberInRange(2,10) -> 6.0211363285087005
-

round
Rounds a number to a specified amount of digits.
Use Math.round() and template literals to round the number to the specified number of digits. Omit the second argument, decimals to round to an integer.
const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
-// round(1.005, 2) -> 1.01
-

standardDeviation
Returns the standard deviation of an array of numbers.
Use Array.reduce() to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then determine the standard deviation. You can omit the second argument to get the sample standard deviation or set it to true to get the population standard deviation.
const standardDeviation = (arr, usePopulation = false) => {
-  const mean = arr.reduce((acc, val) => acc + val, 0) / arr.length;
+// palindrome('taco cat') -> true
+

+

percentile

+
Uses the percentile formula to calculate how many numbers in the given array are less or equal to the given value.

+
Use Array.reduce() to calculate how many numbers are below the value and how many are the same value and apply the percentile formula.

+
const percentile = (arr, val) =>
+  100 * arr.reduce((acc,v) => acc + (v < val ? 1 : 0) + (v === val ? 0.5 : 0), 0) / arr.length;
+// percentile([1,2,3,4,5,6,7,8,9,10], 6) -> 55
+

+

powerset

+
Returns the powerset of a given array of numbers.

+
Use Array.reduce() combined with Array.map() to iterate over elements and combine into an array containing all combinations.

+
const powerset = arr =>
+  arr.reduce((a, v) => a.concat(a.map(r => [v].concat(r))), [[]]);
+// powerset([1,2]) -> [[], [1], [2], [2,1]]
+

+

randomIntegerInRange

+
Returns a random integer in the specified range.

+
Use Math.random() to generate a random number and map it to the desired range, using Math.floor() to make it an integer.

+
const randomIntegerInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+// randomIntegerInRange(0, 5) -> 2
+

+

randomNumberInRange

+
Returns a random number in the specified range.

+
Use Math.random() to generate a random value, map it to the desired range using multiplication.

+
const randomNumberInRange = (min, max) => Math.random() * (max - min) + min;
+// randomNumberInRange(2,10) -> 6.0211363285087005
+

+

round

+
Rounds a number to a specified amount of digits.

+
Use Math.round() and template literals to round the number to the specified number of digits.
+Omit the second argument, decimals to round to an integer.

+
const round = (n, decimals=0) => Number(`${Math.round(`${n}e${decimals}`)}e-${decimals}`);
+// round(1.005, 2) -> 1.01
+

+

standardDeviation

+
Returns the standard deviation of an array of numbers.

+
Use Array.reduce() to calculate the mean, variance and the sum of the variance of the values, the variance of the values, then
+determine the standard deviation.
+You can omit the second argument to get the sample standard deviation or set it to true to get the population standard deviation.

+
const standardDeviation = (arr, usePopulation = false) => {
+  const mean = arr.reduce((acc, val) => acc + val, 0) / arr.length;
   return Math.sqrt(
-    arr.reduce((acc, val) => acc.concat(Math.pow(val - mean, 2)), [])
-       .reduce((acc, val) => acc + val, 0) / (arr.length - (usePopulation ? 0 : 1))
+    arr.reduce((acc, val) => acc.concat(Math.pow(val - mean, 2)), [])
+       .reduce((acc, val) => acc + val, 0) / (arr.length - (usePopulation ? 0 : 1))
   );
 };
-// standardDeviation([10,2,38,23,38,23,21]) -> 13.284434142114991 (sample)
-// standardDeviation([10,2,38,23,38,23,21], true) -> 12.29899614287479 (population)
-

Media
speechSynthesis
Performs speech synthesis (experimental).
Use SpeechSynthesisUtterance.voice and window.speechSynthesis.getVoices() to convert a message to speech. Use window.speechSynthesis.speak() to play the message.
Learn more about the SpeechSynthesisUtterance interface of the Web Speech API.
const speechSynthesis = message => {
+// standardDeviation([10,2,38,23,38,23,21]) -> 13.284434142114991 (sample)
+// standardDeviation([10,2,38,23,38,23,21], true) -> 12.29899614287479 (population)
+

+

Media

+
speechSynthesis

+
Performs speech synthesis (experimental).

+
Use SpeechSynthesisUtterance.voice and window.speechSynthesis.getVoices() to convert a message to speech.
+Use window.speechSynthesis.speak() to play the message.

+
Learn more about the SpeechSynthesisUtterance interface of the Web Speech API.

+
const speechSynthesis = message => {
   const msg = new SpeechSynthesisUtterance(message);
   msg.voice = window.speechSynthesis.getVoices()[0];
   window.speechSynthesis.speak(msg);
 };
-// speechSynthesis('Hello, World') -> plays the message
-

Node
JSONToFile
Writes a JSON object to a file.
Use fs.writeFile(), template literals and JSON.stringify() to write a json object to a .json file.
const fs = require('fs');
-const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2))
-// JSONToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json'
-

readFileLines
Returns an array of lines from the specified file.
Use readFileSync function in fs node package to create a Buffer from a file. convert buffer to string using toString(encoding) function. creating an array from contents of file by spliting file content line by line (each \n).
const fs = require('fs');
-const readFileLines = filename => fs.readFileSync(filename).toString('UTF8').split('\n');
+// speechSynthesis('Hello, World') -> plays the message
+

+

Node

+
JSONToFile

+
Writes a JSON object to a file.

+
Use fs.writeFile(), template literals and JSON.stringify() to write a json object to a .json file.

+
const fs = require('fs');
+const JSONToFile = (obj, filename) => fs.writeFile(`${filename}.json`, JSON.stringify(obj, null, 2))
+// JSONToFile({test: "is passed"}, 'testJsonFile') -> writes the object to 'testJsonFile.json'
+

+

readFileLines

+
Returns an array of lines from the specified file.

+
Use readFileSync function in fs node package to create a Buffer from a file.
+convert buffer to string using toString(encoding) function.
+creating an array from contents of file by spliting file content line by line (each \n).

+
const fs = require('fs');
+const readFileLines = filename => fs.readFileSync(filename).toString('UTF8').split('\n');
 /*
 contents of test.txt :
   line1
@@ -341,10 +968,16 @@ contents of test.txt :
   line3
   ___________________________
 let arr = readFileLines('test.txt')
-console.log(arr) // -> ['line1', 'line2', 'line3']
+console.log(arr) // -> ['line1', 'line2', 'line3']
 */
-

Object
cleanObj
Removes any properties except the ones specified from a JSON object.
Use Object.keys() method to loop over given json object and deleting keys that are not included in given array. Also if you give it a special key (childIndicator) it will search deeply inside it to apply function to inner objects too.
const cleanObj = (obj, keysToKeep = [], childIndicator) => {
-  Object.keys(obj).forEach(key => {
+

+

Object

+
cleanObj

+
Removes any properties except the ones specified from a JSON object.

+
Use Object.keys() method to loop over given json object and deleting keys that are not included in given array.
+Also if you give it a special key (childIndicator) it will search deeply inside it to apply function to inner objects too.

+
const cleanObj = (obj, keysToKeep = [], childIndicator) => {
+  Object.keys(obj).forEach(key => {
     if (key === childIndicator) {
       cleanObj(obj[key], keysToKeep, childIndicator);
     } else if (!keysToKeep.includes(key)) {
@@ -354,19 +987,32 @@ console.log(arr) // -> ['line1', 'line2', 'line3']
 }
 /*
   const testObj = {a: 1, b: 2, children: {a: 1, b: 2}}
-  cleanObj(testObj, ["a"],"children")
+  cleanObj(testObj, ["a"],"children")
   console.log(testObj)// { a: 1, children : { a: 1}}
 */
-

objectFromPairs
Creates an object from the given key-value pairs.
Use Array.reduce() to create and combine key-value pairs.
const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
-// objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}
-

objectToPairs
Creates an array of key-value pair arrays from an object.
Use Object.keys() and Array.map() to iterate over the object's keys and produce an array with key-value pairs.
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
-// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
-

orderBy
Returns a sorted array of objects ordered by properties and orders.
Uses a custom implementation of sort, that reduces the props array argument with a default value of 0, it uses destructuring to swap the properties position depending on the order passed. If no orders array is passed it sort by 'asc' by default.
const orderBy = (arr, props, orders) =>
-  arr.sort((a, b) =>
-    props.reduce((acc, prop, i) => {
+

+

objectFromPairs

+
Creates an object from the given key-value pairs.

+
Use Array.reduce() to create and combine key-value pairs.

+
const objectFromPairs = arr => arr.reduce((a, v) => (a[v[0]] = v[1], a), {});
+// objectFromPairs([['a',1],['b',2]]) -> {a: 1, b: 2}
+

+

objectToPairs

+
Creates an array of key-value pair arrays from an object.

+
Use Object.keys() and Array.map() to iterate over the object's keys and produce an array with key-value pairs.

+
const objectToPairs = obj => Object.keys(obj).map(k => [k, obj[k]]);
+// objectToPairs({a: 1, b: 2}) -> [['a',1],['b',2]])
+

+

orderBy

+
Returns a sorted array of objects ordered by properties and orders.

+
Uses a custom implementation of sort, that reduces the props array argument with a default value of 0, it uses destructuring to swap the properties position depending on the order passed.
+If no orders array is passed it sort by 'asc' by default.

+
const orderBy = (arr, props, orders) =>
+  arr.sort((a, b) =>
+    props.reduce((acc, prop, i) => {
       if (acc === 0) {
-        const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
-        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
+        const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
+        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
       }
       return acc;
     }, 0)
@@ -374,130 +1020,281 @@ console.log(arr) // -> ['line1', 'line2', 'line3']
 /*
 const users = [{ 'name': 'fred',   'age': 48 },{ 'name': 'barney', 'age': 36 },
   { 'name': 'fred',   'age': 40 },{ 'name': 'barney', 'age': 34 }];
-orderby(users, ['name', 'age'], ['asc', 'desc']) -> [{name: 'barney', age: 36}, {name: 'barney', age: 34}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]
-orderby(users, ['name', 'age']) -> [{name: 'barney', age: 34}, {name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]
+orderby(users, ['name', 'age'], ['asc', 'desc']) -> [{name: 'barney', age: 36}, {name: 'barney', age: 34}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]
+orderby(users, ['name', 'age']) -> [{name: 'barney', age: 34}, {name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]
 */
-

select
Retrieve a property that indicated by the selector from object.
If property not exists returns undefined.
const select = (from, selector) =>
-  selector.split('.').reduce((prev, cur) => prev && prev[cur], from);
+

+

select

+
Retrieve a property that indicated by the selector from object.

+
If property not exists returns undefined.

+
const select = (from, selector) =>
+  selector.split('.').reduce((prev, cur) => prev && prev[cur], from);
 
 // const obj = {selector: {to: {val: 'val to select'}}};
-// select(obj, 'selector.to.val'); -> 'val to select'
-

shallowClone
Creates a shallow clone of an object.
Use Object.assign() and an empty object ({}) to create a shallow clone of the original.
const shallowClone = obj => Object.assign({}, obj);
+// select(obj, 'selector.to.val'); -> 'val to select'
+

+

shallowClone

+
Creates a shallow clone of an object.

+
Use Object.assign() and an empty object ({}) to create a shallow clone of the original.

+
const shallowClone = obj => Object.assign({}, obj);
 /*
 const a = { x: true, y: 1 };
 const b = shallowClone(a);
-a === b -> false
+a === b -> false
 */
-

truthCheckCollection
Checks if the predicate (second argument) is truthy on all elements of a collection (first argument).
Use Array.every() to check if each passed object has the specified property and if it returns a truthy value.
const truthCheckCollection = (collection, pre) => (collection.every(obj => obj[pre]));
-// truthCheckCollection([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}], "sex") -> true
-

String
anagrams
Generates all anagrams of a string (contains duplicates).
Use recursion. For each letter in the given string, create all the partial anagrams for the rest of its letters. Use Array.map() to combine the letter with each partial anagram, then Array.reduce() to combine all anagrams in one array. Base cases are for string length equal to 2 or 1.
const anagrams = str => {
+

+

truthCheckCollection

+
Checks if the predicate (second argument) is truthy on all elements of a collection (first argument).

+
Use Array.every() to check if each passed object has the specified property and if it returns a truthy value.

+
const truthCheckCollection = (collection, pre) => (collection.every(obj => obj[pre]));
+// truthCheckCollection([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}], "sex") -> true
+

+

String

+
anagrams

+
Generates all anagrams of a string (contains duplicates).

+
Use recursion.
+For each letter in the given string, create all the partial anagrams for the rest of its letters.
+Use Array.map() to combine the letter with each partial anagram, then Array.reduce() to combine all anagrams in one array.
+Base cases are for string length equal to 2 or 1.

+
const anagrams = str => {
   if (str.length <= 2) return str.length === 2 ? [str, str[1] + str[0]] : [str];
-  return str.split('').reduce((acc, letter, i) =>
-    acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);
+  return str.split('').reduce((acc, letter, i) =>
+    acc.concat(anagrams(str.slice(0, i) + str.slice(i + 1)).map(val => letter + val)), []);
 };
-// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']
-

Capitalize
Capitalizes the first letter of a string.
Use destructuring and toUpperCase() to capitalize first letter, ...rest to get array of characters after first letter and then Array.join('') to make it a string again. Omit the lowerRest parameter to keep the rest of the string intact, or set it to true to convert to lowercase.
const capitalize = ([first,...rest], lowerRest = false) =>
+// anagrams('abc') -> ['abc','acb','bac','bca','cab','cba']
+

+

Capitalize

+
Capitalizes the first letter of a string.

+
Use destructuring and toUpperCase() to capitalize first letter, ...rest to get array of characters after first letter and then Array.join('') to make it a string again.
+Omit the lowerRest parameter to keep the rest of the string intact, or set it to true to convert to lowercase.

+
const capitalize = ([first,...rest], lowerRest = false) =>
   first.toUpperCase() + (lowerRest ? rest.join('').toLowerCase() : rest.join(''));
-// capitalize('myName') -> 'MyName'
-// capitalize('myName', true) -> 'Myname'
-

capitalizeEveryWord
Capitalizes the first letter of every word in a string.
Use replace() to match the first character of each word and toUpperCase() to capitalize it.
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
-// capitalizeEveryWord('hello world!') -> 'Hello World!'
-

countVowels
Retuns number of vowels in provided string.
Use a regular expression to count number of vowels (A, E, I, O, U) in a string.
const countVowels = str => (str.match(/[aeiou]/ig) || []).length;
-// countVowels('foobar') -> 3
-// countVowels('gym') -> 0
-

escapeRegExp
Escapes a string to use in a regular expression.
Use replace() to escape special characters.
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-// escapeRegExp('(test)') -> \\(test\\)
-

fromCamelCase
Converts a string from camelcase.
Use replace() to remove underscores, hyphens and spaces and convert words to camelcase. Omit the second argument to use a default separator of _.
const fromCamelCase = (str, separator = '_') =>
+// capitalize('myName') -> 'MyName'
+// capitalize('myName', true) -> 'Myname'
+

+

capitalizeEveryWord

+
Capitalizes the first letter of every word in a string.

+
Use replace() to match the first character of each word and toUpperCase() to capitalize it.

+
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
+// capitalizeEveryWord('hello world!') -> 'Hello World!'
+

+

countVowels

+
Retuns number of vowels in provided string.

+
Use a regular expression to count number of vowels (A, E, I, O, U) in a string.

+
const countVowels = str => (str.match(/[aeiou]/ig) || []).length;
+// countVowels('foobar') -> 3
+// countVowels('gym') -> 0
+

+

escapeRegExp

+
Escapes a string to use in a regular expression.

+
Use replace() to escape special characters.

+
const escapeRegExp = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+// escapeRegExp('(test)') -> \\(test\\)
+

+

fromCamelCase

+
Converts a string from camelcase.

+
Use replace() to remove underscores, hyphens and spaces and convert words to camelcase.
+Omit the second argument to use a default separator of _.

+
const fromCamelCase = (str, separator = '_') =>
   str.replace(/([a-z\d])([A-Z])/g, '$1' + separator + '$2')
     .replace(/([A-Z]+)([A-Z][a-z\d]+)/g, '$1' + separator + '$2').toLowerCase();
-// fromCamelCase('someDatabaseFieldName', ' ') -> 'some database field name'
-// fromCamelCase('someLabelThatNeedsToBeCamelized', '-') -> 'some-label-that-needs-to-be-camelized'
-// fromCamelCase('someJavascriptProperty', '_') -> 'some_javascript_property'
-

reverseString
Reverses a string.
Use split('') and Array.reverse() to reverse the order of the characters in the string. Combine characters to get a string using join('').
const reverseString = str => str.split('').reverse().join('');
-// reverseString('foobar') -> 'raboof'
-

sortCharactersInString
Alphabetically sorts the characters in a string.
Split the string using split(''), Array.sort() utilizing localeCompare(), recombine using join('').
const sortCharactersInString = str =>
-  str.split('').sort((a, b) => a.localeCompare(b)).join('');
-// sortCharactersInString('cabbage') -> 'aabbceg'
-

stringToArrayOfWords
Converts a given string into an array of words.
Use String.split() with a supplied pattern (defaults to non alpha as a regex) to convert to an array of strings. Use Array.filter() to remove any empty strings. Omit the second argument to use the default regex.
const stringToArrayOfWords = (str, pattern = /[^a-zA-Z-]+/) => str.split(pattern).filter(Boolean);
-// stringToArrayOfWords("I love javaScript!!") -> ["I", "love", "javaScript"]
-// stringToArrayOfWords("python, javaScript & coffee") -> ["python", "javaScript", "coffee"]
-

toCamelCase
Converts a string to camelcase.
Use replace() to remove underscores, hyphens and spaces and convert words to camelcase.
const toCamelCase = str =>
-  str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2, offset) =>  p2 ? p2.toUpperCase() : p1.toLowerCase());
-// toCamelCase("some_database_field_name") -> 'someDatabaseFieldName'
-// toCamelCase("Some label that needs to be camelized") -> 'someLabelThatNeedsToBeCamelized'
-// toCamelCase("some-javascript-property") -> 'someJavascriptProperty'
-// toCamelCase("some-mixed_string with spaces_underscores-and-hyphens") -> 'someMixedStringWithSpacesUnderscoresAndHyphens'
-

truncateString
Truncates a string up to a specified length.
Determine if the string's length is greater than num. Return the string truncated to the desired length, with ... appended to the end or the original string.
const truncateString = (str, num) =>
-  str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;
-// truncateString('boomerang', 7) -> 'boom...'
-

Utility
coalesce
Returns the first non-null/undefined argument.
Use Array.find() to return the first non null/undefined argument.
const coalesce = (...args) => args.find(_ => ![undefined, null].includes(_))
-// coalesce(null,undefined,"",NaN, "Waldo") -> ""
-

coalesceFactory
Returns a customized coalesce function that returns the first argument that returns true from the provided argument validation function.
Use Array.find() to return the first argument that returns true from the provided argument validation function.
const coalesceFactory = valid => (...args) => args.find(valid);
-// const customCoalesce = coalesceFactory(_ => ![null, undefined, "", NaN].includes(_))
-// customCoalesce(undefined, null, NaN, "", "Waldo") //-> "Waldo"
-

extendHex
Extends a 3-digit color code to a 6-digit color code.
Use Array.map(), split() and Array.join() to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form. Array.slice() is used to remove # from string start since it's added once.
const extendHex = shortHex =>
-  '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join('')
-// extendHex('#03f') -> '#0033ff'
-// extendHex('05a') -> '#0055aa'
-

getType
Returns the native type of a value.
Returns lowercased constructor name of value, "undefined" or "null" if value is undefined or null
const getType = v =>
+// fromCamelCase('someDatabaseFieldName', ' ') -> 'some database field name'
+// fromCamelCase('someLabelThatNeedsToBeCamelized', '-') -> 'some-label-that-needs-to-be-camelized'
+// fromCamelCase('someJavascriptProperty', '_') -> 'some_javascript_property'
+

+

reverseString

+
Reverses a string.

+
Use split('') and Array.reverse() to reverse the order of the characters in the string.
+Combine characters to get a string using join('').

+
const reverseString = str => str.split('').reverse().join('');
+// reverseString('foobar') -> 'raboof'
+

+

sortCharactersInString

+
Alphabetically sorts the characters in a string.

+
Split the string using split(''), Array.sort() utilizing localeCompare(), recombine using join('').

+
const sortCharactersInString = str =>
+  str.split('').sort((a, b) => a.localeCompare(b)).join('');
+// sortCharactersInString('cabbage') -> 'aabbceg'
+

+

stringToArrayOfWords

+
Converts a given string into an array of words.

+
Use String.split() with a supplied pattern (defaults to non alpha as a regex) to convert to an array of strings. Use Array.filter() to remove any empty strings.
+Omit the second argument to use the default regex.

+
const stringToArrayOfWords = (str, pattern = /[^a-zA-Z-]+/) => str.split(pattern).filter(Boolean);
+// stringToArrayOfWords("I love javaScript!!") -> ["I", "love", "javaScript"]
+// stringToArrayOfWords("python, javaScript & coffee") -> ["python", "javaScript", "coffee"]
+

+

toCamelCase

+
Converts a string to camelcase.

+
Use replace() to remove underscores, hyphens and spaces and convert words to camelcase.

+
const toCamelCase = str =>
+  str.replace(/^([A-Z])|[\s-_]+(\w)/g, (match, p1, p2, offset) =>  p2 ? p2.toUpperCase() : p1.toLowerCase());
+// toCamelCase("some_database_field_name") -> 'someDatabaseFieldName'
+// toCamelCase("Some label that needs to be camelized") -> 'someLabelThatNeedsToBeCamelized'
+// toCamelCase("some-javascript-property") -> 'someJavascriptProperty'
+// toCamelCase("some-mixed_string with spaces_underscores-and-hyphens") -> 'someMixedStringWithSpacesUnderscoresAndHyphens'
+

+

truncateString

+
Truncates a string up to a specified length.

+
Determine if the string's length is greater than num.
+Return the string truncated to the desired length, with ... appended to the end or the original string.

+
const truncateString = (str, num) =>
+  str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;
+// truncateString('boomerang', 7) -> 'boom...'
+

+

Utility

+
coalesce

+
Returns the first non-null/undefined argument.

+
Use Array.find() to return the first non null/undefined argument.

+
const coalesce = (...args) => args.find(_ => ![undefined, null].includes(_))
+// coalesce(null,undefined,"",NaN, "Waldo") -> ""
+

+

coalesceFactory

+
Returns a customized coalesce function that returns the first argument that returns true from the provided argument validation function.

+
Use Array.find() to return the first argument that returns true from the provided argument validation function.

+
const coalesceFactory = valid => (...args) => args.find(valid);
+// const customCoalesce = coalesceFactory(_ => ![null, undefined, "", NaN].includes(_))
+// customCoalesce(undefined, null, NaN, "", "Waldo") //-> "Waldo"
+

+

extendHex

+
Extends a 3-digit color code to a 6-digit color code.

+
Use Array.map(), split() and Array.join() to join the mapped array for converting a 3-digit RGB notated hexadecimal color-code to the 6-digit form.
+Array.slice() is used to remove # from string start since it's added once.

+
const extendHex = shortHex =>
+  '#' + shortHex.slice(shortHex.startsWith('#') ? 1 : 0).split('').map(x => x+x).join('')
+// extendHex('#03f') -> '#0033ff'
+// extendHex('05a') -> '#0055aa'
+

+

getType

+
Returns the native type of a value.

+
Returns lowercased constructor name of value, "undefined" or "null" if value is undefined or null

+
const getType = v =>
   v === undefined ? 'undefined' : v === null ? 'null' : v.constructor.name.toLowerCase();
-// getType(new Set([1,2,3])) -> "set"
-

hexToRGB
Converts a color code to a rgb() or rgba() string if alpha value is provided.
Use bitwise right-shift operator and mask bits with & (and) operator to convert a hexadecimal color code (with or without prefixed with #) to a string with the RGB values. If it's 3-digit color code, first convert to 6-digit version. If any alpha value is provided alongside 6-digit hex, give rgba() string in return.
const hexToRGB = hex => {
+// getType(new Set([1,2,3])) -> "set"
+

+

hexToRGB

+
Converts a color code to a rgb() or rgba() string if alpha value is provided.

+
Use bitwise right-shift operator and mask bits with & (and) operator to convert a hexadecimal color code (with or without prefixed with #) to a string with the RGB values. If it's 3-digit color code, first convert to 6-digit version. If any alpha value is provided alongside 6-digit hex, give rgba() string in return.

+
const hexToRGB = hex => {
   let alpha = false, h = hex.slice(hex.startsWith('#') ? 1 : 0);
-  if (h.length === 3) h = [...h].map(x => x + x).join('');
+  if (h.length === 3) h = [...h].map(x => x + x).join('');
   else if (h.length === 8) alpha = true;
   h = parseInt(h, 16);
   return 'rgb' + (alpha ? 'a' : '') + '('
-    + (h >>> (alpha ? 24 : 16)) + ', '
-    + ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) + ', '
-    + ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0))
-    + (alpha ? `, ${(h & 0x000000ff)}` : '') + ')';
+    + (h >>> (alpha ? 24 : 16)) + ', '
+    + ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) + ', '
+    + ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0))
+    + (alpha ? `, ${(h & 0x000000ff)}` : '') + ')';
 };
-// hexToRGB('#27ae60ff') -> 'rgba(39, 174, 96, 255)'
-// hexToRGB('27ae60') -> 'rgb(39, 174, 96)'
-// hexToRGB('#fff') -> 'rgb(255, 255, 255)'
+// hexToRGB('#27ae60ff') -> 'rgba(39, 174, 96, 255)'
+// hexToRGB('27ae60') -> 'rgb(39, 174, 96)'
+// hexToRGB('#fff') -> 'rgb(255, 255, 255)'
 
-

isArray
Checks if the given argument is an array.
Use Array.isArray() to check if a value is classified as an array.
const isArray = val => !!val && Array.isArray(val);
-// isArray(null) -> false
-// isArray([1]) -> true
-

isBoolean
Checks if the given argument is a native boolean element.
Use typeof to check if a value is classified as a boolean primitive.
const isBoolean = val => typeof val === 'boolean';
-// isBoolean(null) -> false
-// isBoolean(false) -> true
-

isFunction
Checks if the given argument is a function.
Use typeof to check if a value is classified as a function primitive.
const isFunction = val => val && typeof val === 'function';
-// isFunction('x') -> false
-// isFunction(x => x) -> true
-

isNumber
Checks if the given argument is a number.
Use typeof to check if a value is classified as a number primitive.
const isNumber = val => typeof val === 'number';
-// isNumber('1') -> false
-// isNumber(1) -> true
-

isString
Checks if the given argument is a string.
Use typeof to check if a value is classified as a string primitive.
const isString = val => typeof val === 'string';
-// isString(10) -> false
-// isString('10') -> true
-

isSymbol
Checks if the given argument is a symbol.
Use typeof to check if a value is classified as a symbol primitive.
const isSymbol = val => typeof val === 'symbol';
-// isSymbol('x') -> false
-// isSymbol(Symbol('x')) -> true
-

RGBToHex
Converts the values of RGB components to a colorcode.
Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<<) and toString(16), then padStart(6,'0') to get a 6-digit hexadecimal value.
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
-// RGBToHex(255, 165, 1) -> 'ffa501'
-

timeTaken
Measures the time taken by a function to execute.
Use console.time() and console.timeEnd() to measure the difference between the start and end times to determine how long the callback took to execute.
const timeTaken = callback => {
+

+

isArray

+
Checks if the given argument is an array.

+
Use Array.isArray() to check if a value is classified as an array.

+
const isArray = val => !!val && Array.isArray(val);
+// isArray(null) -> false
+// isArray([1]) -> true
+

+

isBoolean

+
Checks if the given argument is a native boolean element.

+
Use typeof to check if a value is classified as a boolean primitive.

+
const isBoolean = val => typeof val === 'boolean';
+// isBoolean(null) -> false
+// isBoolean(false) -> true
+

+

isFunction

+
Checks if the given argument is a function.

+
Use typeof to check if a value is classified as a function primitive.

+
const isFunction = val => val && typeof val === 'function';
+// isFunction('x') -> false
+// isFunction(x => x) -> true
+

+

isNumber

+
Checks if the given argument is a number.

+
Use typeof to check if a value is classified as a number primitive.

+
const isNumber = val => typeof val === 'number';
+// isNumber('1') -> false
+// isNumber(1) -> true
+

+

isString

+
Checks if the given argument is a string.

+
Use typeof to check if a value is classified as a string primitive.

+
const isString = val => typeof val === 'string';
+// isString(10) -> false
+// isString('10') -> true
+

+

isSymbol

+
Checks if the given argument is a symbol.

+
Use typeof to check if a value is classified as a symbol primitive.

+
const isSymbol = val => typeof val === 'symbol';
+// isSymbol('x') -> false
+// isSymbol(Symbol('x')) -> true
+

+

RGBToHex

+
Converts the values of RGB components to a colorcode.

+
Convert given RGB parameters to hexadecimal string using bitwise left-shift operator (<<) and toString(16), then padStart(6,'0') to get a 6-digit hexadecimal value.

+
const RGBToHex = (r, g, b) => ((r << 16) + (g << 8) + b).toString(16).padStart(6, '0');
+// RGBToHex(255, 165, 1) -> 'ffa501'
+

+

timeTaken

+
Measures the time taken by a function to execute.

+
Use console.time() and console.timeEnd() to measure the difference between the start and end times to determine how long the callback took to execute.

+
const timeTaken = callback => {
   console.time('timeTaken');  const r = callback();
   console.timeEnd('timeTaken');  return r;
 };
-// timeTaken(() => Math.pow(2, 10)) -> 1024
+// timeTaken(() => Math.pow(2, 10)) -> 1024
 // (logged): timeTaken: 0.02099609375ms
-

toOrdinalSuffix
Adds an ordinal suffix to a number.
Use the modulo operator (%) to find values of single and tens digits. Find which ordinal pattern digits match. If digit is found in teens pattern, use teens ordinal.
const toOrdinalSuffix = num => {
+

+

toOrdinalSuffix

+
Adds an ordinal suffix to a number.

+
Use the modulo operator (%) to find values of single and tens digits.
+Find which ordinal pattern digits match.
+If digit is found in teens pattern, use teens ordinal.

+
const toOrdinalSuffix = num => {
   const int = parseInt(num), digits = [(int % 10), (int % 100)],
     ordinals = ['st', 'nd', 'rd', 'th'], oPattern = [1, 2, 3, 4],
     tPattern = [11, 12, 13, 14, 15, 16, 17, 18, 19];
-  return oPattern.includes(digits[0]) && !tPattern.includes(digits[1]) ? int + ordinals[digits[0] - 1] : int + ordinals[3];
+  return oPattern.includes(digits[0]) && !tPattern.includes(digits[1]) ? int + ordinals[digits[0] - 1] : int + ordinals[3];
 };
-// toOrdinalSuffix("123") -> "123rd"
-

UUIDGenerator
Generates a UUID.
Use crypto API to generate a UUID, compliant with RFC4122 version 4.
const UUIDGenerator = () =>
-  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+// toOrdinalSuffix("123") -> "123rd"
+

+

UUIDGenerator

+
Generates a UUID.

+
Use crypto API to generate a UUID, compliant with RFC4122 version 4.

+
const UUIDGenerator = () =>
+  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
   );
-// UUIDGenerator() -> '7982fcfe-5721-4632-bede-6000885be57d'
-

validateEmail
Returns true if the given string is a valid email, false otherwise.
Use a regular expression to check if the email is valid. Returns true if email is valid, false if not.
const validateEmail = str =>
-  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
-// validateEmail(mymail@gmail.com) -> true
-

validateNumber
Returns true if the given value is a number, false otherwise.
Use !isNaN in combination with parseFloat() to check if the argument is a number. Use isFinite() to check if the number is finite. Use Number() to check if the coercion holds.
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
-// validateNumber('10') -> true
-


\ No newline at end of file
+// UUIDGenerator() -> '7982fcfe-5721-4632-bede-6000885be57d'
+
+

validateEmail

+

Returns true if the given string is a valid email, false otherwise.

+

Use a regular expression to check if the email is valid. +Returns true if email is valid, false if not.

+
const validateEmail = str =>
+  /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(str);
+// validateEmail(mymail@gmail.com) -> true
+
+

validateNumber

+

Returns true if the given value is a number, false otherwise.

+

Use !isNaN in combination with parseFloat() to check if the argument is a number. +Use isFinite() to check if the number is finite. +Use Number() to check if the coercion holds.

+
const validateNumber = n => !isNaN(parseFloat(n)) && isFinite(n) && Number(n) == n;
+// validateNumber('10') -> true
+
+

+ +
+
+ + + + diff --git a/docs/mini.css b/docs/mini.css new file mode 100644 index 000000000..bf798f86c --- /dev/null +++ b/docs/mini.css @@ -0,0 +1 @@ +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#f0f0f0;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}a,b,del,em,i,ins,q,span,strong,u{font-size:1em}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figure{margin:var(--universal-margin)}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{max-width:100%;flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{max-width:25%;flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{max-width:50%;flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{max-width:75%;flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{max-width:100%;flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{max-width:100%;flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{max-width:25%;flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{max-width:50%;flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{max-width:75%;flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{max-width:100%;flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{max-width:100%;flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{max-width:8.33333%;flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{max-width:16.66667%;flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{max-width:25%;flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{max-width:33.33333%;flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{max-width:41.66667%;flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{max-width:50%;flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{max-width:58.33333%;flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{max-width:66.66667%;flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{max-width:75%;flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{max-width:83.33333%;flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{max-width:91.66667%;flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{max-width:100%;flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:root{--card-back-color:#f8f8f8;--card-fore-color:#111;--card-border-color:#ddd}.card{display:flex;flex-direction:column;justify-content:space-between;align-self:center;position:relative;width:100%;background:var(--card-back-color);color:var(--card-fore-color);border:.0625rem solid var(--card-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);overflow:hidden}@media screen and (min-width: 320px){.card{max-width:320px}}.card>.section{background:var(--card-back-color);color:var(--card-fore-color);box-sizing:border-box;margin:0;border:0;border-radius:0;border-bottom:.0625rem solid var(--card-border-color);padding:var(--universal-padding);width:100%}.card>.section.media{height:200px;padding:0;-o-object-fit:cover;object-fit:cover}.card>.section:last-child{border-bottom:0}@media screen and (min-width: 240px){.card.small{max-width:240px}}@media screen and (min-width: 480px){.card.large{max-width:480px}}.card.fluid{max-width:100%;width:auto}.card.warning{--card-back-color:#ffca28;--card-border-color:#e8b825}.card.error{--card-back-color:#b71c1c;--card-fore-color:#f8f8f8;--card-border-color:#a71a1a}.card>.section.dark{--card-back-color:#e0e0e0}.card>.section.double-padded{padding:calc(1.5 * var(--universal-padding))}:root{--form-back-color:#f0f0f0;--form-fore-color:#111;--form-border-color:#ddd;--input-back-color:#f8f8f8;--input-fore-color:#111;--input-border-color:#ddd;--input-focus-color:#0288d1;--input-invalid-color:#d32f2f;--button-back-color:#e2e2e2;--button-hover-back-color:#dcdcdc;--button-fore-color:#212121;--button-border-color:transparent;--button-hover-border-color:transparent;--button-group-border-color:rgba(124,124,124,0.54)}form{background:var(--form-back-color);color:var(--form-fore-color);border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin);padding:calc(2 * var(--universal-padding)) var(--universal-padding)}fieldset{border:.0625rem solid var(--form-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 4);padding:var(--universal-padding)}legend{box-sizing:border-box;display:table;max-width:100%;white-space:normal;font-weight:700;padding:calc(var(--universal-padding) / 2)}label{padding:calc(var(--universal-padding) / 2) var(--universal-padding)}.input-group{display:inline-block}.input-group.fluid{display:flex;align-items:center;justify-content:center}.input-group.fluid>input{max-width:100%;flex-grow:1;flex-basis:0px}@media screen and (max-width: 767px){.input-group.fluid{align-items:stretch;flex-direction:column}}.input-group.vertical{display:flex;align-items:stretch;flex-direction:column}.input-group.vertical>input{max-width:100%;flex-grow:1;flex-basis:0px}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}input:not([type]),[type="text"],[type="email"],[type="number"],[type="search"],[type="password"],[type="url"],[type="tel"],[type="checkbox"],[type="radio"],textarea,select{box-sizing:border-box;background:var(--input-back-color);color:var(--input-fore-color);border:.0625rem solid var(--input-border-color);border-radius:var(--universal-border-radius);margin:calc(var(--universal-margin) / 2);padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}input:not([type="button"]):not([type="submit"]):not([type="reset"]):hover,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus,textarea:hover,textarea:focus,select:hover,select:focus{border-color:var(--input-focus-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"]):invalid,input:not([type="button"]):not([type="submit"]):not([type="reset"]):focus:invalid,textarea:invalid,textarea:focus:invalid,select:invalid,select:focus:invalid{border-color:var(--input-invalid-color);box-shadow:none}input:not([type="button"]):not([type="submit"]):not([type="reset"])[readonly],textarea[readonly],select[readonly]{background:var(--secondary-back-color)}select{max-width:100%}option{overflow:hidden;text-overflow:ellipsis}[type="checkbox"],[type="radio"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;height:calc(1rem + var(--universal-padding) / 2);width:calc(1rem + var(--universal-padding) / 2);vertical-align:text-bottom;padding:0;flex-basis:calc(1rem + var(--universal-padding) / 2) !important;flex-grow:0 !important}[type="checkbox"]:checked:before,[type="radio"]:checked:before{position:absolute}[type="checkbox"]:checked:before{content:'\2713';font-family:sans-serif;font-size:calc(1rem + var(--universal-padding) / 2);top:calc(0rem - var(--universal-padding));left:calc(var(--universal-padding) / 4)}[type="radio"]{border-radius:100%}[type="radio"]:checked:before{border-radius:100%;content:'';top:calc(.0625rem + var(--universal-padding) / 2);left:calc(.0625rem + var(--universal-padding) / 2);background:var(--input-fore-color);width:0.5rem;height:0.5rem}:placeholder-shown{color:var(--input-fore-color)}::-ms-placeholder{color:var(--input-fore-color);opacity:0.54}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button{overflow:visible;text-transform:none}button,[type="button"],[type="submit"],[type="reset"],a.button,label.button,.button,a[role="button"],label[role="button"],[role="button"]{display:inline-block;background:var(--button-back-color);color:var(--button-fore-color);border:.0625rem solid var(--button-border-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding) calc(1.5 * var(--universal-padding));margin:var(--universal-margin);text-decoration:none;cursor:pointer;transition:background 0.3s}button:hover,button:focus,[type="button"]:hover,[type="button"]:focus,[type="submit"]:hover,[type="submit"]:focus,[type="reset"]:hover,[type="reset"]:focus,a.button:hover,a.button:focus,label.button:hover,label.button:focus,.button:hover,.button:focus,a[role="button"]:hover,a[role="button"]:focus,label[role="button"]:hover,label[role="button"]:focus,[role="button"]:hover,[role="button"]:focus{background:var(--button-hover-back-color);border-color:var(--button-hover-border-color)}input:disabled,input[disabled],textarea:disabled,textarea[disabled],select:disabled,select[disabled],button:disabled,button[disabled],.button:disabled,.button[disabled],[role="button"]:disabled,[role="button"][disabled]{cursor:not-allowed;opacity:.75}.button-group{display:flex;border:.0625rem solid var(--button-group-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}.button-group>button,.button-group [type="button"],.button-group>[type="submit"],.button-group>[type="reset"],.button-group>.button,.button-group>[role="button"]{margin:0;max-width:100%;flex:1 1 auto;text-align:center;border:0;border-radius:0;box-shadow:none}.button-group>:not(:first-child){border-left:.0625rem solid var(--button-group-border-color)}@media screen and (max-width: 767px){.button-group{flex-direction:column}.button-group>:not(:first-child){border:0;border-top:.0625rem solid var(--button-group-border-color)}}button.primary,[type="button"].primary,[type="submit"].primary,[type="reset"].primary,.button.primary,[role="button"].primary{--button-back-color:#1976d2;--button-fore-color:#f8f8f8}button.primary:hover,button.primary:focus,[type="button"].primary:hover,[type="button"].primary:focus,[type="submit"].primary:hover,[type="submit"].primary:focus,[type="reset"].primary:hover,[type="reset"].primary:focus,.button.primary:hover,.button.primary:focus,[role="button"].primary:hover,[role="button"].primary:focus{--button-hover-back-color:#1565c0}button.secondary,[type="button"].secondary,[type="submit"].secondary,[type="reset"].secondary,.button.secondary,[role="button"].secondary{--button-back-color:#d32f2f;--button-fore-color:#f8f8f8}button.secondary:hover,button.secondary:focus,[type="button"].secondary:hover,[type="button"].secondary:focus,[type="submit"].secondary:hover,[type="submit"].secondary:focus,[type="reset"].secondary:hover,[type="reset"].secondary:focus,.button.secondary:hover,.button.secondary:focus,[role="button"].secondary:hover,[role="button"].secondary:focus{--button-hover-back-color:#c62828}button.tertiary,[type="button"].tertiary,[type="submit"].tertiary,[type="reset"].tertiary,.button.tertiary,[role="button"].tertiary{--button-back-color:#308732;--button-fore-color:#f8f8f8}button.tertiary:hover,button.tertiary:focus,[type="button"].tertiary:hover,[type="button"].tertiary:focus,[type="submit"].tertiary:hover,[type="submit"].tertiary:focus,[type="reset"].tertiary:hover,[type="reset"].tertiary:focus,.button.tertiary:hover,.button.tertiary:focus,[role="button"].tertiary:hover,[role="button"].tertiary:focus{--button-hover-back-color:#277529}button.inverse,[type="button"].inverse,[type="submit"].inverse,[type="reset"].inverse,.button.inverse,[role="button"].inverse{--button-back-color:#212121;--button-fore-color:#f8f8f8}button.inverse:hover,button.inverse:focus,[type="button"].inverse:hover,[type="button"].inverse:focus,[type="submit"].inverse:hover,[type="submit"].inverse:focus,[type="reset"].inverse:hover,[type="reset"].inverse:focus,.button.inverse:hover,.button.inverse:focus,[role="button"].inverse:hover,[role="button"].inverse:focus{--button-hover-back-color:#111}button.small,[type="button"].small,[type="submit"].small,[type="reset"].small,.button.small,[role="button"].small{padding:calc(0.5 * var(--universal-padding)) calc(0.75 * var(--universal-padding));margin:var(--universal-margin)}button.large,[type="button"].large,[type="submit"].large,[type="reset"].large,.button.large,[role="button"].large{padding:calc(1.5 * var(--universal-padding)) calc(2 * var(--universal-padding));margin:var(--universal-margin)}:root{--header-back-color:#f8f8f8;--header-hover-back-color:#f0f0f0;--header-fore-color:#444;--header-border-color:#ddd;--nav-back-color:#f8f8f8;--nav-hover-back-color:#f0f0f0;--nav-fore-color:#444;--nav-border-color:#ddd;--nav-link-color:#0277bd;--footer-fore-color:#444;--footer-back-color:#f8f8f8;--footer-border-color:#ddd;--footer-link-color:#0277bd;--drawer-back-color:#f8f8f8;--drawer-hover-back-color:#f0f0f0;--drawer-border-color:#ddd;--drawer-close-color:#444}header{height:3.1875rem;background:var(--header-back-color);color:var(--header-fore-color);border-bottom:.0625rem solid var(--header-border-color);padding:calc(var(--universal-padding) / 4) 0;white-space:nowrap;overflow-x:auto;overflow-y:hidden}header.row{box-sizing:content-box}header .logo{color:var(--header-fore-color);font-size:1.75rem;padding:var(--universal-padding) calc(2 * var(--universal-padding));text-decoration:none}header button,header [type="button"],header .button,header [role="button"]{box-sizing:border-box;position:relative;top:calc(0rem - var(--universal-padding) / 4);height:calc(3.1875rem + var(--universal-padding) / 2);background:var(--header-back-color);line-height:calc(3.1875rem - var(--universal-padding) * 1.5);text-align:center;color:var(--header-fore-color);border:0;border-radius:0;margin:0;text-transform:uppercase}header button:hover,header button:focus,header [type="button"]:hover,header [type="button"]:focus,header .button:hover,header .button:focus,header [role="button"]:hover,header [role="button"]:focus{background:var(--header-hover-back-color)}nav{background:var(--nav-back-color);color:var(--nav-fore-color);border:.0625rem solid var(--nav-border-color);border-radius:var(--universal-border-radius);margin:var(--universal-margin)}nav *{padding:var(--universal-padding) calc(1.5 * var(--universal-padding))}nav a,nav a:visited{display:block;color:var(--nav-link-color);border-radius:var(--universal-border-radius);transition:background 0.3s}nav a:hover,nav a:focus,nav a:visited:hover,nav a:visited:focus{text-decoration:none;background:var(--nav-hover-back-color)}nav .sublink-1{position:relative;margin-left:calc(2 * var(--universal-padding))}nav .sublink-1:before{position:absolute;left:calc(var(--universal-padding) - 1 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}nav .sublink-2{position:relative;margin-left:calc(4 * var(--universal-padding))}nav .sublink-2:before{position:absolute;left:calc(var(--universal-padding) - 3 * var(--universal-padding));top:-.0625rem;content:'';height:100%;border:.0625rem solid var(--nav-border-color);border-left:0}footer{background:var(--footer-back-color);color:var(--footer-fore-color);border-top:.0625rem solid var(--footer-border-color);padding:calc(2 * var(--universal-padding)) var(--universal-padding);font-size:.875rem}footer a,footer a:visited{color:var(--footer-link-color)}header.sticky{position:-webkit-sticky;position:sticky;z-index:1101;top:0}footer.sticky{position:-webkit-sticky;position:sticky;z-index:1101;bottom:0}.drawer-toggle:before{display:inline-block;position:relative;vertical-align:bottom;content:'\00a0\2261\00a0';font-family:sans-serif;font-size:1.5em}@media screen and (min-width: 768px){.drawer-toggle:not(.persistent){display:none}}[type="checkbox"].drawer{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].drawer+*{display:block;box-sizing:border-box;position:fixed;top:0;width:320px;height:100vh;overflow-y:auto;background:var(--drawer-back-color);border:.0625rem solid var(--drawer-border-color);border-radius:0;margin:0;z-index:1110;left:-320px;transition:left 0.3s}[type="checkbox"].drawer+* .drawer-close{position:absolute;top:var(--universal-margin);right:var(--universal-margin);z-index:1111;width:2rem;height:2rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].drawer+* .drawer-close:before{display:block;content:'\00D7';color:var(--drawer-close-color);position:relative;font-family:sans-serif;font-size:2rem;line-height:1;text-align:center}[type="checkbox"].drawer+* .drawer-close:hover,[type="checkbox"].drawer+* .drawer-close:focus{background:var(--drawer-hover-back-color)}@media screen and (max-width: 320px){[type="checkbox"].drawer+*{width:100%}}[type="checkbox"].drawer:checked+*{left:0}@media screen and (min-width: 768px){[type="checkbox"].drawer:not(.persistent)+*{position:static;height:100%;z-index:1100}[type="checkbox"].drawer:not(.persistent)+* .drawer-close{display:none}}:root{--mark-back-color:#0277bd;--mark-fore-color:#fafafa}mark{background:var(--mark-back-color);color:var(--mark-fore-color);font-size:.95em;line-height:1em;border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}mark.inline-block{display:inline-block;font-size:1em;line-height:1.5;padding:calc(var(--universal-padding) / 2) var(--universal-padding)}:root{--toast-back-color:#424242;--toast-fore-color:#fafafa}.toast{position:fixed;bottom:calc(var(--universal-margin) * 3);left:50%;transform:translate(-50%, -50%);z-index:1111;color:var(--toast-fore-color);background:var(--toast-back-color);border-radius:calc(var(--universal-border-radius) * 16);padding:var(--universal-padding) calc(var(--universal-padding) * 3)}:root{--tooltip-back-color:#212121;--tooltip-fore-color:#fafafa}.tooltip{position:relative;display:inline-block}.tooltip:before,.tooltip:after{position:absolute;opacity:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:all 0.3s;z-index:1010;left:50%}.tooltip:not(.bottom):before,.tooltip:not(.bottom):after{bottom:75%}.tooltip.bottom:before,.tooltip.bottom:after{top:75%}.tooltip:hover:before,.tooltip:hover:after,.tooltip:focus:before,.tooltip:focus:after{opacity:1;clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%)}.tooltip:before{content:'';background:transparent;border:var(--universal-margin) solid transparent;left:calc(50% - var(--universal-margin))}.tooltip:not(.bottom):before{border-top-color:#212121}.tooltip.bottom:before{border-bottom-color:#212121}.tooltip:after{content:attr(aria-label);color:var(--tooltip-fore-color);background:var(--tooltip-back-color);border-radius:var(--universal-border-radius);padding:var(--universal-padding);white-space:nowrap;transform:translateX(-50%)}.tooltip:not(.bottom):after{margin-bottom:calc(2 * var(--universal-margin))}.tooltip.bottom:after{margin-top:calc(2 * var(--universal-margin))}:root{--modal-overlay-color:rgba(0,0,0,0.45);--modal-close-color:#444;--modal-close-hover-color:#f0f0f0}[type="checkbox"].modal{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}[type="checkbox"].modal+div{position:fixed;top:0;left:0;display:none;width:100vw;height:100vh;background:var(--modal-overlay-color)}[type="checkbox"].modal+div .card{margin:0 auto;max-height:50vh;overflow:auto}[type="checkbox"].modal+div .card .modal-close{position:absolute;top:0;right:0;width:1.75rem;height:1.75rem;border-radius:var(--universal-border-radius);padding:var(--universal-padding);margin:0;cursor:pointer;transition:background 0.3s}[type="checkbox"].modal+div .card .modal-close:before{display:block;content:'\00D7';color:var(--modal-close-color);position:relative;font-family:sans-serif;font-size:1.75rem;line-height:1;text-align:center}[type="checkbox"].modal+div .card .modal-close:hover,[type="checkbox"].modal+div .card .modal-close:focus{background:var(--modal-close-hover-color)}[type="checkbox"].modal:checked+div{display:flex;flex:0 1 auto;z-index:1200}[type="checkbox"].modal:checked+div .card .modal-close{z-index:1211}:root{--collapse-label-back-color:#e8e8e8;--collapse-label-fore-color:#212121;--collapse-label-hover-back-color:#f0f0f0;--collapse-selected-label-back-color:#ececec;--collapse-border-color:#ddd;--collapse-content-back-color:#fafafa;--collapse-selected-label-border-color:#0277bd}.collapse{width:calc(100% - 2 * var(--universal-margin));opacity:1;display:flex;flex-direction:column;margin:var(--universal-margin);border-radius:var(--universal-border-radius)}.collapse>[type="radio"],.collapse>[type="checkbox"]{height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%)}.collapse>label{flex-grow:1;display:inline-block;height:1.5rem;cursor:pointer;transition:background 0.3s;color:var(--collapse-label-fore-color);background:var(--collapse-label-back-color);border:.0625rem solid var(--collapse-border-color);padding:calc(1.5 * var(--universal-padding))}.collapse>label:hover,.collapse>label:focus{background:var(--collapse-label-hover-back-color)}.collapse>label+div{flex-basis:auto;height:1px;width:1px;margin:-1px;overflow:hidden;position:absolute;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);transition:max-height 0.3s;max-height:1px}.collapse>:checked+label{background:var(--collapse-selected-label-back-color);border-bottom-color:var(--collapse-selected-label-border-color)}.collapse>:checked+label+div{box-sizing:border-box;position:relative;width:100%;height:auto;overflow:auto;margin:0;background:var(--collapse-content-back-color);border:.0625rem solid var(--collapse-border-color);border-top:0;padding:var(--universal-padding);clip:auto;-webkit-clip-path:inset(0%);clip-path:inset(0%);max-height:400px}.collapse>label:not(:first-of-type){border-top:0}.collapse>label:first-of-type{border-radius:var(--universal-border-radius) var(--universal-border-radius) 0 0}.collapse>label:last-of-type{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}.collapse>:checked:last-of-type+label{border-radius:0}.collapse>:checked:last-of-type+label+div{border-radius:0 0 var(--universal-border-radius) var(--universal-border-radius)}mark.secondary{--mark-back-color:#d32f2f}mark.tertiary{--mark-back-color:#308732}mark.tag{padding:calc(var(--universal-padding)/2) var(--universal-padding);border-radius:1em}html,*{font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code,pre,kbd,code *,pre *,kbd *{font-family:'Inconsolata', Menlo, Consolas, monospace}code,kbd{font-size:1em}code{transform:scale(1)}pre{font-size:1rem;border:0.0625rem solid var(--secondary-border-color);border-radius:var(--universal-border-radius)}.group{position:relative;margin-top:2em;margin-bottom:-1em}.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}.search:focus{outline:none}label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}label#menu-toggle{width:3.4375rem}header h1.logo{margin-top:-0.8rem;text-align:center}header h1.logo a{text-decoration:none;color:#111}header #title{position:relative;top:-1rem}@media screen and (max-width: 500px){header #title{font-size:1rem;display:block}}header h1 small{display:block;font-size:0.875rem;font-style:italic;color:#888;margin-top:-0.8rem}@media screen and (max-width: 768px){header h1 small{font-size:0.75rem}}@media screen and (max-width: 600px){header h1 small{font-size:0.625rem}}@media screen and (max-width: 500px){header h1 small{font-size:0.5rem;margin-top:-1.2rem}}label#menu-toggle{position:absolute;left:0.5rem;top:0.5rem;width:3.4375rem}.card{box-shadow:0 0.25rem 0.25rem 0 rgba(0,0,0,0.125),0 0.125rem 0.125rem -0.125rem rgba(0,0,0,0.25)} diff --git a/docs/mini/_contextual.scss b/docs/mini/_contextual.scss new file mode 100644 index 000000000..08bd3c988 --- /dev/null +++ b/docs/mini/_contextual.scss @@ -0,0 +1,351 @@ +/* + Definitions for contextual background elements, toasts and tooltips. +*/ +$mark-back-color: #0277bd !default; // Background color for +$mark-fore-color: #fafafa !default; // Text color for +$mark-font-size: 0.95em !default; // Font size for +$mark-line-height: 1em !default; // Line height for +$mark-inline-block-name: 'inline-block' !default;// Class name for inline-block +$_include-toast: true !default; // [Hidden] Should toasts be included? (boolean) +$toast-name: 'toast' !default; // Class name for toast component +$toast-back-color: #424242 !default; // Background color for toast component +$toast-fore-color: #fafafa !default; // Text color for toast component +$_include-tooltip: true !default; // [Hidden] Should tooltips be included? (boolean) +$tooltip-name: 'tooltip' !default; // Class name for tooltip component +$tooltip-bottom-name: 'bottom' !default; // Bottom tooltip class name +$tooltip-back-color: #212121 !default; // Background color for tooltip component +$tooltip-fore-color: #fafafa !default; // Text color for tooltip component +$_include-modal: true !default; // [Hidden] Should modal dialogs be included? (boolean) +$modal-name: 'modal' !default; // Class name for modal dialog component +$modal-overlay-color: rgba(0, 0, 0, 0.45) !default; // Overlay color for modal dialog component +$modal-close-name: 'modal-close' !default;// Class name for modal dialog close button +$modal-close-color: #444 !default; // Text color for the close button of the modal dialog component +$modal-close-hover-back-color: #f0f0f0 !default; // Background color for the close button of the modal dialog component (on hover/focus) +$modal-close-size: 1.75rem !default; // Font size for the close button of the modal dialog component +$_include-collapse: true !default; // [Hidden] Should collapse components be included? (boolean) +$collapse-name: 'collapse' !default; // Class name for collapse component +$collapse-label-height: 1.5rem !default; // Height for the labels in the collapse component +$collapse-content-max-height: 400px !default; // Max height for the content panes in the collapse component +$collapse-label-back-color: #e8e8e8 !default;// Background color for labels in the collapse component +$collapse-label-fore-color: #212121 !default;// Text color for labels in the collapse component +$collapse-label-hover-back-color:#f0f0f0 !default;// Background color for labels in the collapse component (hover) +$collapse-selected-label-back-color:#ececec !default;// Background color for selected labels in the collapse component +$collapse-border-color: #ddd !default; // Border color for collapse component +$collapse-selected-label-border-color: #0277bd !default; // Border color for collapse component's selected labels +$collapse-content-back-color: #fafafa !default; // Background color for collapse component's content panes +// CSS variable name definitions [exercise caution if modifying these] +$mark-back-color-var: '--mark-back-color' !default; +$mark-fore-color-var: '--mark-fore-color' !default; +$toast-back-color-var: '--toast-back-color' !default; +$toast-fore-color-var: '--toast-fore-color' !default; +$tooltip-back-color-var: '--tooltip-back-color' !default; +$tooltip-fore-color-var: '--tooltip-fore-color' !default; +$modal-overlay-color-var: '--modal-overlay-color' !default; +$modal-close-color-var: '--modal-close-color' !default; +$modal-close-hover-back-color-var: '--modal-close-hover-color' !default; +$collapse-label-back-color-var: '--collapse-label-back-color' !default; +$collapse-label-fore-color-var: '--collapse-label-fore-color' !default; +$collapse-label-hover-back-color-var: '--collapse-label-hover-back-color' !default; +$collapse-selected-label-back-color-var: '--collapse-selected-label-back-color' !default; +$collapse-border-color-var: '--collapse-border-color' !default; +$collapse-content-back-color-var: '--collapse-content-back-color' !default; +$collapse-selected-label-border-color-var: '--collapse-selected-label-border-color' !default; +// == Uncomment below code if this module is used on its own == +// +// $base-line-height: 1.5 !default; // Line height for most elements +// $universal-margin: 0.5rem !default; // Universal margin for the most elements +// $universal-padding: 0.5rem !default; // Universal padding for the most elements +// $universal-border-radius: 0.125rem !default; // Universal border-radius for most elements +// $universal-box-shadow: none !default; // Universal box-shadow for most elements +// $universal-margin-var: '--universal-margin' !default; +// $universal-padding-var: '--universal-padding' !default; +// $universal-border-radius-var: '--universal-border-radius' !default; +// $universal-box-shadow-var: '--universal-box-shadow' !default; +// :root { +// #{$universal-margin-var}: $universal-margin; +// #{$universal-padding-var}: $universal-padding; +// #{$universal-border-radius-var}: $universal-border-radius; +// @if $universal-box-shadow != none { +// #{$universal-box-shadow-var}: $universal-box-shadow; +// } +// } +// +// ============================================================ +// Check the `_contextual_mixins.scss` file to find this module's mixins. +@import '_contextual_mixins'; +/* Contextual module CSS variable definitions */ +:root { + #{$mark-back-color-var}: $mark-back-color; + #{$mark-fore-color-var}: $mark-fore-color; +} +// Default styling for mark. Use mixins for alternate styles. +mark { + background: var(#{$mark-back-color-var}); + color: var(#{$mark-fore-color-var}); + font-size: $mark-font-size; + line-height: $mark-line-height; + border-radius: var(#{$universal-border-radius-var}); + padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + &.#{$mark-inline-block-name} { + display: inline-block; + // This is hardcoded, as we want inline-block elements to be styled as normal pieces of text, instead of look small and weird. + font-size: 1em; + // Line height is reset to the normal line-height from `core`. Also hardcoded for same reasons. + line-height: $base-line-height; + padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var}); + } +} +// Styling for toasts. - No border styling, I think it's unnecessary anyways. +@if $_include-toast { + :root { + #{$toast-back-color-var}: $toast-back-color; + #{$toast-fore-color-var}: $toast-fore-color; + } + .#{$toast-name} { + position: fixed; + bottom: calc(var(#{$universal-margin-var}) * 3); + left: 50%; + transform: translate(-50%, -50%); + z-index: 1111; + color: var(#{$toast-fore-color-var}); + background: var(#{$toast-back-color-var}); + border-radius: calc(var(#{$universal-border-radius-var}) * 16); + padding: var(#{$universal-padding-var}) calc(var(#{$universal-padding-var}) * 3); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + } +} +// Styling for tooltips. +@if $_include-tooltip { + :root { + #{$tooltip-back-color-var}: $tooltip-back-color; + #{$tooltip-fore-color-var}: $tooltip-fore-color; + } + .#{$tooltip-name} { + position: relative; + display: inline-block; + &:before, &:after { + position: absolute; + opacity: 0; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: all 0.3s; + // Remember to keep this index a lower value than the one used for stickies. + z-index: 1010; // Deals with certain problems when combined with cards and tables. + left: 50%; + } + &:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling + bottom: 75%; + } + &.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling + top: 75%; + } + &:hover, &:focus { + &:before, &:after { + opacity: 1; + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + } + } + &:before { // This is the little tooltip triangle + content: ''; + background: transparent; + border: var(#{$universal-margin-var}) solid transparent; + // Newer browsers will center the tail properly + left: calc(50% - var(#{$universal-margin-var})); + } + &:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling + border-top-color: $tooltip-back-color; + } + &.#{$tooltip-bottom-name}:before { // Bottom tooltip styling + border-bottom-color: $tooltip-back-color; + } + &:after { // This is the actual tooltip's text block + content: attr(aria-label); + color: var(#{$tooltip-fore-color-var}); + background: var(#{$tooltip-back-color-var}); + border-radius: var(#{$universal-border-radius-var}); + padding: var(#{$universal-padding-var}); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + white-space: nowrap; + transform: translateX(-50%); + } + &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling + margin-bottom: calc(2 * var(#{$universal-margin-var})); + } + &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling + margin-top: calc(2 * var(#{$universal-margin-var})); + } + } +} +// Styling for modal dialogs. +@if $_include-modal { + :root { + #{$modal-overlay-color-var}: $modal-overlay-color; + #{$modal-close-color-var}: $modal-close-color; + #{$modal-close-hover-back-color-var}: $modal-close-hover-back-color; + } + [type="checkbox"].#{$modal-name} { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + & + div { + position: fixed; + top: 0; + left: 0; + display: none; + width: 100vw; + height: 100vh; + background: var(#{$modal-overlay-color-var}); + & .card { + margin: 0 auto; + max-height: 50vh; + overflow: auto; + & .#{$modal-close-name} { + position: absolute; + top: 0; + right: 0; + width: $modal-close-size; + height: $modal-close-size; + border-radius: var(#{$universal-border-radius-var}); + padding: var(#{$universal-padding-var}); + margin: 0; + cursor: pointer; + transition: background 0.3s; + &:before { + display: block; + content: '\00D7'; + color: var(#{$modal-close-color-var}); + position: relative; + font-family: sans-serif; + font-size: $modal-close-size; + line-height: 1; + text-align: center; + } + &:hover, &:focus { + background: var(#{$modal-close-hover-back-color-var}); + } + } + } + } + &:checked + div { + display: flex; + flex: 0 1 auto; + z-index: 1200; + & .card { + & .#{$modal-close-name} { + z-index: 1211; + } + } + } + } +} +// Styling for collapse. +@if $_include-collapse { + :root { + #{$collapse-label-back-color-var}: $collapse-label-back-color; + #{$collapse-label-fore-color-var}: $collapse-label-fore-color; + #{$collapse-label-hover-back-color-var}: $collapse-label-hover-back-color; + #{$collapse-selected-label-back-color-var}: $collapse-selected-label-back-color; + #{$collapse-border-color-var}: $collapse-border-color; + #{$collapse-content-back-color-var} : $collapse-content-back-color; + #{$collapse-selected-label-border-color-var}: $collapse-selected-label-border-color; + } + .#{$collapse-name} { + width: calc(100% - 2 * var(#{$universal-margin-var})); + opacity: 1; + display: flex; + flex-direction: column; + margin: var(#{$universal-margin-var}); + border-radius: var(#{$universal-border-radius-var}); + @if $universal-box-shadow != none { + box-shadow: var(#{$universal-box-shadow-var}); + } + & > [type="radio"], & > [type="checkbox"] { + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + } + & > label { + flex-grow: 1; + display: inline-block; + height: $collapse-label-height; + cursor: pointer; + transition: background 0.3s; + color: var(#{$collapse-label-fore-color-var}); + background: var(#{$collapse-label-back-color-var}); + border: $__1px solid var(#{$collapse-border-color-var}); + padding: calc(1.5 * var(#{$universal-padding-var})); + &:hover, &:focus { + background: var(#{$collapse-label-hover-back-color-var}); + } + + div { + flex-basis: auto; + height: 1px; + width: 1px; + margin: -1px; + overflow: hidden; + position: absolute; + clip: rect(0 0 0 0); + -webkit-clip-path: inset(100%); + clip-path: inset(100%); + transition: max-height 0.3s; + max-height: 1px; // for transition + } + } + > :checked + label { + background: var(#{$collapse-selected-label-back-color-var}); + // border: 0.0625rem solid #bdbdbd; // var it + border-bottom-color: var(#{$collapse-selected-label-border-color-var}); + & + div { + box-sizing: border-box; + position: relative; + width: 100%; + height: auto; + overflow: auto; + margin: 0; + background: var(#{$collapse-content-back-color-var}); + border: $__1px solid var(#{$collapse-border-color-var}); + border-top: 0; + padding: var(#{$universal-padding-var}); + clip: auto; + -webkit-clip-path: inset(0%); + clip-path: inset(0%); + max-height: $collapse-content-max-height; + } + } + & > label:not(:first-of-type) { // Keep these down here, as it overrides some other styles. + border-top: 0; + } + & > label:first-of-type { + border-radius: var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0 0; // universalize + } + & > label:last-of-type { + border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize + } + & > :checked:last-of-type + label { + border-radius: 0; + + div { + border-radius: 0 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}); // universalize + } + } + } +} diff --git a/docs/mini/_contextual_mixins.scss b/docs/mini/_contextual_mixins.scss new file mode 100644 index 000000000..8b004b9b5 --- /dev/null +++ b/docs/mini/_contextual_mixins.scss @@ -0,0 +1,27 @@ +// Contextual module's mixin definitions are here. For the module itself +// check `_contextual.scss`. +// Mark color variant mixin: +// $mark-alt-name: The name of the class used for the variant. +// $mark-alt-back-color: Background color for variant. +// $mark-alt-fore-color: Text color for variant. +@mixin make-mark-alt-color ($mark-alt-name, $mark-alt-back-color : $mark-back-color, + $mark-alt-fore-color : $mark-fore-color) { + mark.#{$mark-alt-name} { + @if $mark-alt-back-color != $mark-back-color { + #{$mark-back-color-var}: $mark-alt-back-color; + } + @if $mark-alt-fore-color != $mark-fore-color{ + #{$mark-fore-color-var}: $mark-alt-fore-color; + } + } +} +// Mark size variant mixin: +// $mark-alt-name: The name of the class used for the variant. +// $mark-alt-padding: The padding of the variant. +// $mark-alt-border-radius: The border radius of the variant. +@mixin make-mark-alt-size ($mark-alt-name, $mark-alt-padding, $mark-alt-border-radius) { + mark.#{$mark-alt-name} { + padding: $mark-alt-padding; + border-radius: $mark-alt-border-radius; + } +} diff --git a/docs/mini/_core.scss b/docs/mini/_core.scss new file mode 100644 index 000000000..ccbc37661 --- /dev/null +++ b/docs/mini/_core.scss @@ -0,0 +1,304 @@ +/* + Browsers resets and base typography. +*/ + +// TODO: Add fluid type and test thoroughly +$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only) +$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean) +$__1px: (1px/$base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px` +$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements +$base-line-height: 1.5 !default; // Line height for most elements +$base-font-size: 1rem !default; // Font sizing for all elements +$_body-margin: 0 !default; // [Hidden] Margin for body +$fore-color: #111 !default; // Text & foreground color +$secondary-fore-color: #444 !default; // Secondary text & foreground color +$back-color: #f8f8f8 !default; // Background color +$secondary-back-color: #f0f0f0 !default; // Secondary background color +$blockquote-color: #f57c00 !default; //
sidebar and quotation color +$pre-color: #1565c0 !default; // 
 sidebar color
+$border-color:            #aaa !default;        // Border color
+$secondary-border-color:  #ddd !default;        // Secondary border color
+$heading-line-height:     1.2 !default;         // Line height for headings
+$heading-ratio:           1.19 !default;        // Ratio for headings (strictly unitless)
+$subheading-font-size:    0.75em !default;      // Font sizing for  elements in headings
+$subheading-top-margin:   -0.25rem !default;    // Top margin of  elements in headings
+$universal-margin:        0.5rem !default;      // Universal margin for the most elements
+$universal-padding:       0.5rem !default;      // Universal padding for the most elements
+$universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+$universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+$small-font-size:         0.75em !default;      // Font sizing for  elements
+$heading-font-weight:     500 !default;         // Font weight for headings
+$bold-font-weight:        700 !default;         // Font weight for  and 
+$horizontal-rule-line-height:  1.25em !default; // 
 line height
+$blockquote-quotation-size:    3rem !default;   // Font size for the quotation of 

+$blockquote-cite-size:         0.75em !default; // Font size for the [cite] of 

+$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
+$code-font-size:           0.85em;              // Font size for , 
+$small-element-font-size:     0.75em !default;  // Font size for , , 
+$sup-top:                  -0.5em !default;     //  top
+$sub-bottom:               -0.25em !default;    //  bottom
+$a-link-color:             #0277bd !default;    // Color for :link
+$a-visited-color:          #01579b !default;    // Color for :visited
+// CSS variable name definitions [exercise caution if modifying these]
+$fore-color-var:                '--fore-color' !default;
+$secondary-fore-color-var:      '--secondary-fore-color' !default;
+$back-color-var:                '--back-color' !default;
+$secondary-back-color-var:      '--secondary-back-color' !default;
+$blockquote-color-var:          '--blockquote-color' !default;
+$pre-color-var:                 '--pre-color' !default;
+$border-color-var:              '--border-color' !default;
+$secondary-border-color-var:    '--secondary-border-color' !default;
+$heading-ratio-var:             '--heading-ratio' !default;
+$universal-margin-var:          '--universal-margin' !default;
+$universal-padding-var:         '--universal-padding' !default;
+$universal-border-radius-var:   '--universal-border-radius' !default;
+$universal-box-shadow-var:      '--universal-box-shadow' !default;
+$a-link-color-var:              '--a-link-color' !default;
+$a-visited-color-var:           '--a-visited-color' !default;
+/* Core module CSS variable definitions */
+:root {
+  #{$fore-color-var}: $fore-color;
+  #{$secondary-fore-color-var}: $secondary-fore-color;
+  #{$back-color-var}: $back-color;
+  #{$secondary-back-color-var}: $secondary-back-color;
+  #{$blockquote-color-var}: $blockquote-color;
+  #{$pre-color-var}: $pre-color;
+  #{$border-color-var}: $border-color;
+  #{$secondary-border-color-var}: $secondary-border-color;
+  #{$heading-ratio-var}: $heading-ratio;
+  #{$universal-margin-var}: $universal-margin;
+  #{$universal-padding-var}: $universal-padding;
+  #{$universal-border-radius-var}: $universal-border-radius;
+  #{$a-link-color-var} : $a-link-color;
+  #{$a-visited-color-var} : $a-visited-color;
+  @if $universal-box-shadow != none {
+    #{$universal-box-shadow-var}: $universal-box-shadow;
+  }
+}
+html {
+  font-size: $base-root-font-size;  // Set root's font sizing.
+}
+a, b, del, em, i, ins, q, span, strong, u {
+  font-size: 1em; // Fix for elements inside headings not displaying properly.
+}
+
+@if $_apply-defaults-to-all {
+  html, * {
+    font-family: #{$base-font-family};
+    line-height: $base-line-height;
+    // Prevent adjustments of font size after orientation changes in mobile.
+    -webkit-text-size-adjust: 100%;
+  }
+  * {
+    font-size: $base-font-size;
+  }
+}
+@else {
+  html {
+    font-family:  #{$base-font-family};
+    line-height: $base-line-height;
+    // Prevent adjustments of font size after orientation changes in mobile.
+    -webkit-text-size-adjust: 100%;
+  }
+}
+
+body {
+  margin: $_body-margin;
+  color: var(#{$fore-color-var});
+  background: var(#{$back-color-var});
+}
+
+// Correct display for Edge & Firefox.
+details {
+  display: block;
+}
+
+// Correct display in all browsers.
+summary {
+  display: list-item;
+}
+
+// Abbreviations
+abbr[title] {
+  border-bottom: none;           // Remove bottom border in Firefox 39-.
+  text-decoration: underline dotted;  // Opinionated style-fix for all browsers.
+}
+
+// Show overflow in Edge.
+input {
+  overflow: visible;
+}
+
+// Make images responsive by default.
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: $heading-line-height;
+  margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
+  font-weight: $heading-font-weight;
+  small {
+    color: var(#{$secondary-fore-color-var});
+    display: block;
+    @if $subheading-top-margin != 0 {
+      margin-top: $subheading-top-margin;
+    }
+    @if $subheading-font-size != $small-font-size {
+      font-size: $subheading-font-size;
+    }
+  }
+}
+
+h1 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
+}
+h2 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
+}
+h3 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
+}
+h4 {
+  font-size: calc(1rem * var(#{$heading-ratio-var}));
+}
+h5 {
+  font-size: 1rem;
+}
+h6 {
+  font-size: calc(1rem / var(#{$heading-ratio-var}));
+}
+
+p {
+  margin: var(#{$universal-margin-var});
+}
+
+ol, ul {
+  margin: var(#{$universal-margin-var});
+  padding-left: calc(2 * var(#{$universal-margin-var}));
+}
+
+b, strong {
+  font-weight: $bold-font-weight;
+}
+
+hr {
+  // Fixes and defaults for styling
+  box-sizing: content-box;
+  border: 0;
+  // Actual styling using variables
+  line-height: $horizontal-rule-line-height;
+  margin: var(#{$universal-margin-var});
+  height: $__1px;
+  background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
+}
+
+blockquote {  // Doesn't have a back color by default, can be added manually.
+  display: block;
+  position: relative;
+  font-style: italic;
+  color: var(#{$secondary-fore-color-var});
+  margin: var(#{$universal-margin-var});
+  padding: calc(3 * var(#{$universal-padding-var}));
+  border: $__1px solid var(#{$secondary-border-color-var});
+  border-left: 6*$__1px solid var(#{$blockquote-color-var});
+  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  &:before {
+    position: absolute;
+    top: calc(0rem - var(#{$universal-padding-var}));
+    left: 0;
+    font-family: sans-serif;
+    font-size: $blockquote-quotation-size;
+    font-weight: 700;
+    content: "\201c";
+    color: var(#{$blockquote-color-var});
+  }
+  &[cite]:after{
+    font-style: normal;
+    font-size: $blockquote-cite-size;
+    font-weight: 700;
+    content: "\a—  " attr(cite);
+    white-space: pre;
+  }
+}
+
+code, kbd, pre, samp {
+  font-family: #{$code-font-family};     // Display fix should be applied manually!
+  font-size: $code-font-size;
+}
+
+code { // No border color by default and fore color is the default for text, can be altered manually.
+  background: var(#{$secondary-back-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
+  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+
+kbd { // No border color by default, can be altered manually.
+  background: var(#{$fore-color-var});
+  color: var(#{$back-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
+  padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+
+pre { // Fore color is the default, can be altered manually.
+  overflow: auto; // Responsiveness
+  background: var(#{$secondary-back-color-var});
+  padding: calc(1.5 * var(#{$universal-padding-var}));
+  margin: var(#{$universal-margin-var});
+  border: $__1px solid var(#{$secondary-border-color-var});
+  border-left: 4*$__1px solid var(#{$pre-color-var});
+  border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+
+// Prevent elements from affecting the line height in all browsers.
+sup, sub, code, kbd {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+small, sup, sub, figcaption {
+  font-size: $small-element-font-size;
+}
+
+sup {
+  top: $sup-top;
+}
+sub {
+  bottom: $sub-bottom;
+}
+
+figure {
+  margin: var(#{$universal-margin-var});
+}
+figcaption {
+    color: var(#{$secondary-fore-color-var});
+}
+
+a {
+  text-decoration: none;
+  &:link{
+    color: var(#{$a-link-color-var});
+  }
+  &:visited {
+    color: var(#{$a-visited-color-var});
+  }
+  &:hover, &:focus {
+    text-decoration: underline;
+  }
+}
diff --git a/docs/mini/_input_control.scss b/docs/mini/_input_control.scss
new file mode 100644
index 000000000..04635bac2
--- /dev/null
+++ b/docs/mini/_input_control.scss
@@ -0,0 +1,317 @@
+/*
+  Definitions for forms and input elements.
+*/
+// Different elements are styled based on the same set of rules.
+$input-group-name:           'input-group' !default;  // Class name for input groups.
+$_include-fluid-input-group: true !default;           // [Hidden] Should fluid input groups be included? (boolean)
+$input-group-fluid-name:     'fluid' !default;        // Class name for fluid input groups.
+$input-group-vertical-name:  'vertical' !default;     // Class name for vertical input groups.
+$input-group-mobile-breakpoint:   767px !default;     // Breakpoint for fluid input group mobile view.
+$button-class-name:           'button' !default;      // Class name for elements styled as buttons.
+$input-disabled-opacity:      0.75 !default;          // Opacity for input elements when disabled.
+$button-group-name:         'button-group' !default;  // Class name for button groups.
+$button-group-mobile-breakpoint: 767px !default;      // Mobile breakpoint for button groups.
+$form-back-color:             #f0f0f0 !default;       // Background color for forms.
+$form-fore-color:             #111 !default;          // Text color for forms.
+$form-border-color:           #ddd !default;          // Border color for forms.
+$input-back-color:            #f8f8f8 !default;       // Background color for input elements.
+$input-fore-color:            #111 !default;          // Text color for input elements.
+$input-border-color:          #ddd !default;          // Border color for input elements.
+$input-focus-color:           #0288d1 !default;       // Border color for focused input elements.
+$input-invalid-color:         #d32f2f !default;       // Border color for invalid input elements.
+$button-back-color:           #e2e2e2 !default;       // Background color for buttons.
+$button-hover-back-color:     #dcdcdc !default;       // Background color for buttons (hover).
+$button-fore-color:           #212121 !default;       // Text color for buttons.
+$button-border-color:         transparent !default;   // Border color for buttons.
+$button-hover-border-color:   transparent !default;   // Border color for buttons (hover).
+$button-group-border-color:  rgba(124,124,124, 0.54) !default;  // Border color for button groups.
+// CSS variable name definitions [exercise caution if modifying these]
+$form-back-color-var:         '--form-back-color' !default;
+$form-fore-color-var:         '--form-fore-color' !default;
+$form-border-color-var:       '--form-border-color' !default;
+$input-back-color-var:        '--input-back-color' !default;
+$input-fore-color-var:        '--input-fore-color' !default;
+$input-border-color-var:      '--input-border-color' !default;
+$input-focus-color-var:       '--input-focus-color' !default;
+$input-invalid-color-var:     '--input-invalid-color' !default;
+$button-back-color-var:       '--button-back-color' !default;
+$button-hover-back-color-var: '--button-hover-back-color' !default;
+$button-fore-color-var:       '--button-fore-color' !default;
+$button-border-color-var:       '--button-border-color' !default;
+$button-hover-border-color-var: '--button-hover-border-color' !default;
+$button-group-border-color-var: '--button-group-border-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $base-font-size:          1rem !default;        // Font sizing for all elements
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+// Check the `_input_control_mixins.scss` file to find this module's mixins.
+@import 'input_control_mixins';
+/* Input_control module CSS variable definitions */
+:root {
+  #{$form-back-color-var}: $form-back-color;
+  #{$form-fore-color-var}: $form-fore-color;
+  #{$form-border-color-var}: $form-border-color;
+  #{$input-back-color-var}: $input-back-color;
+  #{$input-fore-color-var}: $input-fore-color;
+  #{$input-border-color-var}: $input-border-color;
+  #{$input-focus-color-var}: $input-focus-color;
+  #{$input-invalid-color-var}: $input-invalid-color;
+  #{$button-back-color-var}: $button-back-color;
+  #{$button-hover-back-color-var}: $button-hover-back-color;
+  #{$button-fore-color-var}: $button-fore-color;
+  #{$button-border-color-var}: $button-border-color;
+  #{$button-hover-border-color-var}: $button-hover-border-color;
+  #{$button-group-border-color-var}: $button-group-border-color;
+}
+// Base form styling
+form {  // Text color is the default, this can be changed manually.
+  background: var(#{$form-back-color-var});
+  color: var(#{$form-fore-color-var});
+  border: $__1px solid var(#{$form-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+}
+// Fieldset styling
+fieldset {
+  // Apply always to overwrite defaults for all of the below.
+  border: $__1px solid var(#{$form-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: calc(var(#{$universal-margin-var}) / 4);
+  padding: var(#{$universal-padding-var});
+}
+// Legend styling.
+legend {
+  // Edge fixes.
+  box-sizing: border-box;
+  display: table;
+  max-width: 100%;
+  white-space: normal;
+  // Actual styling.
+  font-weight: $bold-font-weight;
+  padding: calc(var(#{$universal-padding-var}) / 2);
+}
+// Label syling. - Basically just padding, but there might be more in the future.
+label {
+  padding: calc(var(#{$universal-padding-var}) / 2) var(#{$universal-padding-var});
+}
+// Input group styling.
+.#{$input-group-name} {
+  display: inline-block;
+  // Fluid input groups
+  @if $_include-fluid-input-group {
+    &.#{$input-group-fluid-name} {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      & > input {
+        max-width: 100%;
+        flex-grow: 1;
+        flex-basis: 0px;
+      }
+      // On mobile
+      @media screen and (max-width: #{$input-group-mobile-breakpoint}) {
+        align-items: stretch;
+        flex-direction: column;
+      }
+    }
+    // Vertical input groups
+    &.#{$input-group-vertical-name} {
+      display: flex;
+      align-items: stretch;
+      flex-direction: column;
+      & > input {
+        max-width: 100%;
+        flex-grow: 1;
+        flex-basis: 0px;
+      }
+    }
+  }
+}
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+// Correct style in Chrome and Safari.
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+// Correct style in Chrome and Safari.
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+// Common textual input styling. - Avoid using box-shadow with these.
+input:not([type]), [type="text"], [type="email"], [type="number"], [type="search"],
+[type="password"], [type="url"], [type="tel"], [type="checkbox"], [type="radio"], textarea, select {
+  box-sizing: border-box;
+  // Background, color and border should not be unassigned, as the browser defaults will apply.
+  background: var(#{$input-back-color-var});
+  color: var(#{$input-fore-color-var});
+  border: $__1px solid var(#{$input-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: calc(var(#{$universal-margin-var}) / 2);
+  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+}
+// Hover, focus, disabled, readonly, invalid styling for common textual inputs.
+input:not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select {
+  &:hover, &:focus {
+    border-color: var(#{$input-focus-color-var});
+    box-shadow: none;
+  }
+  &:invalid, &:focus:invalid{
+    border-color: var(#{$input-invalid-color-var});
+    box-shadow: none;
+  }
+  &[readonly]{
+    background: var(#{$secondary-back-color-var});
+  }
+}
+// Fix for select and option elements overflowing their parent container.
+select {
+  max-width: 100%;
+}
+option {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// Styling for checkboxes and radio buttons.
+[type="checkbox"], [type="radio"] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: relative;
+  height: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
+  width: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
+  vertical-align: text-bottom;
+  padding: 0; // Remove padding added from previous styles.
+  flex-basis: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2) !important; // Override fluid input-group styling.
+  flex-grow: 0 !important;  // Using with fluid input-groups is not recommended.
+  &:checked:before {
+    position: absolute;
+  }
+}
+[type="checkbox"] {
+  &:checked:before {
+    content: '\2713';
+    font-family: sans-serif;
+    font-size: calc(#{$base-font-size} + var(#{$universal-padding-var}) / 2);
+    top: calc(0rem - var(#{$universal-padding-var}));
+    left: calc(var(#{$universal-padding-var}) / 4);
+  }
+}
+[type="radio"] {
+  border-radius: 100%;
+  &:checked:before {
+    border-radius: 100%;
+    content: '';
+    top: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
+    left: calc(#{$__1px} + var(#{$universal-padding-var}) / 2);
+    background: var(#{$input-fore-color-var});
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+}
+// Placeholder styling (keep browser-specific definitions separated, they do not play well together).
+:placeholder-shown {
+  color: var(#{$input-fore-color-var});
+}
+::-ms-placeholder {
+  color: var(#{$input-fore-color-var});
+  opacity: 0.54;
+}
+// Definitions for the button and button-like elements.
+// Different elements are styled based on the same set of rules.
+// Reset for Firefox focusing on button elements.
+button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+// Fixes for Android 4, iOS and Safari.
+button, html [type="button"], [type="reset"], [type="submit"] {
+  -webkit-appearance: button;
+}
+// Other fixes.
+button {
+  overflow: visible;      // Show the overflow in IE.
+  text-transform: none;    // Remove inheritance of text-transform in Edge, Firefox, and IE.
+}
+// Default styling
+button, [type="button"], [type="submit"], [type="reset"],
+a.#{$button-class-name}, label.#{$button-class-name}, .#{$button-class-name},
+a[role="button"], label[role="button"], [role="button"] {
+  display: inline-block;
+  background: var(#{$button-back-color-var});
+  color: var(#{$button-fore-color-var});
+  border: $__1px solid var(#{$button-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+  margin: var(#{$universal-margin-var});
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.3s;
+  &:hover, &:focus {
+    background: var(#{$button-hover-back-color-var});
+    border-color: var(#{$button-hover-border-color-var});
+  }
+}
+// Disabled styling for input and button elements.
+input, textarea, select, button, .#{$button-class-name}, [role="button"] {
+  // .button[disabled] is actually higher specificity than a.button, so no need for more than that
+  &:disabled, &[disabled] {
+    cursor: not-allowed;
+    opacity: $input-disabled-opacity;
+  }
+}
+// Button group styling.
+.#{$button-group-name} {
+  display: flex;
+  border: $__1px solid var(#{$button-group-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  & > button, [type="button"], & > [type="submit"], & > [type="reset"],
+  & > .#{$button-class-name}, & > [role="button"] {
+    margin: 0;
+    max-width: 100%;
+    flex: 1 1 auto;
+    text-align: center;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  & > :not(:first-child) {
+    border-left: $__1px solid var(#{$button-group-border-color-var});
+  }
+  // Responsiveness for button groups
+  @media screen and (max-width: #{$button-group-mobile-breakpoint}) {
+    flex-direction: column;
+    & > :not(:first-child) {
+      border: 0;    // Reapply to remove the left border from elements.
+      border-top: $__1px solid var(#{$button-group-border-color-var});
+    }
+  }
+}
diff --git a/docs/mini/_input_control_mixins.scss b/docs/mini/_input_control_mixins.scss
new file mode 100644
index 000000000..4afba1cb8
--- /dev/null
+++ b/docs/mini/_input_control_mixins.scss
@@ -0,0 +1,46 @@
+// Input_control module's mixin definitions are here. For the module itself
+// check `_input_control.scss`.
+// Button color variant mixin:
+//  $button-alt-name: The name of the class used for the button variant.
+//  $button-alt-back-color: Background color for button variant.
+//  $button-alt-hover-back-color: Background color for button variant (hover).
+//  $button-alt-fore-color: Text color for button variant.
+//  $button-alt-border-color: Border color for button variant.
+//  $button-alt-hover-border-color: Border color for button variant (hover).
+@mixin make-button-alt-color ($button-alt-name, $button-alt-back-color : $button-back-color,
+  $button-alt-hover-back-color : $button-hover-back-color, $button-alt-fore-color : $button-fore-color,
+  $button-alt-border-color : $button-border-color, $button-alt-hover-border-color : $button-hover-border-color) {
+    button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
+      &.#{$button-alt-name} {
+        @if $button-alt-back-color != $button-back-color {
+          #{$button-back-color-var}: $button-alt-back-color;
+        }
+        @if $button-alt-fore-color != $button-fore-color{
+          #{$button-fore-color-var}: $button-alt-fore-color;
+        }
+        @if $button-alt-border-color != $button-border-color{
+          #{$button-border-color-var}: $button-alt-border-color;
+        }
+        &:hover, &:focus {
+          @if $button-alt-hover-back-color != $button-hover-back-color{
+            #{$button-hover-back-color-var}: $button-alt-hover-back-color;
+          }
+          @if $button-alt-hover-border-color != $button-hover-border-color{
+            #{$button-hover-border-color-var}: $button-alt-hover-border-color;
+          }
+        }
+      }
+    }
+}
+// Button size variant mixin:
+//  $button-alt-name: The name of the class used for the button variant.
+//  $button-alt-padding: The padding of the button variant.
+//  $button-alt-margin The margin of the button variant.
+@mixin make-button-alt-size ($button-alt-name, $button-alt-padding, $button-alt-margin) {
+  button, [type="button"], [type="submit"], [type="reset"], .#{$button-class-name}, [role="button"] {
+    &.#{$button-alt-name} {
+      padding: $button-alt-padding;
+      margin: $button-alt-margin;
+    }
+  }
+}
diff --git a/docs/mini/_layout.scss b/docs/mini/_layout.scss
new file mode 100644
index 000000000..df2dc8bad
--- /dev/null
+++ b/docs/mini/_layout.scss
@@ -0,0 +1,199 @@
+/*
+  Definitions for the grid system, cards and containers.
+*/
+// The grid system uses the flexbox module, meaning it might be incompatible with certain browsers.
+$_include-parent-layout:        true !default;        // [Hidden] Flag for rows defining column layouts (`true`/`false`).
+$grid-column-count:            12 !default;           // Number of columns in the grid (integer value only).
+$grid-container-name:          'container' !default;  // Class name for the grid system container.
+$grid-row-name:                'row' !default;        // Class name for the grid system rows.
+$grid-row-parent-layout-prefix:'cols' !default;       // Class name prefix for the grid's row parents.
+$grid-column-prefix:           'col' !default;        // Class name prefix for the grid's columns.
+$grid-column-offset-suffix:    'offset' !default;     // Class name suffix for the grid's offsets.
+$grid-order-normal-suffix:     'normal' !default;     // Class name suffix for grid columns with normal priority.
+$grid-order-first-suffix:      'first' !default;      // Class name suffix for grid columns with highest priority.
+$grid-order-last-suffix:       'last' !default;       // Class name suffix for grid columns with lowest priorty.
+$grid-small-prefix:            'sm' !default;         // Small screen class prefix for grid.
+$grid-medium-prefix:           'md' !default;         // Medium screen class prefix for grid.
+$grid-large-prefix:            'lg' !default;         // Large screen class prefix for grid.
+$grid-medium-breakpoint:       768px !default;        // Medium screen breakpoint for grid.
+$grid-large-breakpoint:        1280px !default;       // Large screen breakpoint for grid.
+$card-name:                    'card' !default;       // Class name for the cards.
+$card-section-name:            'section' !default;    // Class name for the cards' sections.
+$card-section-media-name:      'media' !default;      // Class name for the cards' sections (media cotent).
+$card-normal-width:            320px !default;        // Width for normal cards.
+$card-section-media-height:    200px !default;        // Height for cards' media sections.
+$card-fore-color:              #111 !default;         // Text color for the cards.
+$card-back-color:              #f8f8f8 !default;      // Background color for the cards.
+$card-border-color:            #ddd !default;         // Border color for the cards.
+// CSS variable name definitions [exercise caution if modifying these]
+$card-fore-color-var:          '--card-fore-color' !default;
+$card-back-color-var:          '--card-back-color' !default;
+$card-border-color-var:        '--card-border-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+// Check the `_layout_mixins.scss` file to find this module's mixins.
+@import 'layout_mixins';
+// Fluid grid system container definition.
+.#{$grid-container-name} {
+  margin: 0 auto;
+  padding: 0 calc(1.5 * var(#{$universal-padding-var}));
+}
+// Grid row definition.
+.#{$grid-row-name} {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-flow: row wrap;
+}
+// Inline mixin, used to generate class definitions for each grid step.
+@mixin generate-grid-size ($size-prefix){
+  @if $_include-parent-layout {
+    .#{$grid-column-prefix}-#{$size-prefix},
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'],
+    .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      padding: 0 calc(var(#{$universal-padding-var}) / 2);
+    }
+    // Grid column specific definition for flexible column.
+    .#{$grid-column-prefix}-#{$size-prefix},
+    .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix} > *  {
+      max-width: 100%;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+  }
+  @else {
+    // Grid column generic definitions.
+    .#{$grid-column-prefix}-#{$size-prefix},
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-'],
+    [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] {
+      flex: 0 0 auto;
+      padding: 0 calc(var(#{$universal-padding-var}) / 2);
+    }
+    // Grid column specific definition for flexible column.
+    .#{$grid-column-prefix}-#{$size-prefix} {
+      max-width: 100%;
+      flex-grow: 1;
+      flex-basis: 0;
+    }
+  }
+  // Grid column specific definitions for predefined columns.
+  @for $i from 1 through $grid-column-count {
+    @if $_include-parent-layout {
+      .#{$grid-column-prefix}-#{$size-prefix}-#{$i},
+      .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * {
+        max-width: #{($i * 100% / $grid-column-count)};
+        flex-basis: #{($i * 100% / $grid-column-count)};
+      }
+    }
+    @else {
+      .#{$grid-column-prefix}-#{$size-prefix}-#{$i} {
+        max-width: #{($i * 100% / $grid-column-count)};
+        flex-basis: #{($i * 100% / $grid-column-count)};
+      }
+    }
+    // Offest definitions.
+    .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-#{($i - 1)} {
+      @if ($i - 1) == 0 {
+        margin-left: 0;
+      }
+      @else {
+        margin-left: #{(($i - 1) * 100% / $grid-column-count)};
+      }
+    }
+  }
+  // Reordering definitions.
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-normal-suffix} {
+    order: initial;
+  }
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-first-suffix}  {
+    order: -999;
+  }
+  .#{$grid-column-prefix}-#{$size-prefix}-#{$grid-order-last-suffix} {
+    order: 999;
+  }
+}
+// Definitions for smaller screens.
+@include generate-grid-size($grid-small-prefix);
+// Definitions for medium screens.
+@media screen and (min-width: #{$grid-medium-breakpoint}){
+  @include generate-grid-size($grid-medium-prefix);
+}
+// Definitions for large screens.
+@media screen and (min-width: #{$grid-large-breakpoint}){
+  @include generate-grid-size($grid-large-prefix);
+}
+/* Card component CSS variable definitions */
+:root {
+  #{$card-back-color-var}: $card-back-color;
+  #{$card-fore-color-var}: $card-fore-color;
+  #{$card-border-color-var}: $card-border-color;
+}
+// Card styling
+.#{$card-name} {
+  // New syntax
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-self: center;
+  position: relative;
+  width: 100%;
+  // Actual styling for the cards
+  background: var(#{$card-back-color-var});
+  color: var(#{$card-fore-color-var});
+  border: $__1px solid var(#{$card-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  overflow: hidden;   // Hide overflow from section borders
+  // Responsiveness (if the screen is larger than card, set max-width)
+  @media screen and (min-width: #{$card-normal-width}) {
+    max-width: $card-normal-width;
+  }
+  // Card sections
+  & > .#{$card-section-name} {
+    // Reapply background and foreground colors, so that mixins can be applied properly.
+    background: var(#{$card-back-color-var});
+    color: var(#{$card-fore-color-var});
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;        // Clean borders and radiuses for any element-based sections
+    border-radius: 0; // Clean borders and radiuses for any element-based sections
+    border-bottom: $__1px solid var(#{$card-border-color-var});
+    padding: var(#{$universal-padding-var});
+    width: 100%;
+    // Card media sections
+    &.#{$card-section-media-name} {
+      height: $card-section-media-height;
+      padding: 0;
+      -o-object-fit: cover;
+         object-fit: cover;
+    }
+  }
+  // Card sections - last
+  & > .#{$card-section-name}:last-child {
+    border-bottom: 0;  // Clean the extra border for last section
+  }
+}
diff --git a/docs/mini/_layout_mixins.scss b/docs/mini/_layout_mixins.scss
new file mode 100644
index 000000000..b8eac1ba0
--- /dev/null
+++ b/docs/mini/_layout_mixins.scss
@@ -0,0 +1,62 @@
+// Layout (card) module's mixin definitions are here. For the module itself
+// check `_layout.scss`.
+// Mixin for alternate card sizes:
+//  $card-alt-size-name: The name of the class used for the alternate size card.
+//  $card-alt-size-width: The width of the alternate size card.
+@mixin make-card-alt-size ($card-alt-size-name, $card-alt-size-width) {
+  @if type-of($card-alt-size-width) == 'number' and unit($card-alt-size-width) == '%' {
+    .#{$card-name}.#{$card-alt-size-name} {
+      max-width: $card-alt-size-width;
+      width: auto;
+    }
+  }
+  @else {
+    @media screen and (min-width: #{$card-alt-size-width}) {
+      .#{$card-name}.#{$card-alt-size-name} {
+        max-width: $card-alt-size-width;
+      }
+    }
+  }
+}
+// Mixin for alternate cards (card color variants):
+//  $card-alt-name: The name of the class used for the alternate card.
+//  $card-alt-back-color: The background color of the alternate card.
+//  $card-alt-fore-color: The text color of the alternate card.
+//  $card-alt-border-color: The border style of the alternate card.
+@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color : $card-back-color,
+  $card-alt-fore-color : $card-fore-color, $card-alt-border-color : $card-border-color) {
+  .#{$card-name}.#{$card-alt-name} {
+    @if $card-alt-back-color != $card-back-color {
+      #{$card-back-color-var}: $card-alt-back-color;
+    }
+    @if $card-alt-fore-color != $card-fore-color {
+      #{$card-fore-color-var}: $card-alt-fore-color;
+    }
+    @if $card-alt-border-color != $card-border-color {
+      #{$card-border-color-var}: $card-alt-border-color;
+    }
+  }
+}
+// Mixin for alternate card sections (card section color variants):
+//  $card-section-alt-name: The name of the class used for the alternate card section.
+//  $card-section-alt-back-color: The background color of the alternate card section.
+//  $card-section-alt-fore-color: The text color of the alternate card section.
+@mixin make-card-section-alt-color ($card-section-alt-name, $card-section-alt-back-color : $card-back-color,
+  $card-section-alt-fore-color : $card-fore-color) {
+  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+    @if $card-section-alt-back-color != $card-back-color {
+      #{$card-back-color-var}: $card-section-alt-back-color;
+    }
+    @if $card-section-alt-fore-color != $card-fore-color {
+      #{$card-fore-color-var}: $card-section-alt-fore-color;
+    }
+  }
+}
+// Mixin for alternate card sections (card section padding variants):
+//  $card-section-alt-name: The name of the class used for the alternate card section.
+//  $card-section-alt-padding: The padding of the alternate card section.
+@mixin make-card-section-alt-style ($card-section-alt-name, $card-section-alt-padding) {
+  .#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
+    padding: $card-section-alt-padding;
+  }
+}
diff --git a/docs/mini/_navigation.scss b/docs/mini/_navigation.scss
new file mode 100644
index 000000000..6c905bf7d
--- /dev/null
+++ b/docs/mini/_navigation.scss
@@ -0,0 +1,315 @@
+/*
+  Definitions for navigation elements.
+*/
+// Different elements are styled based on the same set of rules.
+$header-height:     3.1875rem !default;      // Height of the header element.
+$header-back-color: #f8f8f8 !default;        // Background color for the header element.
+$header-hover-back-color: #f0f0f0 !default;  // Background color for the header element (hover).
+$header-fore-color:   #444 !default;         // Text color for the header element.
+$header-border-color: #ddd !default;         // Border color for the header element.
+$nav-back-color:      #f8f8f8 !default;      // Background color for the nav element.
+$nav-hover-back-color: #f0f0f0 !default;     // Background color for the nav element (hover).
+$nav-fore-color:      #444 !default;         // Text color for the nav element.
+$nav-border-color:    #ddd !default;         // Border color for the nav element.
+$nav-link-color:      #0277bd !default;      // Color for link in the nav element.
+$footer-fore-color:   #444 !default;         // Text color for the footer element.
+$footer-back-color:   #f8f8f8 !default;      // Background color for footer nav element.
+$footer-border-color: #ddd !default;         // Border color for the footer element.
+$footer-link-color:   #0277bd !default;      // Color for link in the footer element.
+$drawer-back-color:   #f8f8f8 !default;      // Background color for the drawer component.
+$drawer-border-color: #ddd !default;         // Border color for the drawer component.
+$drawer-hover-back-color: #f0f0f0 !default;  // Background color for the drawer component's close (hover).
+$drawer-close-color:  #444 !default;         // Color of the close element for the drawer component.
+$_header-only-bottom-border:  true !default; // [Hidden] Apply styling only to the bottom border of header? (boolean)
+$_header-links-uppercase:     true !default; // [Hidden] Should header links and buttons be uppercase? (boolean)
+$header-logo-name:    'logo' !default;       // Class name for the header logo element.
+$header-logo-font-size: 1.75rem !default;    // Font ize for the header logo element.
+$nav-sublink-prefix:   'sublink' !default;   // Prefix for the subcategory tabs in nav.
+$nav-sublink-depth:    2 !default;           // Amount of subcategory classes to add.
+$_footer-only-top-border:  true !default;    // [Hidden] Apply styling only to the top border of footer? (boolean)
+$footer-font-size:    0.875rem !default;     // Font size for text in footer element.
+$sticky-name:         'sticky' !default;     // Class name for sticky headers and footers.
+$drawer-name:         'drawer' !default;     // Class name for the drawer component.
+$drawer-toggle-name: 'drawer-toggle' !default; // Class name for the drawer component's toggle.
+$drawer-toggle-font-size: 1.5em !default;    // Font size for the drawer component's toggle. (prefer em units)
+$drawer-mobile-breakpoint: 768px !default;   // Mobile breakpoint for the drawer component.
+$_drawer-right:     true !default;           // [Hidden] Should the drawer appear on the right side of the screen?
+$drawer-persistent-name: 'persistent' !default; // Class name for the persisten variant of the drawer component.
+$drawer-width:      320px !default;          // Width of the drawer component.
+$drawer-close-name: 'drawer-close' !default; // Class name of the close element for the drawer component.
+$drawer-close-size: 2rem !default;           // Size of the close element for the drawer component.
+$drawer-icons-color:  #212121 !default;      // Color for the icons used in the drawer component.
+// CSS variable name definitions [exercise caution if modifying these]
+$header-fore-color-var:          '--header-fore-color' !default;
+$header-back-color-var:          '--header-back-color' !default;
+$header-hover-back-color-var:    '--header-hover-back-color' !default;
+$header-border-color-var:        '--header-border-color' !default;
+$nav-fore-color-var:             '--nav-fore-color' !default;
+$nav-back-color-var:             '--nav-back-color' !default;
+$nav-hover-back-color-var:       '--nav-hover-back-color' !default;
+$nav-border-color-var:           '--nav-border-color' !default;
+$nav-link-color-var:             '--nav-link-color' !default;
+$footer-fore-color-var:          '--footer-fore-color' !default;
+$footer-back-color-var:          '--footer-back-color' !default;
+$footer-border-color-var:        '--footer-border-color' !default;
+$footer-link-color-var:          '--footer-link-color' !default;
+$drawer-back-color-var:          '--drawer-back-color' !default;
+$drawer-border-color-var:        '--drawer-border-color' !default;
+$drawer-hover-back-color-var:    '--drawer-hover-back-color' !default;
+$drawer-close-color-var:         '--drawer-close-color' !default;
+// == Uncomment below code if this module is used on its own ==
+//
+// $universal-margin:        0.5rem !default;      // Universal margin for the most elements
+// $universal-padding:       0.5rem !default;      // Universal padding for the most elements
+// $universal-border-radius: 0.125rem !default;    // Universal border-radius for most elements
+// $universal-box-shadow:    none !default;        // Universal box-shadow for most elements
+// $universal-margin-var:          '--universal-margin' !default;
+// $universal-padding-var:         '--universal-padding' !default;
+// $universal-border-radius-var:   '--universal-border-radius' !default;
+// $universal-box-shadow-var:      '--universal-box-shadow' !default;
+// :root {
+//  #{$universal-margin-var}: $universal-margin;
+//  #{$universal-padding-var}: $universal-padding;
+//  #{$universal-border-radius-var}: $universal-border-radius;
+//  @if $universal-box-shadow != none {
+//   #{$universal-box-shadow-var}: $universal-box-shadow;
+//  }
+// }
+//
+// ============================================================
+/* Navigation module CSS variable definitions */
+:root {
+  #{$header-back-color-var}: $header-back-color;
+  #{$header-hover-back-color-var}: $header-hover-back-color;
+  #{$header-fore-color-var}: $header-fore-color;
+  #{$header-border-color-var}: $header-border-color;
+  #{$nav-back-color-var}: $nav-back-color;
+  #{$nav-hover-back-color-var}: $nav-hover-back-color;
+  #{$nav-fore-color-var}: $nav-fore-color;
+  #{$nav-border-color-var}: $nav-border-color;
+  #{$nav-link-color-var}: $nav-link-color;
+  #{$footer-fore-color-var}: $footer-fore-color;
+  #{$footer-back-color-var}: $footer-back-color;
+  #{$footer-border-color-var}: $footer-border-color;
+  #{$footer-link-color-var}: $footer-link-color;
+  #{$drawer-back-color-var}: $drawer-back-color;
+  #{$drawer-hover-back-color-var}: $drawer-hover-back-color;
+  #{$drawer-border-color-var}: $drawer-border-color;
+  #{$drawer-close-color-var}: $drawer-close-color;
+}
+// Header styling. - No box-shadow as it causes lots of weird bugs in Chrome. No margin as it shouldn't have any.
+header {
+  height: $header-height;
+  background: var(#{$header-back-color-var}); // Always apply background color to avoid shine through
+  color: var(#{$header-fore-color-var});
+  @if $_header-only-bottom-border {
+    border-bottom: $__1px solid var(#{$header-border-color-var});
+  }
+  @else {
+    border: $__1px solid var(#{$header-border-color-var});
+  }
+  padding: calc(var(#{$universal-padding-var}) / 4) 0;
+  // Responsiveness for smaller displays, scrolls horizontally.
+  white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  // Fix for responsive header, using the grid system's row and column alignment.
+  &.#{$grid-row-name} {
+    box-sizing: content-box;
+  }
+  // Header logo styling.
+  .#{$header-logo-name} {
+    color: var(#{$header-fore-color-var});
+    font-size: $header-logo-font-size;
+    padding: var(#{$universal-padding-var}) calc(2 * var(#{$universal-padding-var}));
+    text-decoration: none;
+  }
+  // Link styling.
+  button, [type="button"], .#{$button-class-name}, [role="button"] {
+    box-sizing: border-box;
+    position: relative;
+    top: calc(0rem - var(#{$universal-padding-var}) / 4);  // Use universal-padding to offset the padding of the header.
+    height: calc(#{$header-height} + var(#{$universal-padding-var}) / 2);  // Fill header.
+    background: var(#{$header-back-color-var});        // Apply color regardless to override styling from other things.
+    line-height: calc(#{$header-height} - var(#{$universal-padding-var}) * 1.5);
+    text-align: center;
+    color: var(#{$header-fore-color-var});
+    border: 0;
+    border-radius: 0;
+    margin: 0;
+    @if $_header-links-uppercase {
+      text-transform: uppercase;
+    }
+    &:hover, &:focus {
+      background: var(#{$header-hover-back-color-var});
+    }
+  }
+}
+// Navigation sidebar styling.
+nav {
+  background: var(#{$nav-back-color-var});
+  color: var(#{$nav-fore-color-var});
+  border: $__1px solid var(#{$nav-border-color-var});
+  border-radius: var(#{$universal-border-radius-var});
+  margin: var(#{$universal-margin-var});
+  @if $universal-box-shadow != none {
+    box-shadow: var(#{$universal-box-shadow-var});
+  }
+  * {
+    padding: var(#{$universal-padding-var}) calc(1.5 * var(#{$universal-padding-var}));
+  }
+  a, a:visited {
+    display: block;
+    color: var(#{$nav-link-color-var});    // Apply regardless to de-stylize visited links.
+    border-radius: var(#{$universal-border-radius-var});
+    transition: background 0.3s;
+    &:hover, &:focus {
+      text-decoration: none;
+      background: var(#{$nav-hover-back-color-var});
+    }
+  }
+  // Subcategories in navigation.
+  @for $i from 1 through $nav-sublink-depth {
+    .#{$nav-sublink-prefix}-#{$i} {
+      position: relative;
+      margin-left: calc(#{$i * 2} * var(#{$universal-padding-var}));
+      &:before {
+        position: absolute;
+        left: calc(var(#{$universal-padding-var}) - #{1 + ($i - 1)*2} * var(#{$universal-padding-var}));
+        top: -#{$__1px};
+        content: '';
+        height: 100%;
+        border: $__1px solid var(#{$nav-border-color-var});
+        border-left: 0;
+      }
+    }
+  }
+}
+// Footer styling.
+footer {
+  background: var(#{$footer-back-color-var}); // Always apply background color to avoid shine through
+  color: var(#{$footer-fore-color-var});
+  @if $_footer-only-top-border {
+    border-top: $__1px solid var(#{$footer-border-color-var});
+  }
+  @else {
+    border: $__1px solid var(#{$footer-border-color-var});
+  }
+  // margin: $footer-margin;
+  padding: calc(2 * var(#{$universal-padding-var})) var(#{$universal-padding-var});
+  font-size: $footer-font-size;
+  a, a:visited {
+    color: var(#{$footer-link-color-var});
+  }
+}
+// Definitions for sticky headers and footers.
+header.#{$sticky-name} {
+  position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
+  position: sticky;
+  z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  top: 0;
+}
+footer.#{$sticky-name} {
+  position: -webkit-sticky; // One of the rare instances where prefixes are necessary.
+  position: sticky;
+  z-index: 1101;  // Deals with certain problems when combined with cards and tables.
+  bottom: 0;
+}
+// Responsive drawer component.
+.#{$drawer-toggle-name} {
+  &:before {  // No color specified, should use the color of its surroundings!
+    display: inline-block;
+    position: relative;
+    vertical-align: bottom;
+    content: '\00a0\2261\00a0'; // Spaces ensure compatibility with buttons that have text and that textless buttons will have some extra padding.
+    font-family: sans-serif;
+    font-size: $drawer-toggle-font-size;   // Almost hardcoded, should be fully compatible with its surroundings.
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    &:not(.#{$drawer-persistent-name}) {
+      display: none;
+    }
+  }
+}
+[type="checkbox"].#{$drawer-name} {
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  position: absolute;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  + * {
+    display: block;
+    box-sizing: border-box;
+    position: fixed;
+    top: 0;
+    width: $drawer-width;
+    height: 100vh;
+    overflow-y: auto;
+    background: var(#{$drawer-back-color-var});
+    border: $__1px solid var(#{$drawer-border-color-var});
+    border-radius: 0; // Set to 0 to override the value from `nav`.
+    margin: 0;        // Set to 0 to override the value from `nav`.
+    @if $universal-box-shadow != none {
+      box-shadow: var(#{$universal-box-shadow-var});
+    }
+    z-index: 1110;
+    @if $_drawer-right {
+      right: -$drawer-width;
+      transition: right 0.3s;
+    }
+    @else {
+      left: -$drawer-width;
+      transition: left 0.3s;
+    }
+    & .#{$drawer-close-name} {
+      position: absolute;
+      top: var(#{$universal-margin-var});
+      right: var(#{$universal-margin-var});
+      z-index: 1111;
+      width: $drawer-close-size;
+      height: $drawer-close-size;
+      border-radius: var(#{$universal-border-radius-var});
+      padding: var(#{$universal-padding-var});
+      margin: 0; // Fixes the offset from label
+      cursor: pointer;
+      transition: background 0.3s;
+      &:before {    // Transparent background unless hovered over. Does not block text behind it.
+        display: block;
+        content: '\00D7';
+        color: var(#{$drawer-close-color-var});
+        position: relative;
+        font-family: sans-serif;
+        font-size: $drawer-close-size;
+        line-height: 1;   // Setting to 1 seems to center the 'X' properly.
+        text-align: center;
+      }
+      &:hover, &:focus {
+        background: var(#{$drawer-hover-back-color-var});
+      }
+    }
+    @media screen and (max-width: #{$drawer-width}) {
+      width: 100%;
+    }
+  }
+  &:checked + * {
+    @if $_drawer-right {
+      right: 0;
+    }
+    @else {
+      left: 0;
+    }
+  }
+  @media screen and (min-width: #{$drawer-mobile-breakpoint}){
+    &:not(.#{$drawer-persistent-name}) + * {
+      position: static;
+      height: 100%;
+      z-index: 1100;
+      & .#{$drawer-close-name} {
+        display: none;
+      }
+    }
+  }
+}
diff --git a/docs/mini/flavor.scss b/docs/mini/flavor.scss
new file mode 100644
index 000000000..88d0f91c2
--- /dev/null
+++ b/docs/mini/flavor.scss
@@ -0,0 +1,159 @@
+//  This is a flavor file. Duplicate it and edit it to create your own flavor. Read instructions carefully.
+//  Single-line comments, starting with '//' will not be included in your final CSS file. Multiline comments,
+//  structured like the flavor description below, will be included in your final CSS file.
+/*
+  Flavor name: Default (mini-default)
+  Author: Angelos Chalaris (chalarangelo@gmail.com)
+  Maintainers: Angelos Chalaris
+  mini.css version: v3.0.0-alpha.2
+*/
+@import 'core';
+@import 'layout';
+
+/*
+  Custom elements for card elements.
+*/
+$card-small-name:              'small';            // Class name for small cards.
+$card-small-width:             240px;              // Width for small cards.
+@include make-card-alt-size ($card-small-name, $card-small-width);
+
+$card-large-name:              'large';            // Class name for large cards.
+$card-large-width:             480px;              // Width for large cards.
+@include make-card-alt-size ($card-large-name, $card-large-width);
+
+$card-fluid-name:              'fluid';            // Class name for fluid cards.
+$card-fluid-width:             100%;               // Width for fluid cards.
+@include make-card-alt-size ($card-fluid-name, $card-fluid-width);
+
+$card-warning-name:            'warning';          // Class name for card warnging color variant.
+$card-warning-back-color:      #ffca28;            // Background color for card warnging color variant.
+$card-warning-fore-color:      #111;               // Text color for card warnging color variant.
+$card-warning-border-color:    #e8b825;            // Border style for card warnging color variant.
+@include make-card-alt-color ($card-warning-name, $card-warning-back-color, $card-warning-fore-color, $card-warning-border-color);
+
+$card-error-name:              'error';            // Class name for card error color variant.
+$card-error-back-color:        #b71c1c;            // Background color for card error color variant.
+$card-error-fore-color:        #f8f8f8;            // Text color for card error color variant.
+$card-error-border-color:      #a71a1a;            // Border style for card error color variant.
+@include make-card-alt-color ($card-error-name, $card-error-back-color, $card-error-fore-color, $card-error-border-color);
+
+$card-section-dark-name:        'dark';            // Class name for card dark section variant.
+$card-section-dark-back-color:  #e0e0e0;           // Background color for card dark section variant.
+$card-section-dark-fore-color:  #111;              // Text color for card dark section variant.
+@include make-card-section-alt-color ($card-section-dark-name, $card-section-dark-back-color, $card-section-dark-fore-color);
+
+$card-section-double-padded-name:    'double-padded';   // Class name for card double-padded section variant.
+$card-section-double-padded-padding:  calc(1.5 * var(#{$universal-padding-var}));  // Padding for card sectiondouble-padded section variant.
+@include make-card-section-alt-style ($card-section-double-padded-name, $card-section-double-padded-padding);
+
+@import 'input_control';
+
+/*
+  Custom elements for forms and input elements.
+*/
+$button-primary-name:            'primary';   // Class name for primary button color variant.
+$button-primary-back-color:      #1976d2;     // Background color for primary button color variant.
+$button-primary-hover-back-color:#1565c0;     // Background color for primary button color variant (hover).
+$button-primary-fore-color:      #f8f8f8;     // Text color for primary button color variant.
+@include make-button-alt-color ($button-primary-name, $button-primary-back-color, $button-primary-hover-back-color, $button-primary-fore-color);
+
+$button-secondary-name:            'secondary'; // Class name for secondary button color variant.
+$button-secondary-back-color:      #d32f2f;     // Background color for secondary button color variant.
+$button-secondary-hover-back-color:#c62828;     // Background color for secondary button color variant (hover).
+$button-secondary-fore-color:      #f8f8f8;     // Text color for secondary button color variant.
+@include make-button-alt-color ($button-secondary-name, $button-secondary-back-color, $button-secondary-hover-back-color, $button-secondary-fore-color);
+
+$button-tertiary-name:            'tertiary';  // Class name for tertiary button color variant.
+$button-tertiary-back-color:      #308732;     // Background color for tertiary button color variant.
+$button-tertiary-hover-back-color:#277529;     // Background color for tertiary button color variant (hover).
+$button-tertiary-fore-color:      #f8f8f8;     // Text color for tertiary button color variant.
+@include make-button-alt-color ($button-tertiary-name, $button-tertiary-back-color, $button-tertiary-hover-back-color, $button-tertiary-fore-color);
+
+$button-inverse-name:            'inverse';   // Class name for inverse button color variant.
+$button-inverse-back-color:      #212121;     // Background color for inverse button color variant.
+$button-inverse-hover-back-color:#111;        // Background color for inverse button color variant (hover).
+$button-inverse-fore-color:      #f8f8f8;     // Text color for inverse button color variant.
+@include make-button-alt-color ($button-inverse-name, $button-inverse-back-color, $button-inverse-hover-back-color, $button-inverse-fore-color);
+
+$button-small-name:    'small';              // Class name, padding and margin for small button size variant.
+$button-small-padding: calc(0.5 * var(#{$universal-padding-var})) calc(0.75 * var(#{$universal-padding-var}));
+$button-small-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-small-name, $button-small-padding, $button-small-margin);
+
+$button-large-name:    'large';              // Class name, padding and margin for large button size variant.
+$button-large-padding: calc(1.5 * var(#{$universal-padding-var})) calc(2 * var(#{$universal-padding-var}));
+$button-large-margin:  var(#{$universal-margin-var});
+@include make-button-alt-size ($button-large-name, $button-large-padding, $button-large-margin);
+
+
+$_drawer-right: false;
+
+@import 'navigation';
+@import 'contextual';
+
+/*
+  Custom elements for contextual background elements, toasts and tooltips.
+*/
+$mark-secondary-name:            'secondary'; // Class name for secondary  color variant.
+$mark-secondary-back-color:      #d32f2f;     // Background color for secondary  color variant.
+@include make-mark-alt-color ($mark-secondary-name, $mark-secondary-back-color);
+
+$mark-tertiary-name:            'tertiary';  // Class name for tertiary  color variant.
+$mark-tertiary-back-color:      #308732;     // Background color for tertiary  color variant.
+@include make-mark-alt-color ($mark-tertiary-name, $mark-tertiary-back-color);
+
+$mark-tag-name:                 'tag';       // Class name, padding and border radius for tag  size variant.
+$mark-tag-padding:      calc(var(#{$universal-padding-var})/2) var(#{$universal-padding-var});
+$mark-tag-border-radius:        1em;
+@include make-mark-alt-size ($mark-tag-name, $mark-tag-padding, $mark-tag-border-radius);
+
+// Website-specific styles
+
+html, * { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif; }
+code, pre, kbd, code *, pre *, kbd * { font-family: 'Inconsolata', Menlo, Consolas, monospace; }
+code, kbd { font-size: 1em; }
+code { transform: scale(1); } /* Deals with the issue described in #243 */
+pre { font-size: 1rem; border: 0.0625rem solid var(--secondary-border-color); border-radius: var(--universal-border-radius);}
+.group{position:relative;margin-top:2em;margin-bottom:-1em}
+.search{font-size:14px;margin-top:-.1em;display:block;width:100%;border:none;border-bottom:1px solid var(--nav-link-color)}
+.search:focus{outline:none}
+label#search-label{color:var(--nav-link-color);font-size:18px;font-weight:400;position:absolute;left:5px;top:10px}
+.search:focus ~ label#search-label,.search:valid ~ label#search-label{top:-20px;font-size:14px;color:var(--nav-link-color)}
+label#menu-toggle { width: 3.4375rem;}
+
+header h1.logo {
+  margin-top: -0.8rem;
+  text-align:center;
+  a {
+  text-decoration:none;
+  color: #111;
+  }
+}
+
+header #title {
+  position:relative;
+  top: -1rem;
+  @media screen and (max-width: 500px) { font-size: 1rem; display: block }
+}
+
+header h1 small {
+  display:block;
+  font-size: 0.875rem;
+  font-style: italic;
+  color: #888;
+  margin-top: -0.8rem;
+  @media screen and (max-width: 768px) { font-size: 0.75rem; }
+  @media screen and (max-width: 600px) { font-size: 0.625rem; }
+  @media screen and (max-width: 500px) { font-size: 0.5rem; margin-top: -1.2rem; }
+}
+
+label#menu-toggle {
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  width: 3.4375rem;
+}
+
+.card {
+  box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.125), 0 0.125rem 0.125rem -0.125rem rgba(0, 0, 0, 0.25);
+}
diff --git a/package-lock.json b/package-lock.json
index d0fb28b03..ca776f670 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,6 +52,11 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-1.5.1.tgz",
       "integrity": "sha1-MU3QpLM2j609/NxU7eYXG4htrzw="
     },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
+    },
     "ansi-align": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz",
@@ -97,6 +102,20 @@
       "resolved": "https://registry.npmjs.org/apache-md5/-/apache-md5-1.1.2.tgz",
       "integrity": "sha1-7klza2ObTxCLbp5ibG2pkwa0FpI="
     },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "are-we-there-yet": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
+      "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
+      "requires": {
+        "delegates": "1.0.0",
+        "readable-stream": "2.3.3"
+      }
+    },
     "argparse": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
@@ -118,6 +137,11 @@
       "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
       "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
     },
+    "array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E="
+    },
     "array-union": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
@@ -150,11 +174,41 @@
       "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
     },
+    "asn1": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y="
+    },
+    "assert-plus": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ="
+    },
     "async-each": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
       "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0="
     },
+    "async-foreach": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
+      "integrity": "sha1-NhIfhFwFeBct5Bmpfb6x0W7DRUI="
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
+    },
+    "aws-sign2": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
+    },
+    "aws4": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4="
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -228,6 +282,15 @@
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
     },
+    "bcrypt-pbkdf": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "optional": true,
+      "requires": {
+        "tweetnacl": "0.14.5"
+      }
+    },
     "bcryptjs": {
       "version": "2.4.3",
       "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
@@ -238,6 +301,22 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.11.0.tgz",
       "integrity": "sha1-RqoXUftqL5PuXmibsQh9SxTGwgU="
     },
+    "block-stream": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+      "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+      "requires": {
+        "inherits": "2.0.3"
+      }
+    },
+    "boom": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
     "boxen": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/boxen/-/boxen-1.2.2.tgz",
@@ -336,11 +415,32 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
       "integrity": "sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0="
     },
+    "camelcase-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
+      "requires": {
+        "camelcase": "2.1.1",
+        "map-obj": "1.0.1"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz",
+          "integrity": "sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8="
+        }
+      }
+    },
     "capture-stack-trace": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz",
       "integrity": "sha1-Sm+gc5nCa7pH8LJJa00PtAjFVQ0="
     },
+    "caseless": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
+      "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c="
+    },
     "chalk": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
@@ -424,6 +524,49 @@
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
     },
+    "cliui": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
+      "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=",
+      "requires": {
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1",
+        "wrap-ansi": "2.1.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        }
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -452,6 +595,14 @@
       "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM="
     },
+    "combined-stream": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "requires": {
+        "delayed-stream": "1.0.0"
+      }
+    },
     "commander": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
@@ -532,6 +683,11 @@
         "utils-merge": "1.0.0"
       }
     },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
+    },
     "contains-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/contains-path/-/contains-path-0.1.0.tgz",
@@ -569,11 +725,27 @@
         "which": "1.3.0"
       }
     },
+    "cryptiles": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+      "requires": {
+        "boom": "2.10.1"
+      }
+    },
     "crypto-random-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz",
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4="
     },
+    "currently-unhandled": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
+      "integrity": "sha1-mI3zP+qxke95mmE2nddsF635V+o=",
+      "requires": {
+        "array-find-index": "1.0.2"
+      }
+    },
     "d": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
@@ -582,6 +754,21 @@
         "es5-ext": "0.10.37"
       }
     },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
     "date-fns": {
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.29.0.tgz",
@@ -600,6 +787,11 @@
       "resolved": "https://registry.npmjs.org/debug-log/-/debug-log-1.0.1.tgz",
       "integrity": "sha1-IwdjLUwEOCuN+KMvcLiVBG1SdF8="
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
     "deep-extend": {
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
@@ -653,6 +845,16 @@
         }
       }
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
+    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+    },
     "depd": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
@@ -689,6 +891,15 @@
       "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
       "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
     },
+    "ecc-jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
+      "optional": true,
+      "requires": {
+        "jsbn": "0.1.1"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -1144,6 +1355,11 @@
         "fill-range": "2.2.3"
       }
     },
+    "extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ="
+    },
     "extglob": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
@@ -1152,6 +1368,11 @@
         "is-extglob": "1.0.0"
       }
     },
+    "extsprintf": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
+      "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
+    },
     "fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
@@ -1255,6 +1476,21 @@
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
       "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
     },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
+    },
+    "form-data": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+      "requires": {
+        "asynckit": "0.4.0",
+        "combined-stream": "1.0.5",
+        "mime-types": "2.1.17"
+      }
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -1280,11 +1516,78 @@
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
+    "fstream": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
+      "integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "inherits": "2.0.3",
+        "mkdirp": "0.5.1",
+        "rimraf": "2.6.2"
+      }
+    },
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "requires": {
+        "aproba": "1.2.0",
+        "console-control-strings": "1.1.0",
+        "has-unicode": "2.0.1",
+        "object-assign": "4.1.1",
+        "signal-exit": "3.0.2",
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1",
+        "wide-align": "1.1.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        }
+      }
+    },
+    "gaze": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.2.tgz",
+      "integrity": "sha1-hHIkZ3rbiHDWeSV+0ziP22HkAQU=",
+      "requires": {
+        "globule": "1.2.0"
+      }
+    },
     "generate-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
@@ -1298,6 +1601,11 @@
         "is-property": "1.0.2"
       }
     },
+    "get-caller-file": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
+      "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U="
+    },
     "get-stdin": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-5.0.1.tgz",
@@ -1308,6 +1616,21 @@
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ="
     },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "requires": {
+        "assert-plus": "1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
     "glob": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@@ -1371,6 +1694,16 @@
         }
       }
     },
+    "globule": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.0.tgz",
+      "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
+      "requires": {
+        "glob": "7.1.2",
+        "lodash": "4.17.4",
+        "minimatch": "3.0.4"
+      }
+    },
     "got": {
       "version": "6.7.1",
       "resolved": "https://registry.npmjs.org/got/-/got-6.7.1.tgz",
@@ -1394,6 +1727,67 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
+    "har-validator": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
+      "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
+      "requires": {
+        "chalk": "1.1.3",
+        "commander": "2.12.2",
+        "is-my-json-valid": "2.16.1",
+        "pinkie-promise": "2.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "commander": {
+          "version": "2.12.2",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
+          "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA=="
+        },
+        "has-ansi": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+          "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
     "has": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.1.tgz",
@@ -1442,6 +1836,32 @@
         }
       }
     },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk="
+    },
+    "hawk": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+      "requires": {
+        "boom": "2.10.1",
+        "cryptiles": "2.0.5",
+        "hoek": "2.16.3",
+        "sntp": "1.0.9"
+      }
+    },
+    "hoek": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
+    },
+    "hosted-git-info": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.5.0.tgz",
+      "integrity": "sha512-pNgbURSuab90KbTqvRPsseaTxOJCZBD0a7t+haSN33piP9cCM4l0CqdzAif2hUqm716UovKB2ROmiabGAKVXyg=="
+    },
     "http-auth": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/http-auth/-/http-auth-3.1.3.tgz",
@@ -1469,6 +1889,16 @@
       "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.9.tgz",
       "integrity": "sha1-6hoE+2St/wJC6ZdPKX3Uw8rSceE="
     },
+    "http-signature": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+      "requires": {
+        "assert-plus": "0.2.0",
+        "jsprim": "1.4.1",
+        "sshpk": "1.13.1"
+      }
+    },
     "ignore": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.7.tgz",
@@ -1489,6 +1919,19 @@
       "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
     },
+    "in-publish": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/in-publish/-/in-publish-2.0.0.tgz",
+      "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E="
+    },
+    "indent-string": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
+      "integrity": "sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=",
+      "requires": {
+        "repeating": "2.0.1"
+      }
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -1596,6 +2039,11 @@
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ="
     },
+    "invert-kv": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz",
+      "integrity": "sha1-EEqOSqym09jNFXqO+L+rLXo//bY="
+    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -1614,6 +2062,14 @@
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
+    "is-builtin-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz",
+      "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=",
+      "requires": {
+        "builtin-modules": "1.1.1"
+      }
+    },
     "is-callable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.3.tgz",
@@ -1647,6 +2103,14 @@
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
       "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA="
     },
+    "is-finite": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "requires": {
+        "number-is-nan": "1.0.1"
+      }
+    },
     "is-fullwidth-code-point": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
@@ -1767,6 +2231,16 @@
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
       "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI="
     },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "is-utf8": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
+    },
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
@@ -1790,6 +2264,16 @@
         "isarray": "1.0.0"
       }
     },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
+    },
+    "js-base64": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
+      "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA=="
+    },
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
@@ -1804,6 +2288,17 @@
         "esprima": "4.0.0"
       }
     },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "optional": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM="
+    },
     "json-stable-stringify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
@@ -1812,6 +2307,11 @@
         "jsonify": "0.0.0"
       }
     },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
+    },
     "jsonfile": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
@@ -1830,6 +2330,24 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
       "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk="
     },
+    "jsprim": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
+      "integrity": "sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.3.0",
+        "json-schema": "0.2.3",
+        "verror": "1.10.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
     "jsx-ast-utils": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz",
@@ -1851,6 +2369,14 @@
         "package-json": "4.0.1"
       }
     },
+    "lcid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz",
+      "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=",
+      "requires": {
+        "invert-kv": "1.0.0"
+      }
+    },
     "levn": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
@@ -1976,6 +2502,11 @@
         "lodash.keys": "3.1.2"
       }
     },
+    "lodash.clonedeep": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+    },
     "lodash.cond": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.cond/-/lodash.cond-4.5.2.tgz",
@@ -2010,6 +2541,11 @@
         "lodash.isarray": "3.0.4"
       }
     },
+    "lodash.mergewith": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
+      "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU="
+    },
     "lodash.restparam": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
@@ -2019,6 +2555,14 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
       "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+    "loud-rejection": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/loud-rejection/-/loud-rejection-1.6.0.tgz",
+      "integrity": "sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=",
+      "requires": {
+        "currently-unhandled": "0.4.1",
+        "signal-exit": "3.0.2"
+      }
     },
     "lowercase-keys": {
       "version": "1.0.0",
@@ -2042,6 +2586,11 @@
         "pify": "3.0.0"
       }
     },
+    "map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0="
+    },
     "map-stream": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
@@ -2064,6 +2613,23 @@
       "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
       "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4="
     },
+    "meow": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
+      "requires": {
+        "camelcase-keys": "2.1.0",
+        "decamelize": "1.2.0",
+        "loud-rejection": "1.6.0",
+        "map-obj": "1.0.1",
+        "minimist": "1.2.0",
+        "normalize-package-data": "2.4.0",
+        "object-assign": "4.1.1",
+        "read-pkg-up": "1.0.1",
+        "redent": "1.0.0",
+        "trim-newlines": "1.0.0"
+      }
+    },
     "micromatch": {
       "version": "2.3.11",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
@@ -2167,6 +2733,11 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.5.tgz",
       "integrity": "sha1-j7+rsKmKJT0xhDMfno3rc3L6xsA="
     },
+    "nan": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
+      "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo="
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -2191,6 +2762,129 @@
       "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
       "requires": {
         "lower-case": "1.1.4"
+    "node-gyp": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.6.2.tgz",
+      "integrity": "sha1-m/vlRWIoYoSDjnUOrAUpWFP6HGA=",
+      "requires": {
+        "fstream": "1.0.11",
+        "glob": "7.1.2",
+        "graceful-fs": "4.1.11",
+        "minimatch": "3.0.4",
+        "mkdirp": "0.5.1",
+        "nopt": "3.0.6",
+        "npmlog": "4.1.2",
+        "osenv": "0.1.4",
+        "request": "2.79.0",
+        "rimraf": "2.6.2",
+        "semver": "5.3.0",
+        "tar": "2.2.1",
+        "which": "1.3.0"
+      },
+      "dependencies": {
+        "nopt": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+          "requires": {
+            "abbrev": "1.1.1"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
+        }
+      }
+    },
+    "node-sass": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.7.2.tgz",
+      "integrity": "sha512-CaV+wLqZ7//Jdom5aUFCpGNoECd7BbNhjuwdsX/LkXBrHl8eb1Wjw4HvWqcFvhr5KuNgAk8i/myf/MQ1YYeroA==",
+      "requires": {
+        "async-foreach": "0.1.3",
+        "chalk": "1.1.3",
+        "cross-spawn": "3.0.1",
+        "gaze": "1.1.2",
+        "get-stdin": "4.0.1",
+        "glob": "7.1.2",
+        "in-publish": "2.0.0",
+        "lodash.assign": "4.2.0",
+        "lodash.clonedeep": "4.5.0",
+        "lodash.mergewith": "4.6.0",
+        "meow": "3.7.0",
+        "mkdirp": "0.5.1",
+        "nan": "2.8.0",
+        "node-gyp": "3.6.2",
+        "npmlog": "4.1.2",
+        "request": "2.79.0",
+        "sass-graph": "2.2.4",
+        "stdout-stream": "1.4.0",
+        "true-case-path": "1.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "2.2.1",
+            "escape-string-regexp": "1.0.5",
+            "has-ansi": "2.0.0",
+            "strip-ansi": "3.0.1",
+            "supports-color": "2.0.0"
+          }
+        },
+        "cross-spawn": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
+          "integrity": "sha1-ElYDfsufDF9549bvE14wdwGEuYI=",
+          "requires": {
+            "lru-cache": "4.1.1",
+            "which": "1.3.0"
+          }
+        },
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        },
+        "has-ansi": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+          "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "lodash.assign": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
+          "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
       }
     },
     "nodemon": {
@@ -2233,6 +2927,17 @@
         "abbrev": "1.1.1"
       }
     },
+    "normalize-package-data": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz",
+      "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==",
+      "requires": {
+        "hosted-git-info": "2.5.0",
+        "is-builtin-module": "1.0.0",
+        "semver": "5.4.1",
+        "validate-npm-package-license": "3.0.1"
+      }
+    },
     "normalize-path": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
@@ -2249,11 +2954,27 @@
         "path-key": "2.0.1"
       }
     },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "requires": {
+        "are-we-there-yet": "1.1.4",
+        "console-control-strings": "1.1.0",
+        "gauge": "2.7.4",
+        "set-blocking": "2.0.0"
+      }
+    },
     "number-is-nan": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2335,6 +3056,28 @@
       "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
       "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M="
     },
+    "os-locale": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
+      "requires": {
+        "lcid": "1.0.0"
+      }
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
+    },
+    "osenv": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
+      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
+      "requires": {
+        "os-homedir": "1.0.2",
+        "os-tmpdir": "1.0.2"
+      }
+    },
     "p-finally": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
@@ -2424,6 +3167,23 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
       "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME="
     },
+    "path-type": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
+      "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "pify": "2.3.0",
+        "pinkie-promise": "2.0.1"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        }
+      }
+    },
     "pause-stream": {
       "version": "0.0.11",
       "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
@@ -2543,6 +3303,16 @@
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
       "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM="
     },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+    },
+    "qs": {
+      "version": "6.3.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.2.tgz",
+      "integrity": "sha1-51vV9uJoEioqDgvaYwslUMFmUCw="
+    },
     "randomatic": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
@@ -2596,6 +3366,52 @@
         "strip-json-comments": "2.0.1"
       }
     },
+    "read-pkg": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
+      "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
+      "requires": {
+        "load-json-file": "1.1.0",
+        "normalize-package-data": "2.4.0",
+        "path-type": "1.1.0"
+      },
+      "dependencies": {
+        "load-json-file": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+          "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
+          "requires": {
+            "graceful-fs": "4.1.11",
+            "parse-json": "2.2.0",
+            "pify": "2.3.0",
+            "pinkie-promise": "2.0.1",
+            "strip-bom": "2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
+        },
+        "strip-bom": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+          "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
+          "requires": {
+            "is-utf8": "0.2.1"
+          }
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
+      "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
+      "requires": {
+        "find-up": "1.1.2",
+        "read-pkg": "1.1.0"
+      }
+    },
     "readable-stream": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
@@ -2649,6 +3465,15 @@
         "resolve": "1.5.0"
       }
     },
+    "redent": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
+      "integrity": "sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=",
+      "requires": {
+        "indent-string": "2.1.0",
+        "strip-indent": "1.0.1"
+      }
+    },
     "regex-cache": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.4.tgz",
@@ -2694,6 +3519,51 @@
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
       "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
     },
+    "repeating": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-2.0.1.tgz",
+      "integrity": "sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=",
+      "requires": {
+        "is-finite": "1.0.2"
+      }
+    },
+    "request": {
+      "version": "2.79.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
+      "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
+      "requires": {
+        "aws-sign2": "0.6.0",
+        "aws4": "1.6.0",
+        "caseless": "0.11.0",
+        "combined-stream": "1.0.5",
+        "extend": "3.0.1",
+        "forever-agent": "0.6.1",
+        "form-data": "2.1.4",
+        "har-validator": "2.0.6",
+        "hawk": "3.1.3",
+        "http-signature": "1.1.1",
+        "is-typedarray": "1.0.0",
+        "isstream": "0.1.2",
+        "json-stringify-safe": "5.0.1",
+        "mime-types": "2.1.17",
+        "oauth-sign": "0.8.2",
+        "qs": "6.3.2",
+        "stringstream": "0.0.5",
+        "tough-cookie": "2.3.3",
+        "tunnel-agent": "0.4.3",
+        "uuid": "3.1.0"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "require-main-filename": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz",
+      "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE="
+    },
     "require-uncached": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/require-uncached/-/require-uncached-1.0.3.tgz",
@@ -2761,6 +3631,26 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
       "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
     },
+    "sass-graph": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/sass-graph/-/sass-graph-2.2.4.tgz",
+      "integrity": "sha1-E/vWPNHK8JCLn9k0dq1DpR0eC0k=",
+      "requires": {
+        "glob": "7.1.2",
+        "lodash": "4.17.4",
+        "scss-tokenizer": "0.2.3",
+        "yargs": "7.1.0"
+      }
+    },
+    "scss-tokenizer": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
+      "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
+      "requires": {
+        "js-base64": "2.4.0",
+        "source-map": "0.4.4"
+      }
+    },
     "semistandard": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/semistandard/-/semistandard-11.0.0.tgz",
@@ -2855,6 +3745,11 @@
         }
       }
     },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
     "set-immediate-shim": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
@@ -2902,12 +3797,45 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+    "sntp": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+      "requires": {
+        "hoek": "2.16.3"
+      }
+    },
+    "source-map": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+      "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+      "requires": {
+        "amdefine": "1.0.1"
+      }
     },
     "spawn-command": {
       "version": "0.0.2-1",
       "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
       "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
     },
+    "spdx-correct": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
+      "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=",
+      "requires": {
+        "spdx-license-ids": "1.2.2"
+      }
+    },
+    "spdx-expression-parse": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz",
+      "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw="
+    },
+    "spdx-license-ids": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz",
+      "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc="
+    },
     "split": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
@@ -2921,6 +3849,28 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
+    "sshpk": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
+      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "requires": {
+        "asn1": "0.2.3",
+        "assert-plus": "1.0.0",
+        "bcrypt-pbkdf": "1.0.1",
+        "dashdash": "1.14.1",
+        "ecc-jsbn": "0.1.1",
+        "getpass": "0.1.7",
+        "jsbn": "0.1.1",
+        "tweetnacl": "0.14.5"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
     "standard-engine": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/standard-engine/-/standard-engine-7.0.0.tgz",
@@ -2937,6 +3887,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
       "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4="
     },
+    "stdout-stream": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
+      "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
+      "requires": {
+        "readable-stream": "2.3.3"
+      }
+    },
     "stream-combiner": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
@@ -2977,6 +3935,11 @@
         "safe-buffer": "5.1.1"
       }
     },
+    "stringstream": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg="
+    },
     "strip-ansi": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
@@ -2995,6 +3958,21 @@
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
       "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8="
     },
+    "strip-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-1.0.1.tgz",
+      "integrity": "sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=",
+      "requires": {
+        "get-stdin": "4.0.1"
+      },
+      "dependencies": {
+        "get-stdin": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
+          "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4="
+        }
+      }
+    },
     "strip-json-comments": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
@@ -3066,6 +4044,16 @@
         }
       }
     },
+    "tar": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+      "requires": {
+        "block-stream": "0.0.9",
+        "fstream": "1.0.11",
+        "inherits": "2.0.3"
+      }
+    },
     "term-size": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz",
@@ -3097,11 +4085,57 @@
         "nopt": "1.0.10"
       }
     },
+    "tough-cookie": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
+      "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+      "requires": {
+        "punycode": "1.4.1"
+      }
+    },
     "tree-kill": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.0.tgz",
       "integrity": "sha512-DlX6dR0lOIRDFxI0mjL9IYg6OTncLm/Zt+JiBhE5OlFcAR8yc9S7FFXU9so0oda47frdM/JFsk7UjNt9vscKcg=="
     },
+    "trim-newlines": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-1.0.0.tgz",
+      "integrity": "sha1-WIeWa7WCpFA6QetST301ARgVphM="
+    },
+    "true-case-path": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.2.tgz",
+      "integrity": "sha1-fskRMJJHZsf1c74wIMNPj9/QDWI=",
+      "requires": {
+        "glob": "6.0.4"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "6.0.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-6.0.4.tgz",
+          "integrity": "sha1-DwiGD2oVUSey+t1PnOJLGqtuTSI=",
+          "requires": {
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        }
+      }
+    },
+    "tunnel-agent": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
+      "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us="
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "optional": true
+    },
     "type-check": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
@@ -3264,11 +4298,37 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
       "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g=="
     },
+    "validate-npm-package-license": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
+      "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=",
+      "requires": {
+        "spdx-correct": "1.0.2",
+        "spdx-expression-parse": "1.0.4"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
+    "verror": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.10.0.tgz",
+      "integrity": "sha1-OhBcoXBTr1XW4nDB+CiGguGNpAA=",
+      "requires": {
+        "assert-plus": "1.0.0",
+        "core-util-is": "1.0.2",
+        "extsprintf": "1.3.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
+        }
+      }
+    },
     "websocket-driver": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
@@ -3291,6 +4351,52 @@
         "isexe": "2.0.0"
       }
     },
+    "which-module": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-1.0.0.tgz",
+      "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8="
+    },
+    "wide-align": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
+      "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
+      "requires": {
+        "string-width": "1.0.2"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        }
+      }
+    },
     "widest-line": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-1.0.0.tgz",
@@ -3337,6 +4443,48 @@
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus="
     },
+    "wrap-ansi": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+      "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
+      "requires": {
+        "string-width": "1.0.2",
+        "strip-ansi": "3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        }
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -3375,10 +4523,88 @@
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
       "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68="
     },
+    "y18n": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz",
+      "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE="
+    },
     "yallist": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
+    },
+    "yargs": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz",
+      "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=",
+      "requires": {
+        "camelcase": "3.0.0",
+        "cliui": "3.2.0",
+        "decamelize": "1.2.0",
+        "get-caller-file": "1.0.2",
+        "os-locale": "1.4.0",
+        "read-pkg-up": "1.0.1",
+        "require-directory": "2.1.1",
+        "require-main-filename": "1.0.1",
+        "set-blocking": "2.0.0",
+        "string-width": "1.0.2",
+        "which-module": "1.0.0",
+        "y18n": "3.2.1",
+        "yargs-parser": "5.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
+        },
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "requires": {
+            "number-is-nan": "1.0.1"
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "requires": {
+            "code-point-at": "1.1.0",
+            "is-fullwidth-code-point": "1.0.0",
+            "strip-ansi": "3.0.1"
+          }
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "requires": {
+            "ansi-regex": "2.1.1"
+          }
+        }
+      }
+    },
+    "yargs-parser": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz",
+      "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=",
+      "requires": {
+        "camelcase": "3.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-3.0.0.tgz",
+          "integrity": "sha1-MvxLn82vhF/N9+c7uXysImHwqwo="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 6805118bb..59ade407a 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
     "html-minifier": "^3.5.7",
     "live-server": "^1.2.0",
     "markdown-it": "^8.4.0",
+    "node-sass": "^4.7.2",
     "nodemon": "^1.12.1",
     "semistandard": "^11.0.0"
   },
diff --git a/scripts/web-script.js b/scripts/web-script.js
index 1a77956da..52dd2ddc4 100644
--- a/scripts/web-script.js
+++ b/scripts/web-script.js
@@ -1,14 +1,27 @@
 /*
-  This is the builder script that generates the index.html file.
+  This is the web builder script that generates the README file.
   Run using `npm run webber`.
 */
 // Load modules
-const fs = require('fs-extra');
-const path = require('path');
-const chalk = require('chalk');
-const md = require('markdown-it')();
-const minify = require('html-minifier').minify;
-
+const fs = require('fs-extra'), path = require('path'), chalk = require('chalk'),
+  md = require('markdown-it')(), minify = require('html-minifier').minify;
+// Compile the mini.css framework and custom CSS styles, using `node-sass`.
+const sass = require('node-sass');
+  sass.render({
+    file: path.join('docs','mini','flavor.scss'),
+    outFile: path.join('docs','mini.css'),
+    outputStyle: 'compressed'
+  }, function(err, result) {
+    if(!err){
+      fs.writeFile(path.join('docs','mini.css'), result.css, function(err2){
+        if(!err2) console.log(`${chalk.green('SUCCESS!')} mini.css file generated!`);
+        else console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
+      });
+    }
+    else {
+      console.log(`${chalk.red('ERROR!')} During mini.css file generation: ${err}`);
+    }
+  });
 // Set variables for paths
 const snippetsPath = './snippets',  staticPartsPath = './static-parts', docsPath = './docs';
 // Set variables for script
@@ -63,7 +76,7 @@ try {
       output += md.render(`[${taggedSnippet[0]}](#${taggedSnippet[0].toLowerCase()})\n`).replace(/
/g,'').replace(/<\/p>/g,'').replace(/
`;
+  output += `
`;
   output += ` `;
   // Loop over tags and snippets to create the list of snippets
   for(let tag of [...new Set(Object.entries(tagDbData).map(t => t[1]))].filter(v => v).sort((a,b) => a.localeCompare(b))){
@@ -73,8 +86,7 @@ try {
   }
   // Add the ending static part
   output += `\n${endPart+'\n'}`;
-  // Write to the index.html file
-
+  // Minify output
   output = minify(output, {
     collapseBooleanAttributes: true,
     collapseWhitespace: true,
@@ -92,7 +104,7 @@ try {
     trimCustomFragments: true,
     useShortDoctype: true,
   });
-
+  // Write to the index.html file
   fs.writeFileSync(path.join(docsPath,'index.html'), output);
 }
 catch (err){  // Handle errors (hopefully not!)
diff --git a/snippets/arrayGcd.md b/snippets/arrayGcd.md
new file mode 100644
index 000000000..39a154059
--- /dev/null
+++ b/snippets/arrayGcd.md
@@ -0,0 +1,14 @@
+### arrayGcd
+
+Calculates the greatest common denominator (gcd) of an array of numbers.
+
+Use `Array.reduce()` and the `gcd` formula (uses recursion) to calculate the greatest common denominator of an array of numbers.
+
+```js
+const arrayGcd = arr =>{
+  const gcd = (x, y) => !y ? x : gcd(y, x % y);
+  return arr.reduce((a,b) => gcd(a,b));
+}
+// arrayGcd([1,2,3,4,5]) -> 1
+// arrayGcd([4,8,12]) -> 4
+```
diff --git a/snippets/clampNumber.md b/snippets/clampNumber.md
new file mode 100644
index 000000000..ddbb655ff
--- /dev/null
+++ b/snippets/clampNumber.md
@@ -0,0 +1,17 @@
+### clampNumber
+
+Clamps `num` within the inclusive `lower` and `upper` bounds.
+
+If `lower` is greater than `upper`, swap them. 
+If `num` falls within the range, return `num`. 
+Otherwise return the nearest number in the range.
+
+```js
+const clampNumber = (num, lower, upper) => {
+  if(lower > upper) upper = [lower, lower = upper][0];
+  return (num>=lower && num<=upper) ? num : ((num < lower) ? lower : upper) 
+}
+// clampNumber(2, 3, 5) -> 3
+// clampNumber(1, -1, -5) -> -1
+// clampNumber(3, 2, 4) -> 3
+```
diff --git a/snippets/inRange.md b/snippets/inRange.md
new file mode 100644
index 000000000..7162c52d8
--- /dev/null
+++ b/snippets/inRange.md
@@ -0,0 +1,17 @@
+### inRange
+
+Checks if the given number falls in the given range. 
+
+Use arithmetic comparison to check if the given number is in the specified range.
+If the second parameter, `end`, is not specified, the reange is considered to be from `0` to `start`.
+
+```js
+const inRange = (n, start, end=null) => {
+  if(end && start > end) end = [start, start=end][0];
+  return (end == null) ? (n>=0 && n=start && n true
+// inRange(3, 4) -> true
+// inRange(2, 3, 5) -> false
+// inrange(3, 2) -> false
+```
diff --git a/snippets/orderBy.md b/snippets/orderBy.md
index 6dbfaa53e..21baef3ac 100644
--- a/snippets/orderBy.md
+++ b/snippets/orderBy.md
@@ -10,7 +10,7 @@ const orderBy = (arr, props, orders) =>
   arr.sort((a, b) =>
     props.reduce((acc, prop, i) => {
       if (acc === 0) {
-        const [p1, p2] = orders[i] === 'asc' ? [a[prop], b[prop]] : [b[prop], a[prop]];
+        const [p1, p2] = orders && orders[i] === 'desc' ? [b[prop], a[prop]] : [a[prop], b[prop]];
         acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
       }
       return acc;
diff --git a/snippets/pull.md b/snippets/pull.md
index 16f0e25c4..41658a545 100644
--- a/snippets/pull.md
+++ b/snippets/pull.md
@@ -9,8 +9,10 @@ _(For a snippet that does not mutate the original array see [`without`](#without
 
 ```js
 const pull = (arr, ...args) => {
-  let pulled = arr.filter((v, i) => !args.toString().split(',').includes(v));
-  arr.length = 0; pulled.forEach(v => arr.push(v));
+  let argState = Array.isArray(args[0]) ? args[0] : args;
+  let pulled = arr.filter((v, i) => !argState.includes(v));
+  arr.length = 0; 
+  pulled.forEach(v => arr.push(v));
 };
 
 // let myArray1 = ['a', 'b', 'c', 'a', 'b', 'c'];
diff --git a/snippets/zipObject.md b/snippets/zipObject.md
new file mode 100644
index 000000000..f9214e7aa
--- /dev/null
+++ b/snippets/zipObject.md
@@ -0,0 +1,11 @@
+### zipObject
+
+Given an array of valid property identifiers and an array of values, return an object associating the properties to the values.
+
+Since an object can have undefined values but not undefined property pointers, the array of properties is used to decide the structure of the resulting object using `Array.reduce()`.
+
+```js
+const zipObject = ( props, values ) => props.reduce( ( obj, prop, index ) => ( obj[prop] = values[index], obj ), {} )
+// zipObject(['a','b','c'], [1,2]) -> {a: 1, b: 2, c: undefined}
+// zipObject(['a','b'], [1,2,3]) -> {a: 1, b: 2}
+```
diff --git a/static-parts/index-end.html b/static-parts/index-end.html
index 453f9d4c4..6831f6995 100644
--- a/static-parts/index-end.html
+++ b/static-parts/index-end.html
@@ -1,5 +1,5 @@
         
       

diff --git a/static-parts/index-start.html b/static-parts/index-start.html
index 5f1f3ff1a..f6c71b064 100644
--- a/static-parts/index-start.html
+++ b/static-parts/index-start.html
@@ -1,7 +1,7 @@
 
 
   
-    
+    
     
     30 seconds of code
     
@@ -13,19 +13,6 @@
     
     
     
-