diff --git a/.changeset/cold-jokes-allow.md b/.changeset/cold-jokes-allow.md new file mode 100644 index 000000000..dcf50370b --- /dev/null +++ b/.changeset/cold-jokes-allow.md @@ -0,0 +1,5 @@ +--- +"@tabler/docs": patch +--- + +fix: improve Introduction, Base, Layout and Plugins sections in documentation diff --git a/docs/content/ui/base/typography.md b/docs/content/ui/base/typography.md index 6be42c7cc..c49754847 100644 --- a/docs/content/ui/base/typography.md +++ b/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 Heading

-

H2 Heading

-

H3 Heading

-

H4 Heading

-
H5 Heading
-
H6 Heading
-``` - Below are examples of headings with different levels: {% capture html -%} @@ -29,7 +20,7 @@ Below are examples of headings with different levels:
H5 Heading
H6 Heading
{%- 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 -I18N -Bold -Citation -Hello World! -Deleted -Emphasis -Italic -Inserted -Ctrl + S -Highlighted -Strikethrough -Sample -Text Subscripted Text Superscripted - -Underline -x = y + 2 -``` - Here are examples of semantic text elements: {% capture html -%}
I18N
-
Bold
+
+ Bold +
Citation
@@ -111,19 +85,23 @@ Here are examples of semantic text elements:
Sample
-
Text Subscripted
-
Text Superscripted
+
+ Text Subscript +
+
+ Text Superscript +
Underline
-
x = y + 2
+
+ x = y + 2 +
{%- 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

{%- endcapture %} -{% include "docs/example.html" html=html vertical %} - -```html -
-``` +{% 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 -%}

@@ -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.

-
+
Rule text

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.

+
+ Rule text +
+

+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut + labore et dolore magna aliquyam erat, sed diam voluptua. +

{%- 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

אלפבית עברי

อักษรไทย

{%- 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 -%} -
Lowercased text.
-
Uppercased text.
-
Capitalized text.
-{%- endcapture %} -{% include "docs/example.html" html=html raw %} - -```html

Lowercased text.

Uppercased text.

Capitalized text.

-``` +{%- 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 -%} -
Lorem ipsum dolor sit amet. Tight letter spacing.
-
Lorem ipsum dolor sit amet. Normal letter spacing.
-
Lorem ipsum dolor sit amet. Wide letter spacing.
-{%- endcapture %} -{% include "docs/example.html" html=html raw %} - -```html

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

-``` +{%- 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 -%}

@@ -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 -

...

-

...

-

...

-

...

-``` - ## Antialiasing Control the font smoothing of an element. @@ -273,21 +233,17 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
Text with antialiasing
Text without antialiasing
{%- endcapture %} -{% include "docs/example.html" html=html raw %} +{% include "docs/example.html" html=html %} ## Keyboard input Use the `` to indicate input that is typically entered via keyboard. {% capture html -%} -
To edit settings, press ctrl + , or ctrl + C.
+To edit settings, press ctrl + , or ctrl + C. {%- endcapture %} {% include "docs/example.html" html=html %} -```html -To edit settings, press ctrl + , or ctrl + C. -``` - ## 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. diff --git a/docs/content/ui/getting-started/faq.md b/docs/content/ui/getting-started/faq.md index 49186b2e7..0da64919a 100644 --- a/docs/content/ui/getting-started/faq.md +++ b/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). diff --git a/docs/content/ui/layout/navs-tabls.md b/docs/content/ui/layout/navs-tabs.md similarity index 85% rename from docs/content/ui/layout/navs-tabls.md rename to docs/content/ui/layout/navs-tabs.md index 6effe5baf..4aab22fd7 100644 --- a/docs/content/ui/layout/navs-tabls.md +++ b/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 - -``` - 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.
  • Link
    • -
  • - Link -
  • Disabled
    • @@ -64,9 +47,6 @@ There is an example below to see how the vertical navigation bar is displayed.
  • Link
    • -
  • - Link -
  • Disabled
    • @@ -84,7 +64,7 @@ To create a tabbed navigation interface, use the `.nav-tabs` class. This is idea ``` -Example below shows how the tabbed navigation interface is displayed. +The example below shows how the tabbed navigation interface is displayed. {% capture html -%}