From 0c0d34410776d53c0bd04afbcda2811e7a9ce958 Mon Sep 17 00:00:00 2001 From: codecalm Date: Wed, 17 Feb 2021 21:56:48 +0100 Subject: [PATCH] docs rebiuld --- src/pages/_data/docs.yml | 51 +++++++++++-------- src/pages/_docs/charts.md | 2 +- src/pages/_docs/colors.md | 2 +- src/pages/_docs/flags.md | 2 +- src/pages/_docs/form-elements.md | 2 +- src/pages/_docs/form-helpers.md | 2 +- .../_docs/{index.md => getting-started.md} | 22 +++----- src/pages/_docs/icons.md | 2 +- src/pages/_docs/index.html | 27 ++++++++++ src/pages/_docs/payments.md | 2 +- src/pages/_docs/typography.md | 2 +- src/pages/_includes/docs/menu.html | 2 +- src/pages/_layouts/docs.html | 4 +- src/scss/_utilities.scss | 6 +++ src/scss/ui/_markdown.scss | 2 + 15 files changed, 83 insertions(+), 47 deletions(-) rename src/pages/_docs/{index.md => getting-started.md} (66%) create mode 100644 src/pages/_docs/index.html diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index b6814c0e4..6dfc1e4e5 100644 --- a/src/pages/_data/docs.yml +++ b/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: - 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 \ No newline at end of file diff --git a/src/pages/_docs/charts.md b/src/pages/_docs/charts.md index deeb0af2f..75cd5c256 100644 --- a/src/pages/_docs/charts.md +++ b/src/pages/_docs/charts.md @@ -1,6 +1,6 @@ --- title: Charts -menu: docs.components.charts +menu: docs.plugins.charts --- diff --git a/src/pages/_docs/colors.md b/src/pages/_docs/colors.md index efe83db22..54360b8e0 100644 --- a/src/pages/_docs/colors.md +++ b/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/ --- diff --git a/src/pages/_docs/flags.md b/src/pages/_docs/flags.md index 719c58ef2..44d4c8f37 100644 --- a/src/pages/_docs/flags.md +++ b/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 diff --git a/src/pages/_docs/form-elements.md b/src/pages/_docs/form-elements.md index e565a730c..b59500ccd 100644 --- a/src/pages/_docs/form-elements.md +++ b/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 --- diff --git a/src/pages/_docs/form-helpers.md b/src/pages/_docs/form-helpers.md index 8aaf45d50..050ebaac5 100644 --- a/src/pages/_docs/form-helpers.md +++ b/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 --- diff --git a/src/pages/_docs/index.md b/src/pages/_docs/getting-started.md similarity index 66% rename from src/pages/_docs/index.md rename to src/pages/_docs/getting-started.md index 0f49964ff..8b0e1fb6f 100644 --- a/src/pages/_docs/index.md +++ b/src/pages/_docs/getting-started.md @@ -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). \ No newline at end of file diff --git a/src/pages/_docs/icons.md b/src/pages/_docs/icons.md index d2afbfe24..9ab797de8 100644 --- a/src/pages/_docs/icons.md +++ b/src/pages/_docs/icons.md @@ -1,6 +1,6 @@ --- title: Icons -menu: docs.base.icons +menu: docs.content.icons --- ## Base icon diff --git a/src/pages/_docs/index.html b/src/pages/_docs/index.html new file mode 100644 index 000000000..8de775d48 --- /dev/null +++ b/src/pages/_docs/index.html @@ -0,0 +1,27 @@ +--- +title: Introduction +menu: docs.index +redirect_from: docs.html +--- + +

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!

+ +
+
+ {% for doc in site.data.docs %} + {% unless doc[1].hide-in-index %} +
+

{{ doc[1].title }}

+ + +
+ {% endunless %} + {% endfor %} +
+
diff --git a/src/pages/_docs/payments.md b/src/pages/_docs/payments.md index 8ae7c6a03..ec4dd97fd 100644 --- a/src/pages/_docs/payments.md +++ b/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 --- diff --git a/src/pages/_docs/typography.md b/src/pages/_docs/typography.md index f1c5880d6..d76fc566c 100644 --- a/src/pages/_docs/typography.md +++ b/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/ --- diff --git a/src/pages/_includes/docs/menu.html b/src/pages/_includes/docs/menu.html index 360ce52cd..d435ecc6b 100644 --- a/src/pages/_includes/docs/menu.html +++ b/src/pages/_includes/docs/menu.html @@ -1,6 +1,6 @@ {% assign current-menu = page.menu | split: '.' %} -