docs rebiuld

src/pages/_data/docs.yml

@@ -1,13 +1,22 @@
+index:
+  title: Introduction
+  url: docs/
+  hide-in-index: true
+
 base:
   title: Getting started
-  icon: brand-tabler
+#  icon: brand-tabler
   children:
-    index:
+    getting-started:
-      title: Introduction
+      title: Getting Started
-      url: docs/index.html
+      url: docs/getting-started.html
     usage:
       title: Usage
       url: docs/usage.html
+
+content:
+  title: Content
+  children:
     colors:
       title: Colors
       url: docs/colors.html
@@ -18,9 +27,22 @@ base:
       title: Icons
       url: docs/icons.html
 
+forms:
+  title: Form components
+#  icon: forms
+  children:
+    form-elements:
+      title: Form elements
+      url: docs/form-elements.html
+    form-helpers:
+      title: Form helpers
+      url: docs/form-helpers.html
+
+
 components:
   title: Components
-  icon: puzzle
+  columns: 2
+#  icon: puzzle
   children:
     alerts:
       title: Alerts
@@ -52,12 +74,6 @@ components:
     empty:
       title: Empty states
       url: docs/empty.html
-    form-elements:
-      title: Form elements
-      url: docs/form-elements.html
-    form-helpers:
-      title: Form helpers
-      url: docs/form-helpers.html
     modals:
       title: Modals
       url: docs/modals.html
@@ -103,27 +119,21 @@ components:
 
 utils:
   title: Utilities
-  icon: flame
+#  icon: flame
   children:
     borders:
       title: Borders
       url: docs/borders.html
-
-    colors:
-      title: Colors
-      url: docs/colors.html
-
     cursors:
       title: Cursors
       url: docs/cursors.html
-
     interactions:
       title: Interactions
       url: docs/interactions.html
 
 plugins:
   title: Plugins
-  icon: apps
+#  icon: apps
   children:
     autosize:
       title: Autosize
@@ -144,5 +154,6 @@ plugins:
 changelog:
   title: Changelog
   show-version: true
-  icon: git-branch
+  hide-in-index: true
+#  icon: git-branch
   url: changelog.html

src/pages/_docs/charts.md

@@ -1,6 +1,6 @@
 ---
 title: Charts
-menu: docs.components.charts
+menu: docs.plugins.charts
 ---
 
 

src/pages/_docs/colors.md

@@ -1,6 +1,6 @@
 ---
 title: Colors
-menu: docs.utils.colors
+menu: docs.content.colors
 description: The choice of colors for a website or app interface has an big influence on how users interact with the product and what decisions they make. Harmonic colors can contribute to a nice first impression and encourage users to engage with your product, so it's a very important aspect of a successful design, which needs to be well thought out. 
 bootstrap-link: utilities/colors/
 ---

src/pages/_docs/flags.md

@@ -1,6 +1,6 @@
 ---
 title: Flags
-menu: docs.components.flags
+menu: docs.plugins.flags
 description: Thanks to the Tabler flags plug-in, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more. 
 plugin: flags
 libs: tabler-flags

src/pages/_docs/form-elements.md

@@ -3,7 +3,7 @@ title: Form elements
 description: Forms are one of the most important types of interaction with a website or app. Since their aim is to enable users to make a purchase, subscribe to a service or sign up to create an account, it's important to make sure they are easy to complete and help increase conversion rates. Use the available elements to create forms which are well-structured and user-friendly.
 bootstrap-link: components/forms/
 libs: nouislider
-menu: docs.components.form-elements
+menu: docs.forms.form-elements
 ---
 
 

src/pages/_docs/form-helpers.md

@@ -1,7 +1,7 @@
 ---
 title: Form helpers
 description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. 
-menu: docs.components.form-helpers
+menu: docs.forms.form-helpers
 ---
 
 

src/pages/_docs/getting-started.md

@@ -1,21 +1,11 @@
 ---
-title: Introduction
+title: Getting started
-menu: docs.base.index
+menu: docs.base.getting-started
-icon: flag
-redirect_from: docs.html
 ---
 
-## What is Tabler?
-
-Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!
-
-
 ## What are the benefits?
 
-Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community. 
+Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.
-
-To start using Tabler, first you need to set up the environment.
-
 
 ## Set up the environment
 

src/pages/_docs/icons.md

@@ -1,6 +1,6 @@
 ---
 title: Icons
-menu: docs.base.icons
+menu: docs.content.icons
 ---
 
 ## Base icon

src/pages/_docs/index.html

@@ -0,0 +1,27 @@
+---
+title: Introduction
+menu: docs.index
+redirect_from: docs.html
+---
+
+<p>Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customizable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!</p>
+
+<div class="mt-4">
+	<div class="row">
+		{% for doc in site.data.docs %}
+		{% unless doc[1].hide-in-index %}
+		<div class="{% if doc[1].columns == 2 %}col-12{% else %}col-sm-6{% endif %}">
+			<h3>{{ doc[1].title }}</h3>
+
+			<ul class="list-unstyled{% if doc[1].columns %} columns-md-{{ doc[1].columns }}{% endif %}">
+				{% for item in doc[1].children %}
+				<li>
+					- <a href="{{ site.base }}{{ item[1].url | relative_url }}">{{ item[1].title }}</a>
+				</li>
+				{% endfor %}
+			</ul>
+		</div>
+		{% endunless %}
+		{% endfor %}
+	</div>
+</div>

src/pages/_docs/payments.md

@@ -1,6 +1,6 @@
 ---
 title: Payments
-menu: docs.components.payments
+menu: docs.plugins.payments
 description: The Tabler payments plug-in will let you use a set of payment provider icons to facilitate the payment process and make it more-user friendly.
 plugin: payments
 ---

src/pages/_docs/typography.md

@@ -1,6 +1,6 @@
 ---
 title: Typography
-menu: docs.base.typography
+menu: docs.content.typography
 description: Typography plays an important role in creating an attractive and clear interface design. Good typography will make the content easy to follow and improve the usability of your website.
 bootstrap-link: content/typography/
 ---

src/pages/_includes/docs/menu.html

@@ -1,6 +1,6 @@
 {% assign current-menu = page.menu | split: '.' %}
 
-<ul class="nav nav-vertical">
+<ul class="nav nav-pills nav-vertical">
 	{% for doc in site.data.docs %}
 	<li class="nav-item">
 		{% assign key = doc[0] %}

src/pages/_layouts/docs.html

@@ -7,7 +7,7 @@ page-header: Documentation
 
 {% assign current-url = page.url | replace_regex: "^/", "" %}
 
-<div class="row">
+<div class="row gx-lg-4">
 	<div class="d-none d-lg-block col-lg-3">
 		{% include docs/menu.html %}
 	</div>
@@ -21,7 +21,7 @@ page-header: Documentation
 
 							{% if page.bootstrap-link %}
 							<p class="ms-auto">
-								<a href="https://getbootstrap.com/docs/4.4/{{ page.bootstrap-link }}" target="_blank">
+								<a href="https://getbootstrap.com/docs/5.0/{{ page.bootstrap-link }}" target="_blank" class="d-flex align-items-center">
 									{% include ui/icon.html icon="external-link" color="blue" class="pe-1" %}
 									Bootstrap documentation
 								</a>

src/scss/_utilities.scss

@@ -102,4 +102,10 @@ $utilities: (
     class: h,
     values: $size-values
   ),
+  "columns": (
+    property: columns,
+    class: columns,
+    responsive: true,
+    values: 2 3 4
+  )
 ) !default;

src/scss/ui/_markdown.scss

@@ -3,6 +3,7 @@ Markdown
  */
 .markdown {
   line-height: $line-height-lg;
+  font-size: $h4-font-size;
 
   > :first-child {
     margin-top: 0;
@@ -17,6 +18,7 @@ Markdown
     h1, h2, h3, h4, h5, h6 {
       margin-top: 2rem;
       margin-bottom: .5rem;
+      font-weight: $font-weight-bold;
     }
 
     h1 {