From dde02732ef2d3a0e095872b2163dfaf8706939dc Mon Sep 17 00:00:00 2001 From: Michal Wolny Date: Sun, 15 Nov 2020 19:29:32 +0100 Subject: [PATCH] add usage page in getting started guide, add readme npm and CDN installation guide --- README.md | 16 + demo/changelog.html | 5 + demo/docs/alerts.html | 5 + demo/docs/autosize.html | 5 + demo/docs/avatars.html | 5 + demo/docs/badges.html | 5 + demo/docs/breadcrumb.html | 5 + demo/docs/buttons.html | 5 + demo/docs/cards.html | 5 + demo/docs/carousel.html | 5 + demo/docs/charts.html | 5 + demo/docs/colors.html | 5 + demo/docs/countup.html | 5 + demo/docs/cursors.html | 5 + demo/docs/divider.html | 5 + demo/docs/dropdowns.html | 5 + demo/docs/empty.html | 5 + demo/docs/flags.html | 5 + demo/docs/form-elements.html | 5 + demo/docs/form-helpers.html | 5 + demo/docs/icons.html | 5 + demo/docs/index.html | 5 + demo/docs/input-mask.html | 5 + demo/docs/modals.html | 5 + demo/docs/payments.html | 5 + demo/docs/progress.html | 5 + demo/docs/range-slider.html | 5 + demo/docs/ribbons.html | 5 + demo/docs/skeleton.html | 5 + demo/docs/spinners.html | 5 + demo/docs/steps.html | 5 + demo/docs/switch-icon.html | 5 + demo/docs/tables.html | 5 + demo/docs/tabs.html | 5 + demo/docs/timelines.html | 5 + demo/docs/toasts.html | 5 + demo/docs/tooltips.html | 5 + demo/docs/typography.html | 5 + demo/docs/usage.html | 652 +++++++++++++++++++++++++++++++++++ demo/sitemap.xml | 76 ++-- src/pages/_data/docs.yml | 3 + src/pages/_docs/usage.md | 38 ++ 42 files changed, 934 insertions(+), 36 deletions(-) create mode 100644 demo/docs/usage.html create mode 100644 src/pages/_docs/usage.md diff --git a/README.md b/README.md index bb427f2dd..8ab51f9a9 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,22 @@ Once you complete the setup, you'll be able to run the various commands provided Run `npm run build` for reforms a one off build application without refresh. Open [http://localhost:3001](http://localhost:3001) to configure the Web server. +## Installation + +Tabler is distributed via npm. + +```sh +npm install --save @tabler/core +``` + +### CDN support + +All files included in `@tabler/core` npm package are available over a CDN. + +```html + + +``` ## Feature requests diff --git a/demo/changelog.html b/demo/changelog.html index 2bba095cf..64dad5c92 100644 --- a/demo/changelog.html +++ b/demo/changelog.html @@ -343,6 +343,11 @@ Introduction +
  • + + Usage + +
  • Colors diff --git a/demo/docs/alerts.html b/demo/docs/alerts.html index 1235a8110..4d5b996ee 100644 --- a/demo/docs/alerts.html +++ b/demo/docs/alerts.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/autosize.html b/demo/docs/autosize.html index 6bbc990a7..a64d6d5e9 100644 --- a/demo/docs/autosize.html +++ b/demo/docs/autosize.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/avatars.html b/demo/docs/avatars.html index e3ce10f64..fddb5b3fd 100644 --- a/demo/docs/avatars.html +++ b/demo/docs/avatars.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/badges.html b/demo/docs/badges.html index a99decfb0..d381f071f 100644 --- a/demo/docs/badges.html +++ b/demo/docs/badges.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/breadcrumb.html b/demo/docs/breadcrumb.html index 9e92e339c..119fd9547 100644 --- a/demo/docs/breadcrumb.html +++ b/demo/docs/breadcrumb.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/buttons.html b/demo/docs/buttons.html index c0d7b9bb2..d5731ef3b 100644 --- a/demo/docs/buttons.html +++ b/demo/docs/buttons.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/cards.html b/demo/docs/cards.html index 7a832cc35..c46f765c4 100644 --- a/demo/docs/cards.html +++ b/demo/docs/cards.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/carousel.html b/demo/docs/carousel.html index e775249f0..983a1b620 100644 --- a/demo/docs/carousel.html +++ b/demo/docs/carousel.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/charts.html b/demo/docs/charts.html index e054e0510..3a54981e4 100644 --- a/demo/docs/charts.html +++ b/demo/docs/charts.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/colors.html b/demo/docs/colors.html index ab47efad6..766722da2 100644 --- a/demo/docs/colors.html +++ b/demo/docs/colors.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/countup.html b/demo/docs/countup.html index 2bce351a3..4ae1ecc89 100644 --- a/demo/docs/countup.html +++ b/demo/docs/countup.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/cursors.html b/demo/docs/cursors.html index 7d69518da..9c62687f6 100644 --- a/demo/docs/cursors.html +++ b/demo/docs/cursors.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/divider.html b/demo/docs/divider.html index aa519091e..56319caa9 100644 --- a/demo/docs/divider.html +++ b/demo/docs/divider.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/dropdowns.html b/demo/docs/dropdowns.html index 27f9c5de5..110b4cb5c 100644 --- a/demo/docs/dropdowns.html +++ b/demo/docs/dropdowns.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/empty.html b/demo/docs/empty.html index 5d143aa7e..d821b02e8 100644 --- a/demo/docs/empty.html +++ b/demo/docs/empty.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/flags.html b/demo/docs/flags.html index 7b7759e3a..f056f4ac2 100644 --- a/demo/docs/flags.html +++ b/demo/docs/flags.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/form-elements.html b/demo/docs/form-elements.html index bf164eb45..6840eecbb 100644 --- a/demo/docs/form-elements.html +++ b/demo/docs/form-elements.html @@ -344,6 +344,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/form-helpers.html b/demo/docs/form-helpers.html index 47612fce5..98070b0a8 100644 --- a/demo/docs/form-helpers.html +++ b/demo/docs/form-helpers.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/icons.html b/demo/docs/icons.html index b574c2061..b545663a6 100644 --- a/demo/docs/icons.html +++ b/demo/docs/icons.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/index.html b/demo/docs/index.html index 79276ff36..f40b331e9 100644 --- a/demo/docs/index.html +++ b/demo/docs/index.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/input-mask.html b/demo/docs/input-mask.html index 1df83ed6a..4dc75f0c0 100644 --- a/demo/docs/input-mask.html +++ b/demo/docs/input-mask.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/modals.html b/demo/docs/modals.html index 274ed2316..337312c36 100644 --- a/demo/docs/modals.html +++ b/demo/docs/modals.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/payments.html b/demo/docs/payments.html index 1d7783fc2..ec7827b83 100644 --- a/demo/docs/payments.html +++ b/demo/docs/payments.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/progress.html b/demo/docs/progress.html index 1689776a5..254334703 100644 --- a/demo/docs/progress.html +++ b/demo/docs/progress.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/range-slider.html b/demo/docs/range-slider.html index ac827d5ba..2214bf904 100644 --- a/demo/docs/range-slider.html +++ b/demo/docs/range-slider.html @@ -344,6 +344,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/ribbons.html b/demo/docs/ribbons.html index 163d65417..5f00d407a 100644 --- a/demo/docs/ribbons.html +++ b/demo/docs/ribbons.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/skeleton.html b/demo/docs/skeleton.html index 92201cc73..7c94d010d 100644 --- a/demo/docs/skeleton.html +++ b/demo/docs/skeleton.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/spinners.html b/demo/docs/spinners.html index 07a731d3d..6f651fc4d 100644 --- a/demo/docs/spinners.html +++ b/demo/docs/spinners.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/steps.html b/demo/docs/steps.html index f39939d32..077dc2019 100644 --- a/demo/docs/steps.html +++ b/demo/docs/steps.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/switch-icon.html b/demo/docs/switch-icon.html index b15ec43b0..a24220092 100644 --- a/demo/docs/switch-icon.html +++ b/demo/docs/switch-icon.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/tables.html b/demo/docs/tables.html index 78f5bc4cf..4ce530201 100644 --- a/demo/docs/tables.html +++ b/demo/docs/tables.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/tabs.html b/demo/docs/tabs.html index 17c624b2c..421a07630 100644 --- a/demo/docs/tabs.html +++ b/demo/docs/tabs.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/timelines.html b/demo/docs/timelines.html index 8bbac3833..1136c3cd9 100644 --- a/demo/docs/timelines.html +++ b/demo/docs/timelines.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/toasts.html b/demo/docs/toasts.html index 2bcb0a2ec..e56100d30 100644 --- a/demo/docs/toasts.html +++ b/demo/docs/toasts.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/tooltips.html b/demo/docs/tooltips.html index 3150736c5..bfae89279 100644 --- a/demo/docs/tooltips.html +++ b/demo/docs/tooltips.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/typography.html b/demo/docs/typography.html index de43c3423..c8e70930a 100644 --- a/demo/docs/typography.html +++ b/demo/docs/typography.html @@ -343,6 +343,11 @@ Introduction
    • +
  • + + Usage + +
  • Colors diff --git a/demo/docs/usage.html b/demo/docs/usage.html new file mode 100644 index 000000000..3dbfe05f9 --- /dev/null +++ b/demo/docs/usage.html @@ -0,0 +1,652 @@ + + + + + + + + Usage - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + + +
    +
    +
    + + + Tabler + +
    +
    + + + + +
    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
    +
    +
    +
    +
    + + +
    +
    Paweł Kuna
    +
    UI Designer
    +
    +     +
    + Set status + Profile & account + Feedback +
    + Settings + Logout +
    +
    +
    +
    +
    +
    + +
    +
    +
    + +
    +
    +
    +

    + Documentation +

    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    Usage

    +
    +

    Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes.

    +
    +

    Installation

    +

    To install the latest tabler npm package in your project run:

    +
    +
    + 
    npm install @tabler/core
+
    +
    +
    +

    Tabler 1.0.0 major version is now in active development. To get the latest alpha version run:

    +
    +
    + 
    npm install @tabler/core@alpha
+
    +
    +
    +

    CDN support

    +

    All files included in @tabler/core npm package are available over a CDN.

    +
    +
    + 
    <link rel="stylesheet" href="https://unpkg.com/@tabler/core@latest/dist/css/tabler.min.css">
+<script src="https://unpkg.com/@tabler/core@latest/dist/js/tabler.min.js"></script>
+
    +
    +
    +

    To load a specific version replace latest with the desired version number.

    +
    +
    + 
    <link rel="stylesheet" href="https://unpkg.com/@tabler/core@1.0.0-alpha.13/dist/css/tabler.min.css">
+
    +
    +
    +

    To load the latest alpha version replace latest with alpha.

    +
    +
    + 
    <script src="https://unpkg.com/@tabler/core@alpha/dist/js/tabler.min.js"></script>
+
    +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    + + + + + + + \ No newline at end of file diff --git a/demo/sitemap.xml b/demo/sitemap.xml index 77507a761..1a7b91263 100644 --- a/demo/sitemap.xml +++ b/demo/sitemap.xml @@ -2,147 +2,151 @@ /docs/alerts.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/autosize.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/avatars.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/badges.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/breadcrumb.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/buttons.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/cards.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/carousel.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/charts.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/colors.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/countup.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/cursors.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/divider.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/dropdowns.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/empty.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/flags.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/form-elements.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/form-helpers.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/icons.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/ - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/input-mask.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/modals.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/payments.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/progress.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/range-slider.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/ribbons.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/skeleton.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/spinners.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/steps.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/switch-icon.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/tables.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/tabs.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/timelines.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/toasts.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/tooltips.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 /docs/typography.html - 2020-11-15T17:46:49+01:00 + 2020-11-15T19:27:48+01:00 + + + /docs/usage.html + 2020-11-15T19:27:48+01:00 /500.html diff --git a/src/pages/_data/docs.yml b/src/pages/_data/docs.yml index 515ccaf0a..39ba66cc6 100644 --- a/src/pages/_data/docs.yml +++ b/src/pages/_data/docs.yml @@ -5,6 +5,9 @@ base: index: title: Introduction url: docs/index.html + usage: + title: Usage + url: docs/usage.html colors: title: Colors url: docs/colors.html diff --git a/src/pages/_docs/usage.md b/src/pages/_docs/usage.md new file mode 100644 index 000000000..fadfad629 --- /dev/null +++ b/src/pages/_docs/usage.md @@ -0,0 +1,38 @@ +--- +title: Usage +menu: docs.base.usage +description: Tabler distributions are available on npm. Add tabler as a dependency in your npm project or use a specific version directly in your HTML files via CDN includes. +--- + +## Installation + +To install the latest `tabler` npm package in your project run: +```sh +npm install @tabler/core +``` + +Tabler `1.0.0` major version is now in active development. To get the latest `alpha` version run: +```sh +npm install @tabler/core@alpha +``` + +## CDN support + +All files included in `@tabler/core` npm package are available over a CDN. + +```html + + +``` + +To load a specific version replace `latest` with the desired version number. + +```html + +``` + +To load the latest `alpha` version replace `latest` with `alpha`. + +```html + +```