mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
Add documentation App (#2219)
This commit is contained in:
Paweł Kuna
GitHub
30
docs/content/ui/base/colors.md
Normal file
30
docs/content/ui/base/colors.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: Colors
|
||||
summary: The choice of colors for a website or app interface has a big influence on how users interact with the product and what decisions they make. Harmonious 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.
|
||||
bootstrapLink: utilities/colors/
|
||||
description: Impact of colors on user interface design.
|
||||
---
|
||||
|
||||
## Base colors
|
||||
|
||||
Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take.
|
||||
|
||||
{% include "docs/colors.html" colors=site.colors %}
|
||||
|
||||
## Light colors
|
||||
|
||||
All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs.
|
||||
|
||||
{% include "docs/colors.html" colors=site.lightColors %}
|
||||
|
||||
## Gray palette
|
||||
|
||||
The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design.
|
||||
|
||||
{% include "docs/colors.html" colors=site.grayColors %}
|
||||
|
||||
## Social colors
|
||||
|
||||
Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product.
|
||||
|
||||
{% include "docs/colors.html" colors=site.socialColors %}
|
||||
6
docs/content/ui/base/index.md
Normal file
6
docs/content/ui/base/index.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
title: Base
|
||||
order: 2
|
||||
description: Foundational elements for UI design.
|
||||
summary: The base section includes foundational elements such as colors, typography, and spacing that form the building blocks of a cohesive and consistent user interface.
|
||||
---
|
||||
321
docs/content/ui/base/typography.md
Normal file
321
docs/content/ui/base/typography.md
Normal file
@@ -0,0 +1,321 @@
|
||||
---
|
||||
title: Typography
|
||||
summary: 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.
|
||||
bootstrapLink: content/typography/
|
||||
description: Role of typography in interface design.
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
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 -%}
|
||||
<h1>H1 Heading</h1>
|
||||
<h2>H2 Heading</h2>
|
||||
<h3>H3 Heading</h3>
|
||||
<h4>H4 Heading</h4>
|
||||
<h5>H5 Heading</h5>
|
||||
<h6>H6 Heading</h6>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
## Paragraphs
|
||||
|
||||
Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content.
|
||||
|
||||
```html
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
```
|
||||
|
||||
If you use a second paragraph, it will be separated from the first one by a blank line.
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
<p>At vero eos et accusam et justo duo dolores et ea rebum.</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
|
||||
## Semantic text elements
|
||||
|
||||
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>
|
||||
<cite>Citation</cite>
|
||||
</div>
|
||||
<div>
|
||||
<code>Hello World!</code>
|
||||
</div>
|
||||
<div>
|
||||
<del>Deleted</del>
|
||||
</div>
|
||||
<div>
|
||||
<em>Emphasis</em>
|
||||
</div>
|
||||
<div>
|
||||
<i>Italic</i>
|
||||
</div>
|
||||
<div>
|
||||
<ins>Inserted</ins>
|
||||
</div>
|
||||
<div>
|
||||
<kbd>Ctrl + S</kbd>
|
||||
</div>
|
||||
<div>
|
||||
<mark>Highlighted</mark>
|
||||
</div>
|
||||
<div>
|
||||
<s>Strikethrough</s>
|
||||
</div>
|
||||
<div>
|
||||
<samp>Sample</samp>
|
||||
</div>
|
||||
<div>Text <sub>Subscripted</sub></div>
|
||||
<div>Text <sup>Superscripted</sup></div>
|
||||
<div>
|
||||
<time>20:00</time>
|
||||
</div>
|
||||
<div>
|
||||
<u>Underline</u>
|
||||
</div>
|
||||
<div><var>x</var> = <var>y</var> + 2</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
|
||||
|
||||
## Horizontal rules
|
||||
|
||||
Use the `hr` tag to represent a thematic break between paragraphs within one section.
|
||||
|
||||
{% capture html -%}
|
||||
<div>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
|
||||
reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
|
||||
quibusdam veniam?
|
||||
</p>
|
||||
<hr />
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A atque ex excepturi fuga magnam nam
|
||||
reiciendis velit. Amet eius eos eveniet fuga in ipsa, ipsum voluptatum. Dolorem expedita
|
||||
quibusdam veniam?
|
||||
</p>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html vertical %}
|
||||
|
||||
```html
|
||||
<hr />
|
||||
```
|
||||
|
||||
## Horizontal rules with label
|
||||
|
||||
You can also add a label to a horizontal rule and align it as you see fit.
|
||||
|
||||
{% capture html -%}
|
||||
<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>
|
||||
<div class="hr-text">
|
||||
<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-center">
|
||||
<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>
|
||||
<div class="hr-text hr-text-end">
|
||||
<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>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## Optimized for different alphabets
|
||||
|
||||
Tabler has been optimized to correctly display content in any language. It supports most Asian, African and Middle Eastern languages.
|
||||
|
||||
{% capture html -%}
|
||||
<p>汉字</p>
|
||||
<p>日本語の表記体系</p>
|
||||
<p>Кириллица</p>
|
||||
<p>Eλληνική</p>
|
||||
<p>ქართული დამწერლობა</p>
|
||||
<p>Հայերենի այբուբեն</p>
|
||||
<p>الحروف العربية</p>
|
||||
<p>אלפבית עברי</p>
|
||||
<p>อักษรไทย</p>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
## Line height
|
||||
|
||||
Control the leading (line height) of an element.
|
||||
|
||||
{% capture html -%}
|
||||
<p class="lh-1">
|
||||
This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
<p class="lh-sm">
|
||||
This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
<p class="lh-base">
|
||||
This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
<p class="lh-lg">
|
||||
This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet.
|
||||
</p>
|
||||
{%- 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.
|
||||
|
||||
Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="antialiased">Text with antialiasing</div>
|
||||
<div class="subpixel-antialiased">Text without antialiasing</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html raw %}
|
||||
|
||||
## 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>
|
||||
{%- 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.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="markdown">
|
||||
<h1>Hello World</h1>
|
||||
<p>
|
||||
Lorem ipsum<sup>[1]</sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus
|
||||
ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut
|
||||
vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub
|
||||
>script</sub
|
||||
>
|
||||
works as well!
|
||||
</p>
|
||||
<h2>Second level</h2>
|
||||
<p>
|
||||
Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum
|
||||
maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
|
||||
Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui.
|
||||
Ut et neque nisl.
|
||||
</p>
|
||||
<ul>
|
||||
<li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
|
||||
<li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
|
||||
<li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
|
||||
<li>Ut non enim metus.</li>
|
||||
</ul>
|
||||
</div>
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html %}
|
||||
Reference in New Issue
Block a user