fix: improve Introduction, Base, Layout and Plugins sections in documentation (#2288)

.changeset/cold-jokes-allow.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+fix: improve Introduction, Base, Layout and Plugins sections in documentation

docs/content/ui/base/typography.md

@@ -10,15 +10,6 @@ description: Role of typography in interface design.
 Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings.
 The `h1` tag is the highest level and the `h6` tag is the lowest level.
 
-```html
-<h1>H1 Heading</h1>
-<h2>H2 Heading</h2>
-<h3>H3 Heading</h3>
-<h4>H4 Heading</h4>
-<h5>H5 Heading</h5>
-<h6>H6 Heading</h6>
-```
-
 Below are examples of headings with different levels:
 
 {% capture html -%}
@@ -29,7 +20,7 @@ Below are examples of headings with different levels:
 <h5>H5 Heading</h5>
 <h6>H6 Heading</h6>
 {%- endcapture %}
-{% include "docs/example.html" html=html vertical %}
+{% include "docs/example.html" html=html %}
 
 ## Paragraphs
 
@@ -55,32 +46,15 @@ If you use a second paragraph, it will be separated from the first one by a blan
 
 Use a variety of semantic text elements, depending on how you want to display particular fragments of content.
 
-```html
-<abbr title="Internationalization">I18N</abbr>
-<strong>Bold</strong>
-<cite>Citation</cite>
-<code>Hello World!</code>
-<del>Deleted</del>
-<em>Emphasis</em>
-<i>Italic</i>
-<ins>Inserted</ins>
-<kbd>Ctrl + S</kbd>
-<mark>Highlighted</mark>
-<s>Strikethrough</s>
-<samp>Sample</samp>
-Text <sub>Subscripted</sub> Text <sup>Superscripted</sup>
-<time>20:00</time>
-<u>Underline</u>
-<var>x</var> = <var>y</var> + 2
-```
-
 Here are examples of semantic text elements:
 
 {% capture html -%}
 <div>
   <abbr title="Internationalization">I18N</abbr>
 </div>
-<div><strong>Bold</strong></div>
+<div>
+	<strong>Bold</strong>
+</div>
 <div>
   <cite>Citation</cite>
 </div>
@@ -111,19 +85,23 @@ Here are examples of semantic text elements:
 <div>
   <samp>Sample</samp>
 </div>
-<div>Text <sub>Subscripted</sub></div>
-<div>Text <sup>Superscripted</sup></div>
+<div>
+	Text <sub>Subscript</sub>
+</div>
+<div>
+	Text <sup>Superscript</sup>
+</div>
 <div>
   <time>20:00</time>
 </div>
 <div>
   <u>Underline</u>
 </div>
-<div><var>x</var> = <var>y</var> + 2</div>
+<div>
+	<var>x</var> = <var>y</var> + 2
+</div>
 {%- endcapture %}
-{% include "docs/example.html" html=html vertical %}
-
-
+{% include "docs/example.html" html=html %}
 
 ## Horizontal rules
 
@@ -144,15 +122,11 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec
   </p>
 </div>
 {%- endcapture %}
-{% include "docs/example.html" html=html vertical %}
-
-```html
-<hr />
-```
+{% include "docs/example.html" html=html %}
 
 ## Horizontal rules with label
 
-You can also add a label to a horizontal rule and align it as you see fit.
+You can also add a label to a horizontal rule and align it as you see fit. Centered label is the default.
 
 {% capture html -%}
 <p>
@@ -173,15 +147,22 @@ You can also add a label to a horizontal rule and align it as you see fit.
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
   labore et dolore magna aliquyam erat, sed diam voluptua.
 </p>
-<div class="hr-text hr-text-end">
+<div class="hr-text hr-text-start">
   <span>Rule text</span>
 </div>
 <p>
   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
   takimata sanctus est Lorem ipsum dolor sit amet.
 </p>
+<div class="hr-text hr-text-end">
+  <span>Rule text</span>
+</div>
+<p>
+  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
+  labore et dolore magna aliquyam erat, sed diam voluptua.
+</p>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
+{% include "docs/example.html" html=html %}
 
 ## Optimized for different alphabets
 
@@ -198,45 +179,33 @@ Tabler has been optimized to correctly display content in any language. It suppo
 <p>אלפבית עברי</p>
 <p>อักษรไทย</p>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
+{% include "docs/example.html" html=html %}
 
 ## Text transform
 
 Transform the content of components with text capitalization classes.
 
 {% capture html -%}
-<div class="text-lowercase">Lowercased text.</div>
-<div class="text-uppercase">Uppercased text.</div>
-<div class="text-capitalize">Capitalized text.</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html raw %}
-
-```html
 <p class="text-lowercase">Lowercased text.</p>
 <p class="text-uppercase">Uppercased text.</p>
 <p class="text-capitalize">Capitalized text.</p>
-```
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
 
 ## Letter spacing
 
 Control the tracking (letter spacing) of an element and make it tight, wide or normal.
 
 {% capture html -%}
-<div class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</div>
-<div class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</div>
-<div class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</div>
-{%- endcapture %}
-{% include "docs/example.html" html=html raw %}
-
-```html
 <p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
 <p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
 <p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
-```
+{%- endcapture %}
+{% include "docs/example.html" html=html %}
 
 ## Line height
 
-Control the leading (line height) of an element.
+Control the leading (line height) of an element using the `.lh-*` classes. The line height is the vertical space between lines of text.
 
 {% capture html -%}
 <p class="lh-1">
@@ -254,15 +223,6 @@ Control the leading (line height) of an element.
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-To control the line height of an element, use the following classes:
-
-```html
-<p class="lh-1">...</p>
-<p class="lh-sm">...</p>
-<p class="lh-base">...</p>
-<p class="lh-lg">...</p>
-```
-
 ## Antialiasing
 
 Control the font smoothing of an element.
@@ -273,21 +233,17 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
 <div class="antialiased">Text with antialiasing</div>
 <div class="subpixel-antialiased">Text without antialiasing</div>
 {%- endcapture %}
-{% include "docs/example.html" html=html raw %}
+{% include "docs/example.html" html=html %}
 
 ## Keyboard input
 
 Use the `<kbd>` to indicate input that is typically entered via keyboard.
 
 {% capture html -%}
-<div>To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.</div>
+To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd> or <kbd>ctrl</kbd> + <kbd>C</kbd>.
-```
-
 ## Markdown elements
 
 If you can't use the CSS classes you want, or you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements.

docs/content/ui/getting-started/faq.md

@@ -27,4 +27,4 @@ Tabler is an HTML template that can be used for any purpose. However, it is not
 
 ## How do I get notified of new Tabler versions?
 
-You may watch the releases on GitHub, follow us on [X](https://x.com/tabler_io) or stay up to date with our [changelog]({{ site.homepage }}/changelog).
+You may watch [the releases on GitHub](https://github.com/tabler/tabler/releases), follow us on [X](https://x.com/tabler_io) or stay up to date with our [changelog]({{ site.homepage }}/changelog).

docs/content/ui/layout/navs-tabls.md → docs/content/ui/layout/navs-tabs.md

@@ -10,20 +10,6 @@ Navigation bars are essential components of modern web applications, providing u
 
 If you want to create a horizontal navigation bar, you can use the `.nav` class. The `.nav-item` class is used to style each item within the navigation bar, and `.nav-link` is applied to the links. The `.active` class highlights the current active link, while the `.disabled` class styles non-clickable links.
 
-```html
-<ul class="nav">
-  <li class="nav-item">
-    <a class="nav-link active" aria-current="page" href="#">Active</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
-  </li>
-</ul>
-```
-
 Look at the example below to see how the horizontal navigation bar is displayed.
  
 {% capture html -%}
@@ -34,9 +20,6 @@ Look at the example below to see how the horizontal navigation bar is displayed.
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
   <li class="nav-item">
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
@@ -64,9 +47,6 @@ There is an example below to see how the vertical navigation bar is displayed.
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
   <li class="nav-item">
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
@@ -84,7 +64,7 @@ To create a tabbed navigation interface, use the `.nav-tabs` class. This is idea
 </ul>
 ```
 
-Example below shows how the tabbed navigation interface is displayed.
+The example below shows how the tabbed navigation interface is displayed.
 
 {% capture html -%}
 <ul class="nav nav-tabs">
@@ -94,9 +74,6 @@ Example below shows how the tabbed navigation interface is displayed.
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
   <li class="nav-item">
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
@@ -106,7 +83,7 @@ Example below shows how the tabbed navigation interface is displayed.
 
 ## Pills
 
-For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in interactive UI components.
+For a pill-shaped navigation style, use the `.nav-pills` class. This is a great choice for a sleek, modern look, especially in the interactive UI components.
 
 {% capture html -%}
 <ul class="nav nav-pills">
@@ -116,9 +93,6 @@ For a pill-shaped navigation style, use the `.nav-pills` class. This is a great
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
   <li class="nav-item">
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>
@@ -138,9 +112,6 @@ To create a navigation bar with an underline effect for active links, use the `.
   <li class="nav-item">
     <a class="nav-link" href="#">Link</a>
   </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
   <li class="nav-item">
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
   </li>

docs/content/ui/plugins/flags.md

@@ -28,12 +28,7 @@ To create a flag, add the `flag` class to a component and choose the country who
 
 ## Country flags
 
-To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found below.
-
-```html
-<span class="flag flag-country-ad"></span>
-<span class="flag flag-country-ae"></span>
-```
+To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra, you should use the following class: `.flag-country-ad`. The full list of countries can be found at the end of this page.
 
 {% capture html -%}
 <span class="flag flag-country-tg"></span>
@@ -55,14 +50,6 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
 {%- endcapture %}
 {% include "docs/example.html" html=html %}
 
-```html
-<span class="flag flag-xl ..."></span>
-<span class="flag flag-lg ..."></span>
-<span class="flag flag-md ..."></span>
-<span class="flag flag-sm ..."></span>
-<span class="flag flag-xs ..."></span>
-```
-
 ## Flags list
 
 The full list of countries can be found below.

docs/content/ui/plugins/payments.md

@@ -17,7 +17,7 @@ You can also include the plugin via CDN:
 
 ## Payment
 
-To create a payment provider icon, add the `payment` class to a component and specify the payment provider. The full list of payment providers can be found below.
+To create a payment provider icon, add the `payment` class to a component and specify the payment provider with the `payment-provider-*` class. The full list of payment providers can be found at the end of this page.
 
 {% capture html -%}
 <span class="payment payment-provider-shopify"></span>

docs/content/ui/plugins/social-icons.md

@@ -18,7 +18,7 @@ You can also include the plugin via CDN:
 
 ## Social icons
 
-To create a social icon, add the `social` class to a component and also add the class for the specific social app whose icon you want to use.
+To create a social icon, add the `social` class to a component and provide the class `social-app-*` with the social app whose icon you want to use.
 
 {% capture html -%}
 <span class="social social-app-facebook"></span>

shared/includes/docs/flags.html

@@ -3,7 +3,7 @@
 	 <tr>
 		<th class="w-1">Flag</th>
 		<th>Name</th>
-		<th class="w-1">Code</th>
+		<th class="w-1">Country code</th>
 		<th>CSS class</th>
 	 </tr>
   </thead>

shared/includes/docs/payments.html

@@ -1,8 +1,9 @@
 <table class="table table-vcenter">
 	<thead>
 	 <tr>
-		<th class="w-1">Provider</th>
-		<th>Name</th>
+		<th class="w-1">Icon light</th>
+		<th class="w-1">Icon dark</th>
+		<th>Provider name</th>
 		<th>CSS class</th>
 	 </tr>
   </thead>

shared/includes/docs/tabs-package.html

@@ -1,5 +1,5 @@
 {% assign packages = 'npm,pnpm,yarn' | split: ',' -%}
-<ul class="nav" id="myTab" role="tablist">
+<ul class="nav nav-tabs" id="myTab" role="tablist">
 	{%- for package in packages -%}
 	<li class="nav-item" role="presentation">
 		<button class="nav-link{% if forloop.index == 1 %} active{% endif %}" id="{{ package }}-tab" data-bs-toggle="tab" data-bs-target="#{{ package }}" type="button" role="tab"