Merge remote-tracking branch 'origin/dev-v1' into dev-v1

# Conflicts:
#	pages/_includes/cards/blog-single.html

pages/400.html

@@ -1,6 +0,0 @@
----
-title: Page 400
-layout: error
-error: 400
-done: true
----

pages/401.html

@@ -1,6 +0,0 @@
----
-title: Page 401
-layout: error
-error: 401
-done: true
----

pages/403.html

@@ -1,6 +0,0 @@
----
-title: Page 403
-layout: error
-error: 403
-done: true
----

pages/500.html

@@ -1,6 +0,0 @@
----
-title: Page 500
-layout: error
-error: 500
-done: true
----

pages/503.html

@@ -1,6 +0,0 @@
----
-title: Page 503
-layout: error
-error: 503
-done: true
----

pages/_data/menu.yml

@@ -6,55 +6,7 @@ apps:
 docs:
   title: Documentation
   icon: file-text
-  children:
-  - title: Alerts
-    url: '#'
-  - title: Avatars
-    url: '#'
-  - title: Badges
-    url: '#'
-  - title: Breadcrumb
-    url: '#'
-  - title: Buttons
-    url: '#'
-  - title: Button group
-    url: '#'
-  - title: Cards
-    url: '#'
-  - title: Charts
-    url: '#'
-  - title: Dropdowns
-    url: '#'
-  - title: Forms
-    url: '#'
-  - title: Icons
-    url: '#'
-  - title: Lists
-    url: '#'
-  - title: Modal
-    url: '#'
-  - title: Navs
-    url: '#'
-  - title: Navbar
-    url: '#'
-  - title: Pagination
-    url: '#'
-  - title: Popovers
-    url: '#'
-  - title: Progress
-    url: '#'
-  - title: Spinners
-    url: '#'
-  - title: Tables
-    url: '#'
-  - title: Toasts
-    url: '#'
-  - title: Tooltips
-    url: '#'
-  - title: Typography
-    url: '#'
-  - title: Utilities
-    url: '#'
+  docs: components
 changelog:
   url: changelog.html
   active: true

pages/_docs/alerts.md

@@ -0,0 +1,53 @@
+---
+title: Alerts
+---
+
+Bootstrap provides an easy way to create predefined alert messages.
+
+## Default markup
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture variant-text %}
+		This is a {{ variant.name }} alert — check it out!
+	{% endcapture %}
+	{% include ui/alert.html type=variant.name text=variant-text %}
+{% endfor %}
+{% endexample %}
+
+
+## Alert Links
+
+Add the `alert-link` class to any links inside the alert box to create "matching colored links":
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture variant-text %}
+		This is a {{ variant.name }} alert — <a href="#">check it out!</a>
+	{% endcapture %}
+	{% include ui/alert.html type=variant.name text=variant-text %}
+{% endfor %}
+{% endexample %}
+
+
+## Closing Alerts
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture variant-text %}
+		This is a {{ variant.name }} alert — check it out!
+	{% endcapture %}
+	{% include ui/alert.html type=variant.name text=variant-text close=true %}
+{% endfor %}
+{% endexample %}
+
+## Alerts with icons
+
+{% example html %}
+{% for variant in site.variants %}
+	{% capture variant-text %}
+		This is a {{ variant.name }} alert — check it out!
+	{% endcapture %}
+	{% include ui/alert.html type=variant.name icon=variant.icon text=variant-text close=true %}
+{% endfor %}
+{% endexample %}

pages/_docs/avatars.md

@@ -4,7 +4,7 @@ title: Avatars
 
 Create and group avatars of various shapes and sizes with one component.
 
-### Default markup
+## Default markup
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html person-id=1 %}
@@ -12,7 +12,7 @@ Create and group avatars of various shapes and sizes with one component.
 {% include ui/avatar.html person-id=3 %}
 {% endexample %}
 
-### Avatar size
+## Avatar size
 
 Using Bootstrap’s typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what’s needed.
 
@@ -24,7 +24,7 @@ Using Bootstrap’s typical naming structure, you can create a standard avatar,
 {% include ui/avatar.html person-id=6 size="sm" %}
 {% endexample %}
 
-### Avatar status
+## Avatar status
 
 Add an online or offline status indicator to show user's availability.
 
@@ -37,7 +37,7 @@ Add an online or offline status indicator to show user's availability.
 {% include ui/avatar.html person-id=16 status="gray" %}
 {% endexample %}
 
-### Avatar shape
+## Avatar shape
 
 Change the shape of an avatar with the default Bootstrap image classes.
 
@@ -49,7 +49,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html person-id=21 shape="rounded-lg" %}
 {% endexample %}
 
-### Initials
+## Initials
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html placeholder="AB" size="xl" %}
@@ -60,7 +60,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% endexample %}
 
 
-### Avatar initials color
+## Avatar initials color
 
 [See more]({% docs_url colors %})
 
@@ -72,7 +72,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html placeholder="IJ" color="purple" %}
 {% endexample %}
 
-### Avatar initials icons
+## Avatar initials icons
 
 {% example html wrapper=avatar-list %}
 {% include ui/avatar.html icon="user" %}
@@ -80,7 +80,7 @@ Change the shape of an avatar with the default Bootstrap image classes.
 {% include ui/avatar.html icon="user-plus" %}
 {% endexample %}
 
-### Avatars list
+## Avatars list
 
 {% example html %}
 <div class="avatar-list">

pages/_docs/badges.md

@@ -4,7 +4,7 @@ title: Badges
 
 A small count and labeling component. Please read the [official Bootstrap documentation](https://getbootstrap.com/docs/4.3/components/badge/) for a full list of options.
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% for color in site.colors %}
@@ -12,7 +12,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endfor %}
 {% endexample %}
 
-### Pill badges
+## Pill badges
 
 {% example html %}
 {% for color in site.colors %}
@@ -21,7 +21,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-### Soft badges
+## Soft badges
 
 {% example html %}
 {% for color in site.colors %}
@@ -30,7 +30,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-### Links
+## Links
 
 {% example html %}
 {% for color in site.colors %}
@@ -39,7 +39,7 @@ A small count and labeling component. Please read the [official Bootstrap docume
 {% endexample %}
 
 
-### Empty badges
+## Empty badges
 
 {% example html %}
 {% for color in site.colors %}

pages/_docs/buttons.md

@@ -2,7 +2,7 @@
 title: Buttons
 ---
 
-### Default markup
+## Default markup
 
 {% example html wrapper=btn-list %}
 {% include ui/button.html color="primary" text="Button" %}

pages/_docs/cards.md

@@ -0,0 +1,84 @@
+---
+title: Cards
+description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 
+---
+
+The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
+
+### Default card
+
+{% example html columns=1 %}
+{% include cards/card.html hide-options=true %}
+{% endexample %}
+
+### Advanced card
+
+{% example html columns=1 %}
+{% include cards/card.html show-buttons=true show-footer=true %}
+{% endexample %}
+
+### Blog post card
+
+The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
+
+{% example html columns=1 %}
+{% include cards/blog-single.html type="image" %}
+{% endexample %}
+
+### Row deck
+
+If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
+
+{% example html columns=2 %}
+<div class="row row-cards row-deck">
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body">Short content</div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body">Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
+        </div>
+    </div>
+    <div class="col-md-4">
+        <div class="card">
+            <div class="card-body">Short content</div>
+        </div>
+    </div>
+</div>
+{% endexample %}
+
+### Post card with aside image
+
+You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
+
+{% example html columns=2 %}
+{% include cards/blog-single.html type="aside" liked=1 %}
+{% endexample %}
+
+### Color variations
+
+{% example html columns=2 %}
+<div class="row row-cards row-deck">
+    <div class="col-md-6">
+        {% include cards/card.html title="Card status" hide-options=true status="purple" %}
+    </div>
+    <div class="col-md-6">
+        {% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}
+    </div>
+</div>
+{% endexample %}
+
+
+### Card with switch
+
+{% example html columns=1 %}
+{% include cards/card.html title="Card with switch" show-switch=true %}
+{% endexample %}
+
+### Card with loader
+
+{% example html columns=1 %}
+{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %}
+{% endexample %}

pages/_docs/carousel.md

@@ -4,6 +4,6 @@ title: Carousel
 
 The Carousel is a slideshow for cycling through elements.
 
-{% example html %}
+{% example html columns=1 %}
 {% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
 {% endexample %}

pages/_docs/index.md

@@ -8,7 +8,7 @@ We’ve created this admin panel for everyone who wants to create any templates
 
 
 
-### Setup environment
+## Setup environment
 
 To use our build system and run our documentation locally, you'll need a copy of Tabler's source files and Node. Follow these steps:
 
@@ -20,13 +20,13 @@ To use our build system and run our documentation locally, you'll need a copy of
   
 When completed, you'll be able to run the various commands provided from the command line.
 
-### Build Tabler locally
+## Build Tabler locally
 
 1. From the root `/tabler` directory, run `npm run serve` in the command line.
 2. Open [http://localhost:4000](http://localhost:4000) in your browser, and voilà.
 3. Any change in `/src` directory will build application and refresh the page.
 
 
-### Bugs and feature requests
+## Bugs and feature requests
 
 Have a bug or a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).

pages/_docs/spinners.md

@@ -2,14 +2,14 @@
 title: Spinners
 ---
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% include ui/spinner.html %}
 {% endexample %}
 
 
-### Colors
+## Colors
 
 {% example html %}
 {% for color in site.colors %}
@@ -18,14 +18,14 @@ title: Spinners
 {% endfor %}
 {% endexample %}
 
-### Size
+## Size
 
 {% example html %}
 {% include ui/spinner.html %}
 {% include ui/spinner.html size="sm" %}
 {% endexample %}
 
-### Growing spinner
+## Growing spinner
 
 {% example html %}
 {% include ui/spinner.html type="grow" %}
@@ -38,7 +38,7 @@ title: Spinners
 {% endfor %}
 {% endexample %}
 
-### Buttons
+## Buttons
 
 {% example html wrapper=btn-list %}
 {% include ui/button.html spinner=true text="Button" color="primary" %}

pages/_docs/steps.md

@@ -4,32 +4,32 @@ title: Steps
 
 Steps are progress indicators of a sequence of task steps.
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% include ui/steps.html show-title=true %}
 {% endexample %}
 
-### Tooltips
+## Tooltips
 
 {% example html %}
 {% include ui/steps.html show-title=true show-tooltip=true %}
 {% endexample %}
 
-### Color
+## Color
 
 {% example html %}
 {% include ui/steps.html color="green" show-title=true %}
 {% include ui/steps.html color="red" show-title=true %}
 {% endexample %}
 
-### Steps without title
+## Steps without title
 
 {% example html %}
 {% include ui/steps.html show-tooltip=true %}
 {% endexample %}
 
-### Steps with numbers
+## Steps with numbers
 
 {% example html %}
 {% include ui/steps.html count=5 active=2 numbers=true color="lime" %}

pages/_docs/tabs.md

@@ -0,0 +1,39 @@
+---
+title: Tabs
+---
+
+## Default markup
+
+{% example html columns=1 %}
+{% include cards/tabs.html id="ex1" %}
+{% endexample %}
+
+## Tabs with icons
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true settings=true id="ex2" %}
+{% endexample %}
+
+## Tabs only with icons
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true settings=true hide-text=true id="ex3" %}
+{% endexample %}
+
+## Tabs with dropdown
+
+{% example html columns=1 %}
+{% include cards/tabs.html dropdown=true id="ex4" %}
+{% endexample %}
+
+## Full-width tabs
+
+{% example html columns=1 %}
+{% include cards/tabs.html justified=true icons=true hide-text=true activity=true id="ex5" %}
+{% endexample %}
+
+## Alternate style
+
+{% example html columns=1 %}
+{% include cards/tabs.html icons=true alternative=true settings=true id="ex6" %}
+{% endexample %}

pages/_docs/toasts.md

@@ -4,7 +4,7 @@ title: Toasts
 
 The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
 
-### Default markup
+## Default markup
 
 {% example html %}
 {% include ui/toast.html %}

pages/_docs/tooltips.md

@@ -5,7 +5,7 @@ title: Tooltips
 The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
 
 
-### Default markup
+## Default markup
 
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
@@ -22,7 +22,7 @@ The Tooltip component is small pop-up box that appears when the user moves the m
 </button>
 {% endexample %}
 
-### Tooltip with HTML
+## Tooltip with HTML
 
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">

pages/_docs/typography.md

@@ -3,7 +3,7 @@ title: Typography
 description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
 ---
 
-### Text alignment
+## Text alignment
 
 Easily realign text to components with text alignment classes.
 
@@ -14,7 +14,7 @@ Easily realign text to components with text alignment classes.
 <p class="text-justify">Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>
 {% endexample %}
 
-### Text transform
+## Text transform
 
 Transform text in components with text capitalization classes.
 
@@ -24,7 +24,7 @@ Transform text in components with text capitalization classes.
 <p class="text-capitalize">Capitalized text.</p>
 {% endexample %}
 
-### Letter spacing
+## Letter spacing
 
 Utilities for controlling the tracking (letter spacing) of an element.
 
@@ -34,7 +34,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
 {% endexample %}
 
-### Line Height
+## Line Height
 
 Utilities for controlling the leading (line height) of an element.
 
@@ -45,7 +45,7 @@ Utilities for controlling the leading (line height) of an element.
 <p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
 {% endexample %}
 
-### Basic elements
+## Basic elements
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.text-wrap` as container. It can handle almost any HTML tag.
 

pages/_includes/cards/tabs.html

@@ -1,21 +1,29 @@
 {% assign id = 0 | random_id %}
+{% if include.id %}
+   {% assign id = include.id %}
+{% endif %}
+{% assign icon-class = "mr-2" %}
+{% if include.hide-text %}
+   {% assign icon-class = "" %}
+{% endif %}
 {% assign reverse = include.reverse | default: false %}
+
 <div class="card">
 	<ul class="nav nav-tabs{% if include.alternative %} nav-tabs-alt{% endif %}{% if reverse %} flex-row-reverse{% endif %}{% if include.justified %} nav-fill{% endif %}" data-toggle="tabs">
-		<li class="nav-item ">
-			<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class="mr-2" %}{% endif %}Home</a>
+		<li class="nav-item">
+			<a href="#tabs-home-{{ id }}" class="nav-link active" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="home" class=icon-class %}{% endif %}{% unless include.hide-text %}Home{% endunless %}</a>
 		</li>
 		<li class="nav-item">
-			<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class="mr-2" %}{% endif %}Profile</a>
+			<a href="#tabs-profile-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="user" class=icon-class %}{% endif %}{% unless include.hide-text %}Profile{% endunless %}</a>
 		</li>
 		{% if include.activity %}
 		<li class="nav-item">
-			<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class="mr-2" %}{% endif %}Activity</a>
+			<a href="#tabs-activity-{{ id }}" class="nav-link" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="activity" class=icon-class %}{% endif %}{% unless include.hide-text %}Activity{% endunless %}</a>
 		</li>
 		{% endif %}
 		{% if include.disabled %}
 		<li class="nav-item">
-			<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class="mr-2" %}{% endif %}Disabled</a>
+			<a href="#tabs-activity-{{ id }}" class="nav-link disabled" data-toggle="tab">{% if include.icons %}{% include ui/icon.html icon="x" class=icon-class %}{% endif %}{% unless include.hide-text %}Disabled{% endunless %}</a>
 		</li>
 		{% endif %}
 		{% if include.dropdown %}
@@ -56,4 +64,4 @@
 			{% endif %}
 		</div>
 	</div>
-</div>
+</div>

pages/_includes/icons/x-octagon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>

pages/_includes/layout/sidenav-content.html

@@ -13,146 +13,28 @@
    {% for item in site.data.menu %}
    {% assign icon = item[1].icon %}
    <li class="nav-item">
-      <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children %}href="#sidebar-{{ id }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
+      <a class="nav-link{% if item[1].active %} active{% endif %}" {% if item[1].children or item[1].docs %}href="#sidebar-{{ id }}" data-toggle="collapse" role="button" aria-expanded="false"{% else %}href="{{ site.base }}/{{ item[1].url }}"{% endif %}>
          {% include ui/icon.html icon=icon  %}
          <span class="nav-link-text">{{ item[1].title }}</span>
          {% if item[1].label %}
          <span class="badge bg-primary text-white ml-auto">{{ item[1].label }}</span>
          {% endif %}
       </a>
-      {% if item[1].children %}
-      <div class="collapse navbar-collapse" id="sidebar-{{ id }}">
+      {% if item[1].children or item[1].docs %}
+      <div class="collapse navbar-collapse show" id="sidebar-{{ id }}">
          <ul class="nav nav-sm flex-column">
+
+            {% if item[1].docs %}
+            {% assign docs-key = item[1].docs %}
+            {% for p in site.docs-menu[docs-key].pages %}
+            {% assign doc = site.docs | where: "slug", p | first %}
             <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Alerts
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Avatars
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Badges
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Breadcrumb
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Buttons
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Button group
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Cards
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Charts
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Dropdowns
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Forms
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Icons
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Lists
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Modal
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Navs
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Navbar
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Page headers
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Pagination
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Popovers
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Progress
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Social post
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Spinners
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Tables
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Toasts
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Tooltips
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Typography
-               </a>
-            </li>
-            <li class="nav-item">
-               <a href="#" class="nav-link">
-                  Utilities
+               <a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="nav-link">
+                  {{ doc.title }}
                </a>
             </li>
+            {% endfor %}
+            {% endif %}
          </ul>
       </div>
       {% endif %}

pages/_includes/layout/sidenav.html

@@ -3,8 +3,10 @@
       {% include layout/sidenav-content.html logo="white" %}
    </div>
 </div>
+{% comment %}
 <div class="sidenav sidenav-expand-xl">
    <div class="container">
       {% include layout/sidenav-content.html%}
    </div>
 </div>
+{% endcomment %}

pages/_includes/ui/alert.html

@@ -1,3 +1,4 @@
 <div class="alert alert-{{ include.type | default: 'primary'}}" role="alert">
+   {% if include.close %}<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>{% endif %}
 	{% if include.icon %}{% include ui/icon.html icon=include.icon %}{% endif %} {{ include.text | default: "This is a custom alert box!" }}
-</div>
+</div>

pages/_layouts/default.html

@@ -3,9 +3,7 @@ layout: base
 ---
 
 <div class="d-flex h-auto min-h-screen">
-   {% comment %}
    {% include_cached layout/sidenav.html %}
-   {% endcomment %}
 
    <div class="flex-fill d-flex flex-column mw-100">
       {% include_cached layout/header.html %}

pages/_layouts/docs.html

@@ -13,9 +13,9 @@ page-title: Documentation
 		</a>
 
 		{% for group in site.docs-menu %}
-      {{ group.title }}
+      {{ group[1].title }}
 		<div class="list-group list-group-transparent mb-0">
-			{% for p in group.pages %}
+			{% for p in group[1].pages %}
 			{% assign doc = site.docs | where: "slug", p | first %}
 			<a href="{{ site.base }}/docs/{{ doc.slug }}.html" class="list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
 				{{ doc.title }}
@@ -29,7 +29,7 @@ page-title: Documentation
 			<div class="card-body p-lg-5">
 
 				<div class="text-wrap">
-					<h2 class="mt-0 mb-4">{{ page.title }}</h2>
+					<h2 class="h1 mt-0 mb-4">{{ page.title }}</h2>
 
 					{% if page.description %}
 					<p>{{ page.description }}</p>

pages/alerts.html

@@ -1,13 +0,0 @@
----
-title: Alerts
-page-title: Alerts
-done: true
----
-
-{% for variant in site.variants %}
-	{% capture text_with_variant %}
-		This is a {{ variant }} alert — check it out!
-	{% endcapture %}
-
-	{% include ui/alert.html type=variant text=text_with_variant %}
-{% endfor %}

pages/changelog.html

@@ -9,11 +9,11 @@ done: true
 		{% for page in site.changelog reversed %}
 		<div class="mb-4">
 			<div class="mb-2">
-				<span class="tag bg-blue-lt">{{ page.title }}</span> —
+				<span class="badge bg-blue-lt">{{ page.title }}</span> —
 				<span class="text-muted">{{ page.date | date: '%B %d, %Y' }}</span>
 			</div>
 			<div>{{ page.content }}</div>
 		</div>
 		{% endfor %}
 	</div>
-</div>
+</div>

pages/forms.html

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+<div class="row">
+   <div class="col-lg-3">
+
+      <div class="card">
+         <div class="card-body">
+            <h3 class="card-title">Add a new Credit Card</h3>
+
+            <div class="row row-xs">
+               <div class="col-12 form-group">
+                  <input class="form-control" type="text" placeholder="Card Number" />
+                  <!-- todo: input mask -->
+               </div>
+               <div class="col-4 form-group">
+                  <select class="form-control custom-select">
+                     <option>01</option>
+                  </select>
+               </div>
+               <div class="col-4 form-group">
+                  <select class="form-control custom-select">
+                     <option>2020</option>
+                  </select>
+               </div>
+               <div class="col-4 form-group">
+                  <input class="form-control" type="text" placeholder="CVV" />
+               </div>
+            </div>
+
+            {% include ui/button.html text="Save" color="primary" block=true %}
+
+            <div class="small text-muted mt-3">
+               {% include ui/icon.html icon="lock" %}
+               128-Bit SSL Encryption
+            </div>
+         </div>
+      </div>
+
+   </div>
+   <div class="col-3">2</div>
+   <div class="col-3">3</div>
+   <div class="col-3">4</div>
+</div>