* Add variables for shades and tints of each major color

* getting-started/theming.md: use a `range`.

Add optional `$color` argument to `button-variant()` and
`button-outline-variant()` for additional flexibility.

* Scope .form-check-input layout to the .form-check parent

* Remove margin-bottom from list-group-items in case they are label elements

* document .form-check in input groups and list groups, and cleanup the no-label examples in the main .form-check docs

Stack in cards in one column when < md

Now there's only one command needed to run the docs: `npm run docs-serve`.

Also, simplify the npm scripts.

- Simplify display headings example markup
- Simplify footer styles
- Remove z-indices hacks in the docs
- Remove redundant modal styling in docs
- Use `escape-svg()` to escape docs sidebar chevron
- Simplify sidebar chevron code
- Cleanup masthead css & fix column width between `md` & `lg`
- Easier to download logo's with the `download` attribute.
- Changed some color codes into variables
- Cleanup brands css

* remove load event
* use `forEach` and `querySelectorAll`
* simplify check

- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin

Trying to find a new way to do responsive card decks while not locking ourselves into the cards themselves. My thinking here is we can easily control the column (.col) width by the parent, but I don't know how many we need (have 0-5 now) across each breakpoint. This works for cards so far, and I think could get us equal height, too.

The example shortcode already adds this.

Use the built-in utilities instead.

Also, add a warning in _root.scss so that we don't miss it again.

While important in the past, it has become obsolete, so removing it seems the best solution.

- Add example to the new form control docs
- Reset the [list] selector in Reboot to hide the random dropdown arrow in Chrome