mirror of
https://github.com/tabler/tabler.git
synced 2026-07-22 13:31:50 +04:00
docs rebiuld
This commit is contained in:
codecalm
+31
-20
@@ -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:
|
||||
title: Introduction
|
||||
url: docs/index.html
|
||||
getting-started:
|
||||
title: Getting Started
|
||||
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
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Charts
|
||||
menu: docs.components.charts
|
||||
menu: docs.plugins.charts
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,21 +1,11 @@
|
||||
---
|
||||
title: Introduction
|
||||
menu: docs.base.index
|
||||
icon: flag
|
||||
redirect_from: docs.html
|
||||
title: Getting started
|
||||
menu: docs.base.getting-started
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
To start using Tabler, first you need to set up the environment.
|
||||
|
||||
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.
|
||||
|
||||
## Set up the environment
|
||||
|
||||
@@ -25,12 +15,12 @@ To use our build system and run our documentation locally, you'll need a copy of
|
||||
2. Navigate to the root `/tabler` directory and run `npm install` to install our local dependencies listed in `package.json`.
|
||||
3. [Install Ruby](https://ruby-lang.org/en/documentation/installation/) - the recommended version is [2.5.5](https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz).
|
||||
4. [Install Bundler](https://bundler.io) with `gem install bundler` and, finally, run `bundle install`. It will install all Ruby dependencies, such as [Jekyll and plugins](https://jekyllrb.com).
|
||||
|
||||
|
||||
### Windows users
|
||||
1. [Install Git](https://git-scm.com/download/win) in `C:\Program Files\git\bin` directory and run `npm config set script-shell "C:\Program Files\git\bin\bash.exe"` to change the default shell.
|
||||
2. [Install Ruby+Devkit](https://rubyinstaller.org/downloads/) - recommended version is [2.5.5](https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe).
|
||||
3. [Read guide](https://jekyllrb.com/docs/installation/windows/) to get Jekyll up and running without problems.
|
||||
|
||||
|
||||
Once you've completed the setup, you'll be able to run the various commands provided from the command line.
|
||||
|
||||
## Build Tabler locally
|
||||
@@ -42,4 +32,4 @@ Once you've completed the setup, you'll be able to run the various commands prov
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
|
||||
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: Icons
|
||||
menu: docs.base.icons
|
||||
menu: docs.content.icons
|
||||
---
|
||||
|
||||
## Base icon
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
---
|
||||
|
||||
@@ -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/
|
||||
---
|
||||
|
||||
@@ -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] %}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -102,4 +102,10 @@ $utilities: (
|
||||
class: h,
|
||||
values: $size-values
|
||||
),
|
||||
"columns": (
|
||||
property: columns,
|
||||
class: columns,
|
||||
responsive: true,
|
||||
values: 2 3 4
|
||||
)
|
||||
) !default;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user