feat(docs): Add a new reference section (with subpages)

docs/index.js

@@ -1,6 +1,7 @@
 import package_info from '../package.json'
 import components from './components'
 import directives from './directives'
+import reference from './reference'
 import layout from './layout'
 
 export default {
@@ -39,6 +40,19 @@ export default {
                 }
             })
         },
+        {
+            title: 'Reference',
+            slug: 'reference/',
+            new: true,
+            pages: Object.keys(reference).map(key => {
+                return {
+                    title: reference[key].meta.title,
+                    new: reference[key].meta.new,
+                    beta: reference[key].meta.beta,
+                    slug: key
+                }
+            })
+        },
         {
             title: 'Misc',
             slug: '',

docs/nuxt/pages/docs/reference/_reference.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="container">
+        <div class="bd-content" v-html="readme" v-play></div>
+    </div>
+</template>
+
+
+<script>
+import reference from '../../../../reference';
+
+export default {
+    layout: 'docs',
+
+    fetch({ params, redirect }) {
+        if (!reference[params.reference]) {
+            redirect('/docs/reference/' + Object.keys(reference)[0])
+        }
+    },
+
+    data() {
+        return Object.assign({ meta: {}, readme: '' }, reference[this.$route.params.reference])
+    },
+
+    head() {
+        return {
+            title: `${this.meta.title} - BootstrapVue`
+        };
+    }
+};
+</script>

docs/reference/index.js

@@ -0,0 +1,8 @@
+/* eslint-disable quote-props */
+
+export default {
+    'variants': require('./variants').default,
+    'sizes': require('./sizes').default,
+    'spacing': require('./spacing').default,
+    'router-links': require('./router-links').default
+};

docs/reference/router-links/README.md

@@ -0,0 +1,133 @@
+# Router link support
+> Several Bootstrap-Vue componets support rendering `<router-link>` components compatible with
+_Vue-Router_ and _Nuxt_. For more information, see the [official Vue-Router docs](https://router.vuejs.org/)
+and [official Nuxt docs](https://nuxtjs.org/).
+
+## Common router link props
+
+In the following sections, we are using the `<b-link>` component to render router links.
+You could use any other component that support link generation such as `<b-button>`,
+`<b-breadcrumb>`, `<b-list-item>`, `<b-nav-item>`, `<b-dropdown-item>`, etc.  Note that
+not all props are available on all components. Refer to ther respective component
+documentation for details.
+
+### Props
+
+- **to**
+
+  - type: `string | Location`
+
+  - required
+
+  Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to
+  `router.push()` internally, so the value can be either a string or a location descriptor object.
+
+  ``` html
+  <!-- literal string -->
+  <b-link to="home">Home</b-link>
+  <!-- renders to -->
+  <a href="home">Home</a>
+
+  <!-- javascript expression using `v-bind` -->
+  <b-link v-bind:to="'home'">Home</b-link>
+
+  <!-- Omitting `v-bind` is fine, just as binding any other prop -->
+  <b-link :to="'home'">Home</b-link>
+
+  <!-- same as above -->
+  <b-link :to="{ path: 'home' }">Home</b-link>
+
+  <!-- named route -->
+  <b-link :to="{ name: 'user', params: { userId: 123 }}">User</b-link>
+
+  <!-- with query, resulting in `/register?plan=private` -->
+  <b-link :to="{ path: 'register', query: { plan: 'private' }}">Register</b-link>
+  ```
+
+
+- **replace**
+
+  - type: `boolean`
+
+  - default: `false`
+
+  Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked,
+  so the navigation will not leave a history record.
+
+  ``` html
+  <b-link :to="{ path: '/abc'}" replace></b-link>
+  ```
+
+
+- **append**
+
+  - type: `boolean`
+
+  - default: `false`
+
+  Setting `append` prop always appends the relative path to the current path. For example,
+  assuming we are navigating from `/a` to a relative link `b`, without `append` we will end 
+  up at `/b`, but with `append` we will end up at `/a/b`.
+
+  ``` html
+  <b-link :to="{ path: 'relative/path'}" append></b-link>
+  ```
+
+
+- **router-tag**
+
+  - type: `string`
+
+  - default: `"a"`
+
+  Sometimes we want `<router-link>` to render as another tag, e.g `<li>`. Then we can use `router-tag`
+  prop to specify which tag to render to, and it will still listen to click events for navigation.
+
+  ``` html
+  <b-link to="/foo" tag="li">foo</b-link>
+  <!-- renders as -->
+  <li>foo</li>
+  ```
+
+  **Note:** Changing the tag from anything other than `<a>` is discouraged, as it hinders accessibility
+  of keyboard and/or screen-reader users, and is also not very SEO friendly.
+
+
+- **active-class**
+
+  - type: `string`
+
+  - default: `"router-link-active"`
+
+  Configure the active CSS class applied when the link is active. Note the default value can also
+  be configured globally via the `linkActiveClass` router constructor option.
+
+- **exact**
+
+  - type: `boolean`
+
+  - default: `false`
+
+  The default active class matching behavior is **inclusive match**. For example, `<b-link to="/a">`
+  will get this class applied as long as the current path starts with `/a/` or is `/a`.
+
+  One consequence of this is that `<b-link to="/">` will be active for every route! To force the
+  link into "exact match mode", use the `exact` prop:
+
+  ``` html
+  <!-- this link will only be active at `/` -->
+  <b-link to="/" exact>
+  ```
+
+  Check out more examples explaining active link class [live](https://jsfiddle.net/8xrk1n9f/).
+
+- **exact-active-class**
+
+  _Vue-Router 2.5.0+_
+
+  - type: `string`
+
+  - default: `"router-link-exact-active"`
+
+  Configure the active CSS class applied when the link is active with exact match. Note the
+  default value can also be configured globally via the `linkExactActiveClass` router constructor option.

docs/reference/router-links/index.js

@@ -0,0 +1,8 @@
+import readme from './README.md';
+
+export default {
+    readme,
+    meta: {
+        title: 'Router support'
+    }
+};

docs/reference/sizes/README.md

@@ -0,0 +1,50 @@
+# Sizes
+
+> Various components allow for an optional size (via hte `size` prop). Below are the
+sizez supported via the default Bootsrap V4 CSS.
+
+Available Sizes:
+
+* `sm` small
+* `lg` large
+
+When no size is specified, this results in normal sized appearance (usually
+referend to as `md`).
+
+These size values will be translated into the apropriate Bootstrap CSS class,
+depending on the component used on, such as `btn-<size>` for buttons, `modal-<size>`
+for modal, `form-control-<size>` for form elements, `pagination-<size>` for
+pagination, etc.
+
+## Sizing Classes
+Easily make an element as wide or as tall (relative to its parent) with our width
+and height utilities classes.
+
+Width and height utilities are generated from the `$sizes` Sass map in Bootstrap's
+`_variables.scss`. Includes support for `25%`, `50%`, `75%`, and `100%` by default.
+Modify those values as you need to generate different utilities here.
+
+```html
+<div>
+  <div class="w-25 p-3 mb-1 bg-secondary">Width 25%</div>
+  <div class="w-50 p-3 mb-1 bg-secondary">Width 50%</div>
+  <div class="w-75 p-3 mb-1 bg-secondary">Width 75%</div>
+  <div class="w-100 p-3 bg-secondary">Width 100%</div>
+</div>
+
+<!-- widths.vue -->
+```
+
+```html
+<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
+  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
+  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
+  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
+  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
+</div>
+
+<!-- heights.vue -->
+```
+
+You can also use `mw-100` (`max-width: 100%;`) and `mh-100` (`max-height: 100%;`) utilities as needed.
+

docs/reference/sizes/index.js

@@ -0,0 +1,8 @@
+import readme from './README.md';
+
+export default {
+    readme,
+    meta: {
+        title: 'Component sizing'
+    }
+};

docs/reference/spacing/README.md

@@ -0,0 +1,77 @@
+# Spacing
+> Bootstrap V4 CSS includes a wide range of shorthand responsive margin and
+padding utility classes to modify an element's appearance.
+
+## How it works
+Assign responsive-friendly margin or padding values to an element or a subset of its
+sides with shorthand classes. Includes support for individual properties, all properties,
+and vertical and horizontal properties. Classes are built from a default Sass map
+ranging from .25rem to 3rem.
+
+## Notation
+Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation
+in them. This is because those classes are applied from `min-width: 0` and up, and thus are
+not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+
+The classes are named using the format `{property}{sides}-{size}` for `xs` and
+`{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, and `xl`.
+
+Where _property_ is one of:
+` `m` - for classes that set margin
+- `p` - for classes that set padding
+
+Where _sides_ is one of:
+- `t` - for classes that set margin-top or padding-top
+- `b` - for classes that set margin-bottom or padding-bottom
+- `l` - for classes that set margin-left or padding-left
+- `r` - for classes that set margin-right or padding-right
+- `x` - for classes that set both *-left and *-right
+- `y` - for classes that set both *-top and *-bottom
+- blank - for classes that set a margin or padding on all 4 sides of the element
+
+Where _size_ is one of:
+- `0` - for classes that eliminate the margin or padding by setting it to 0
+- `1` - (by default) for classes that set the margin or padding to $spacer * .25
+- `2` - (by default) for classes that set the margin or padding to $spacer * .5
+- `3` - (by default) for classes that set the margin or padding to $spacer
+- `4` - (by default) for classes that set the margin or padding to $spacer * 1.5
+- `5` - (by default) for classes that set the margin or padding to $spacer * 3
+
+_(You can add more sizes by adding entries to the $spacers Sass map variable.)_
+
+
+## Examples
+
+Here are some representative examples of these classes:
+```css
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.ml-1 {
+  margin-left: ($spacer * .25) !important;
+}
+
+.px-2 {
+  padding-left: ($spacer * .5) !important;
+  padding-right: ($spacer * .5) !important;
+}
+
+.p-3 {
+  padding: $spacer !important;
+}
+```
+
+## Horizontal centering
+Additionally, Bootstrap also includes an `.mx-auto` class for horizontally centering
+fixed-width block level content — that is, content that has `display: block` and a `width`
+set—by setting the horizontal margins to `auto`.
+
+```html
+<div class="mx-auto bg-info" style="width: 200px;">
+  Centered element
+</div>
+
+<!-- horizontal-cetering.vue -->
+```
+

docs/reference/spacing/index.js

@@ -0,0 +1,8 @@
+import readme from './README.md';
+
+export default {
+    readme,
+    meta: {
+        title: 'Spacing classes'
+    }
+};