diff --git a/docs/_includes/logo.html b/docs/_includes/logo.html new file mode 100644 index 000000000..730f45af4 --- /dev/null +++ b/docs/_includes/logo.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/docs/_includes/menu.html b/docs/_includes/menu.html new file mode 100644 index 000000000..e4a6a569b --- /dev/null +++ b/docs/_includes/menu.html @@ -0,0 +1 @@ +menu \ No newline at end of file diff --git a/docs/_includes/default.html b/docs/_layouts/default.html similarity index 57% rename from docs/_includes/default.html rename to docs/_layouts/default.html index cf1047a62..d2968f051 100644 --- a/docs/_includes/default.html +++ b/docs/_layouts/default.html @@ -9,15 +9,20 @@
-
- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum voluptatem rem beatae, quia odit quo corporis exercitationem modi, laborum commodi ratione quos possimus eius incidunt quas in mollitia, molestias magni? +
+
+ {% include "logo.html" %} +
+
13
-
MENU
+
{{ include "menu.html" }}
{{ content }}
+ + \ No newline at end of file diff --git a/docs/eleventy.config.mjs b/docs/eleventy.config.mjs index 6aeca3617..66f7ded43 100644 --- a/docs/eleventy.config.mjs +++ b/docs/eleventy.config.mjs @@ -13,4 +13,17 @@ export default function (eleventyConfig) { dynamicPartials: true, jekyllWhere: true, }); + + return { + dir: { + output: "dist", + includes: "_includes", + data: "_data", + layouts: "_layouts", + }, + passthroughFileCopy: true, + templateFormats: ["html", "md", "liquid"], + htmlTemplateEngine: "liquid", + markdownTemplateEngine: "liquid", + } }; \ No newline at end of file diff --git a/docs/icons/index.mdx b/docs/icons/index.md similarity index 98% rename from docs/icons/index.mdx rename to docs/icons/index.md index 2fced3350..8310e473d 100644 --- a/docs/icons/index.mdx +++ b/docs/icons/index.md @@ -3,6 +3,7 @@ title: Tabler Icons summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customisation options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons. order: 2 description: Over 5000 pixel-perfect icons for web design and development +layout: default --- ## Browse icons diff --git a/docs/icons/libraries/index.mdx b/docs/icons/libraries/index.md similarity index 100% rename from docs/icons/libraries/index.mdx rename to docs/icons/libraries/index.md diff --git a/docs/icons/libraries/preact.mdx b/docs/icons/libraries/preact.md similarity index 98% rename from docs/icons/libraries/preact.mdx rename to docs/icons/libraries/preact.md index cc3be4d82..9e57947ef 100644 --- a/docs/icons/libraries/preact.mdx +++ b/docs/icons/libraries/preact.md @@ -2,6 +2,7 @@ title: Preact description: Tabler Icons library for Preact framework. summary: Tabler Icons for Preact provides an optimized collection of icons specifically designed for use with Preact. These lightweight and scalable icons are easy to integrate into Preact-based projects. +layout: default --- ![](/docs/icons/package-preact.png) diff --git a/docs/icons/libraries/react.mdx b/docs/icons/libraries/react.md similarity index 98% rename from docs/icons/libraries/react.mdx rename to docs/icons/libraries/react.md index 76b87105b..a77538a4f 100644 --- a/docs/icons/libraries/react.mdx +++ b/docs/icons/libraries/react.md @@ -2,6 +2,7 @@ title: React description: Tabler Icons library for React framework. summary: Tabler Icons for React offers a robust set of icons tailored for React applications, providing developers with a seamless way to enhance their user interfaces with high-quality, scalable graphics. +layout: default --- ![](/docs/icons/package-react.png) diff --git a/docs/icons/libraries/solidjs.mdx b/docs/icons/libraries/solidjs.md similarity index 98% rename from docs/icons/libraries/solidjs.mdx rename to docs/icons/libraries/solidjs.md index d02d25043..0c17c3673 100644 --- a/docs/icons/libraries/solidjs.mdx +++ b/docs/icons/libraries/solidjs.md @@ -2,6 +2,7 @@ title: SolidJS description: Tabler Icons library for SolidJS framework. summary: Tabler Icons for SolidJS is a lightweight library offering a vast selection of high-quality icons. It is designed for seamless integration with SolidJS, enabling developers to build visually appealing interfaces. +layout: default --- ![](/docs/icons/package-solidjs.png) diff --git a/docs/icons/libraries/svelte.mdx b/docs/icons/libraries/svelte.md similarity index 98% rename from docs/icons/libraries/svelte.mdx rename to docs/icons/libraries/svelte.md index 82594d1be..dea83d46b 100644 --- a/docs/icons/libraries/svelte.mdx +++ b/docs/icons/libraries/svelte.md @@ -2,6 +2,7 @@ title: Svelte description: Tabler Icons library for Svelte framework. summary: Tabler Icons for Svelte provides a clean and efficient way to use Tabler's comprehensive icon set in Svelte applications, helping developers deliver polished, user-friendly designs. +layout: default --- ![](/docs/icons/package-svelte.png) diff --git a/docs/icons/libraries/vue.mdx b/docs/icons/libraries/vue.md similarity index 98% rename from docs/icons/libraries/vue.mdx rename to docs/icons/libraries/vue.md index 796222394..67b83c5a7 100644 --- a/docs/icons/libraries/vue.mdx +++ b/docs/icons/libraries/vue.md @@ -2,6 +2,7 @@ title: Vue description: Tabler Icons library for Vue framework. summary: Tabler Icons for Vue offers a collection of customizable and scalable icons designed for use in Vue applications, providing a powerful tool for creating modern and engaging interfaces. +layout: default --- ![](/docs/icons/package-vue.png) diff --git a/docs/icons/libraries/webfont.mdx b/docs/icons/libraries/webfont.md similarity index 98% rename from docs/icons/libraries/webfont.mdx rename to docs/icons/libraries/webfont.md index faa3766f0..66ad4d82a 100644 --- a/docs/icons/libraries/webfont.mdx +++ b/docs/icons/libraries/webfont.md @@ -2,6 +2,7 @@ title: Webfont description: Tabler Icons as a webfont. summary: Tabler Icons as a webfont allows you to easily include icons in your projects using simple CSS classes, offering a lightweight and scalable solution for web development. +layout: default --- ![](/docs/icons/package-webfont.png) diff --git a/docs/icons/plugins/figma.mdx b/docs/icons/plugins/figma.md similarity index 98% rename from docs/icons/plugins/figma.mdx rename to docs/icons/plugins/figma.md index 87683ac8a..61fe080b4 100644 --- a/docs/icons/plugins/figma.mdx +++ b/docs/icons/plugins/figma.md @@ -2,6 +2,7 @@ title: Figma plugin description: Use Tabler Icons directly in Figma. summary: The Tabler Figma plugin allows designers to seamlessly integrate Tabler Icons into their Figma projects, providing quick access to a vast library of customizable icons that enhance the design workflow. +layout: default --- ![Tabler Figma Plugin](/docs/icons/figma-plugin.png) diff --git a/docs/icons/plugins/index.mdx b/docs/icons/plugins/index.md similarity index 100% rename from docs/icons/plugins/index.mdx rename to docs/icons/plugins/index.md diff --git a/docs/icons/static-files/eps.mdx b/docs/icons/static-files/eps.md similarity index 95% rename from docs/icons/static-files/eps.mdx rename to docs/icons/static-files/eps.md index 4934430f8..e096603c9 100644 --- a/docs/icons/static-files/eps.mdx +++ b/docs/icons/static-files/eps.md @@ -1,6 +1,7 @@ --- title: EPS version description: Download Tabler Icons in EPS format. +layout: default --- ![](/docs/icons/package-eps.png) diff --git a/docs/icons/static-files/index.mdx b/docs/icons/static-files/index.md similarity index 100% rename from docs/icons/static-files/index.mdx rename to docs/icons/static-files/index.md diff --git a/docs/icons/static-files/pdf.mdx b/docs/icons/static-files/pdf.md similarity index 95% rename from docs/icons/static-files/pdf.mdx rename to docs/icons/static-files/pdf.md index ec28a662d..d81e28e43 100644 --- a/docs/icons/static-files/pdf.mdx +++ b/docs/icons/static-files/pdf.md @@ -1,6 +1,7 @@ --- title: PDF version description: Download Tabler Icons in PDF format. +layout: default --- ![](/docs/icons/package-pdf.png) diff --git a/docs/icons/static-files/png.mdx b/docs/icons/static-files/png.md similarity index 97% rename from docs/icons/static-files/png.mdx rename to docs/icons/static-files/png.md index fc8dab303..ff023598e 100644 --- a/docs/icons/static-files/png.mdx +++ b/docs/icons/static-files/png.md @@ -1,6 +1,7 @@ --- title: PNG version description: Download Tabler Icons in PNG format. +layout: default --- ![](/docs/icons/package-png.png) diff --git a/docs/icons/static-files/svg.mdx b/docs/icons/static-files/svg.md similarity index 99% rename from docs/icons/static-files/svg.mdx rename to docs/icons/static-files/svg.md index 5d32cb2d3..ea2a4c79b 100644 --- a/docs/icons/static-files/svg.mdx +++ b/docs/icons/static-files/svg.md @@ -1,6 +1,7 @@ --- title: SVG version description: Download Tabler Icons in SVG format. +layout: default --- ![](/docs/icons/package-svg.png) diff --git a/docs/illustrations/index.mdx b/docs/illustrations/index.md similarity index 84% rename from docs/illustrations/index.mdx rename to docs/illustrations/index.md index 13bf0ef6c..80dababb7 100644 --- a/docs/illustrations/index.mdx +++ b/docs/illustrations/index.md @@ -3,6 +3,7 @@ title: Tabler Illustrations order: 3 description: Customizable illustrations for modern web and mobile designs. summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience. +layout: default --- -![](/docs/cover-illustrations.png) \ No newline at end of file +! [ ] (/docs/cover-illustrations.png) diff --git a/docs/illustrations/introduction/contents.mdx b/docs/illustrations/introduction/contents.md similarity index 98% rename from docs/illustrations/introduction/contents.mdx rename to docs/illustrations/introduction/contents.md index a4611b0b8..9269e45d3 100644 --- a/docs/illustrations/introduction/contents.mdx +++ b/docs/illustrations/introduction/contents.md @@ -2,6 +2,7 @@ title: Contents description: Explore Tabler Illustrations folder structure summary: The Tabler Illustrations package is thoughtfully structured to provide designers and developers with an array of high-quality assets. This guide explores the various folders and their contents, helping users make the most of these resources. +layout: default --- The Tabler Illustrations package offers a wide range of visual assets designed to meet the needs of modern web and graphic design. These illustrations are not only aesthetically pleasing but also highly versatile, supporting various formats and themes for seamless integration into different projects. diff --git a/docs/illustrations/introduction/customization.mdx b/docs/illustrations/introduction/customization.md similarity index 99% rename from docs/illustrations/introduction/customization.mdx rename to docs/illustrations/introduction/customization.md index 36a083ec4..f217ef547 100644 --- a/docs/illustrations/introduction/customization.mdx +++ b/docs/illustrations/introduction/customization.md @@ -2,6 +2,7 @@ title: Customization description: Customize the illustrations to match your brand. summary: Learn how to tailor Tabler Illustrations by adjusting colors, sizes, and formats. This section provides insights into seamlessly integrating illustrations to align with your design and branding. +layout: default --- ```html example columns={1} centered vertical height="25rem" diff --git a/docs/illustrations/introduction/index.mdx b/docs/illustrations/introduction/index.md similarity index 100% rename from docs/illustrations/introduction/index.mdx rename to docs/illustrations/introduction/index.md diff --git a/docs/illustrations/introduction/license.mdx b/docs/illustrations/introduction/license.md similarity index 98% rename from docs/illustrations/introduction/license.mdx rename to docs/illustrations/introduction/license.md index bb055c5bc..e70c83d5e 100644 --- a/docs/illustrations/introduction/license.mdx +++ b/docs/illustrations/introduction/license.md @@ -1,5 +1,6 @@ --- title: Tabler Illustrations License +layout: default --- ### Personal License @@ -26,7 +27,9 @@ You **cannot**: #### Example usage -Examples of usage **allowed** by the license:* Creating a personal website by yourself. +Examples of usage **allowed** by the license: + +* Creating a personal website by yourself. * Creating a website or web application for a client that will be owned by that client. * Creating a commercial SaaS application (like an invoicing app for example) where end users have to pay a fee to use the application. * Creating a commercial self-hosted web application that is sold to end users for a one-time fee. @@ -85,6 +88,7 @@ Examples of use **not allowed** by the license: * Giving someone access to Tabler Illustrations when they purchase a product from you. For example, you can't use a Team License as a way to give someone access to Tabler Illustrations when they purchase an online course from you. * Selling access to your team account to people who don't work for you company. +layout: default --- In case of differences between above license agreements and the license agreements provided with the product, the license agreement provided with the product shall prevail. diff --git a/docs/index.md b/docs/index.md index 17e874628..843b1ba17 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,7 +1,7 @@ --- -layout: default title: Welcome to Tabler Documentation summary: Tabler Docs provides a comprehensive guide to help you get started with the Tabler ecosystem, including its UI components, plugins, and icons. Explore detailed documentation to understand and leverage the full potential of Tabler in your projects. +layout: default --- diff --git a/docs/ui/base/colors.mdx b/docs/ui/base/colors.md similarity index 99% rename from docs/ui/base/colors.mdx rename to docs/ui/base/colors.md index 811ad9ad7..6bae87641 100644 --- a/docs/ui/base/colors.mdx +++ b/docs/ui/base/colors.md @@ -3,6 +3,7 @@ title: Colors summary: 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. bootstrapLink: utilities/colors/ description: Impact of colors on user interface design. +layout: default --- ## Base colors diff --git a/docs/ui/base/index.mdx b/docs/ui/base/index.md similarity index 100% rename from docs/ui/base/index.mdx rename to docs/ui/base/index.md diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.md similarity index 99% rename from docs/ui/base/typography.mdx rename to docs/ui/base/typography.md index 4b03e3197..c40c63d77 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.md @@ -3,6 +3,7 @@ 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. +layout: default --- ## Headings diff --git a/docs/ui/components/alerts.mdx b/docs/ui/components/alerts.md similarity index 99% rename from docs/ui/components/alerts.mdx rename to docs/ui/components/alerts.md index 8629ed99c..4db7d5920 100644 --- a/docs/ui/components/alerts.mdx +++ b/docs/ui/components/alerts.md @@ -3,6 +3,7 @@ title: Alerts summary: Alert messages are used to inform users of the status of their action and help them solve any problems that might have occurred. Good design of alert modals is very important for the overall user experience of a website or app. bootstrapLink: components/alerts/ description: Alert messages for user notifications. +layout: default --- ## Default markup diff --git a/docs/ui/components/autosize.mdx b/docs/ui/components/autosize.md similarity index 98% rename from docs/ui/components/autosize.mdx rename to docs/ui/components/autosize.md index 47ee92922..da6e6f3c2 100644 --- a/docs/ui/components/autosize.mdx +++ b/docs/ui/components/autosize.md @@ -3,6 +3,7 @@ title: Autosize summary: The autosize element will automatically adjust the textarea height and make it easier for users to follow as they type. libs: autosize description: Auto-adjusting textarea for better usability. +layout: default --- To be able to use the autosize in your application you will need to install the autosize dependency with `npm install autosize`. diff --git a/docs/ui/components/avatars.mdx b/docs/ui/components/avatars.md similarity index 99% rename from docs/ui/components/avatars.mdx rename to docs/ui/components/avatars.md index 7ea1b4f06..78339246a 100644 --- a/docs/ui/components/avatars.mdx +++ b/docs/ui/components/avatars.md @@ -2,6 +2,7 @@ title: Avatars summary: Avatars help customise various elements of a user interface and make the product experience more personalised. They are often used in communication apps, collaboration tools and social media. description: Personalize UI with user avatars. +layout: default --- ## Default markup diff --git a/docs/ui/components/badges.mdx b/docs/ui/components/badges.md similarity index 99% rename from docs/ui/components/badges.mdx rename to docs/ui/components/badges.md index cb5243be2..d949fd172 100644 --- a/docs/ui/components/badges.mdx +++ b/docs/ui/components/badges.md @@ -3,6 +3,7 @@ title: Badges summary: Badges are small count and labeling components, which are used to add extra information to an interface element. You can use them to draw users' attention to a new element, notify about unread messages or provide any kind of additional info. description: Add extra information with badges. bootstrapLink: components/badge/ +layout: default --- ## Default markup diff --git a/docs/ui/components/breadcrumb.mdx b/docs/ui/components/breadcrumb.md similarity index 99% rename from docs/ui/components/breadcrumb.mdx rename to docs/ui/components/breadcrumb.md index fff0f2337..6c14ca84f 100644 --- a/docs/ui/components/breadcrumb.mdx +++ b/docs/ui/components/breadcrumb.md @@ -3,6 +3,7 @@ title: Breadcrumb summary: Breadcrumbs are used to show the current website or app location and reduce the number of actions users have to take. Thanks to breadcrumbs, they can easily navigate within the website hierarchy and better understand its structure. bootstrapLink: components/breadcrumb/ description: Navigation aid for better structure. +layout: default --- ## Default markup diff --git a/docs/ui/components/buttons.mdx b/docs/ui/components/buttons.md similarity index 99% rename from docs/ui/components/buttons.mdx rename to docs/ui/components/buttons.md index 71f5942bc..ddd92438b 100644 --- a/docs/ui/components/buttons.mdx +++ b/docs/ui/components/buttons.md @@ -3,6 +3,7 @@ title: Buttons summary: Use button styles that best suit your designs and encourage users to take the desired actions. You can customize the button's properties to improve the user experience of your website or system, changing the size, shape, color and many more. bootstrapLink: components/buttons/ description: Customizable buttons for user actions. +layout: default --- ## Button tag diff --git a/docs/ui/components/cards.mdx b/docs/ui/components/cards.md similarity index 99% rename from docs/ui/components/cards.mdx rename to docs/ui/components/cards.md index ef27a9173..cab6b3916 100644 --- a/docs/ui/components/cards.mdx +++ b/docs/ui/components/cards.md @@ -3,6 +3,7 @@ title: Cards summary: Cards are flexible user interface elements, which help organize content into meaningful sections and make it easier to display on different screen sizes. Cards contain various smaller components, such as images, text, links and buttons and may act as an entry to more detailed information, helping users scan the page quickly and find the most relevant content. bootstrapLink: components/card/ description: Organize content with flexible cards. +layout: default --- ## Default card diff --git a/docs/ui/components/carousel.mdx b/docs/ui/components/carousel.md similarity index 99% rename from docs/ui/components/carousel.mdx rename to docs/ui/components/carousel.md index 0c619e4c3..4b1192c98 100644 --- a/docs/ui/components/carousel.mdx +++ b/docs/ui/components/carousel.md @@ -3,6 +3,7 @@ title: Carousel summary: A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information. bootstrapLink: components/carousel/ description: Display visual content with carousels. +layout: default --- ## Default markup diff --git a/docs/ui/components/charts.mdx b/docs/ui/components/charts.md similarity index 99% rename from docs/ui/components/charts.mdx rename to docs/ui/components/charts.md index d68e7b4d5..ab594c5cc 100644 --- a/docs/ui/components/charts.mdx +++ b/docs/ui/components/charts.md @@ -3,6 +3,7 @@ title: Charts libs: apexcharts summary: Tabler uses ApexCharts - a free and open-source modern charting library that helps developers to create beautiful and interactive visualizations for web pages. description: Interactive data visualizations with ApexCharts. +layout: default --- To be able to use the charts in your application you will need to install the apexcharts dependency with `npm install apexcharts`. diff --git a/docs/ui/components/countup.mdx b/docs/ui/components/countup.md similarity index 99% rename from docs/ui/components/countup.mdx rename to docs/ui/components/countup.md index 3e0029985..e5e3803a4 100644 --- a/docs/ui/components/countup.mdx +++ b/docs/ui/components/countup.md @@ -3,6 +3,7 @@ title: Countup summary: A countup element is used to display numerical data in an interesting way and make the interface more interactive. libs: countup description: Display numbers dynamically with countups. +layout: default --- The countup component is used to display numbers dynamically. It is a great way to make the interface more interactive and engaging. The countup component is a simple and easy way to animate numbers in your application. diff --git a/docs/ui/components/datagrid.mdx b/docs/ui/components/datagrid.md similarity index 99% rename from docs/ui/components/datagrid.mdx rename to docs/ui/components/datagrid.md index cd746af6d..c90c0c9d4 100644 --- a/docs/ui/components/datagrid.mdx +++ b/docs/ui/components/datagrid.md @@ -2,6 +2,7 @@ title: Data grid summary: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content. description: Detailed product information in grids. +layout: default --- ```html example vcentered height="460px" diff --git a/docs/ui/components/divider.mdx b/docs/ui/components/divider.md similarity index 99% rename from docs/ui/components/divider.mdx rename to docs/ui/components/divider.md index d83e03813..7ca645e8f 100644 --- a/docs/ui/components/divider.mdx +++ b/docs/ui/components/divider.md @@ -2,6 +2,7 @@ title: Divider summary: Dividers help organize content and make the interface layout clear and uncluttered. Greater clarity adds up to better user experience and enhanced interaction with a website or app. description: Separate content with clear dividers. +layout: default --- ## Default markup diff --git a/docs/ui/components/dropdowns.mdx b/docs/ui/components/dropdowns.md similarity index 99% rename from docs/ui/components/dropdowns.mdx rename to docs/ui/components/dropdowns.md index 8e2b7d8bb..30df150d7 100644 --- a/docs/ui/components/dropdowns.mdx +++ b/docs/ui/components/dropdowns.md @@ -3,6 +3,7 @@ title: Dropdowns summary: Use dropdowns to display lists of options or include more positions in a menu without overwhelming users with too many buttons and long lists. Dropdowns facilitate users' interaction with your website or software and make your design look clear. bootstrapLink: components/dropdowns description: Organize options with dropdown menus. +layout: default --- ## Default dropdown diff --git a/docs/ui/components/dropzone.mdx b/docs/ui/components/dropzone.md similarity index 99% rename from docs/ui/components/dropzone.mdx rename to docs/ui/components/dropzone.md index f5c851108..65c32d0ad 100644 --- a/docs/ui/components/dropzone.mdx +++ b/docs/ui/components/dropzone.md @@ -2,6 +2,7 @@ title: Dropzone summary: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people. description: Drag-and-drop file upload tool. +layout: default --- ## Basic usage diff --git a/docs/ui/components/empty.mdx b/docs/ui/components/empty.md similarity index 99% rename from docs/ui/components/empty.mdx rename to docs/ui/components/empty.md index 945fcfa5c..04c83af44 100644 --- a/docs/ui/components/empty.mdx +++ b/docs/ui/components/empty.md @@ -2,6 +2,7 @@ title: Empty states summary: Empty states or blank pages are commonly used as placeholders for first-use, empty data or error screens. Their aim is to engage users when there is no content to display and that is why their design is extremely important from the point of view of the user experience of your website or app. description: Engage users in empty or error screens. +layout: default --- ## Default markup diff --git a/docs/ui/components/icons.mdx b/docs/ui/components/icons.md similarity index 99% rename from docs/ui/components/icons.mdx rename to docs/ui/components/icons.md index 6fec3d3ac..7c81bebe5 100644 --- a/docs/ui/components/icons.mdx +++ b/docs/ui/components/icons.md @@ -3,6 +3,7 @@ title: Icons summary: Use one of over 5000 icons created specifically for Tabler and make your dashboard look even more attractive. All icons are under MIT license, so you can use them without any problem both in private and commercial projects. banner: icons description: Enhance dashboards with custom icons. +layout: default --- If you need to add icons to your website, you can use the Tabler Icons library. It contains over 5000 icons that you can use in your projects. All icons are under the MIT license, so you can use them without any problem both in private and commercial projects. You can find the Tabler Icons library [here](https://tabler-icons.io/). diff --git a/docs/ui/components/index.mdx b/docs/ui/components/index.md similarity index 100% rename from docs/ui/components/index.mdx rename to docs/ui/components/index.md diff --git a/docs/ui/components/inline-player.mdx b/docs/ui/components/inline-player.md similarity index 99% rename from docs/ui/components/inline-player.mdx rename to docs/ui/components/inline-player.md index 0f1bc20ac..a63704546 100644 --- a/docs/ui/components/inline-player.mdx +++ b/docs/ui/components/inline-player.md @@ -3,6 +3,7 @@ title: Inline player libs: plyr summary: A simple, lightweight, accessible and customizable HTML5, YouTube and Vimeo media player that supports modern browsers. description: Lightweight media player for websites. +layout: default --- diff --git a/docs/ui/components/modals.mdx b/docs/ui/components/modals.md similarity index 99% rename from docs/ui/components/modals.mdx rename to docs/ui/components/modals.md index c8cdc2876..886e46df3 100644 --- a/docs/ui/components/modals.mdx +++ b/docs/ui/components/modals.md @@ -2,6 +2,7 @@ title: Modals summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. description: Dialogs for notifications and content. +layout: default --- Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead. diff --git a/docs/ui/components/offcanvas.mdx b/docs/ui/components/offcanvas.md similarity index 99% rename from docs/ui/components/offcanvas.mdx rename to docs/ui/components/offcanvas.md index 13812d603..ab5ad3ee6 100644 --- a/docs/ui/components/offcanvas.mdx +++ b/docs/ui/components/offcanvas.md @@ -1,5 +1,6 @@ --- title: Offcanvas +layout: default --- Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, top, or bottom edge of the viewport. Buttons or anchors are used as triggers that are attached to specific elements you toggle, and `data` attributes are used to invoke our JavaScript. diff --git a/docs/ui/components/placeholder.mdx b/docs/ui/components/placeholder.md similarity index 99% rename from docs/ui/components/placeholder.mdx rename to docs/ui/components/placeholder.md index 5fa9b8a9c..068d7bc38 100644 --- a/docs/ui/components/placeholder.mdx +++ b/docs/ui/components/placeholder.md @@ -2,6 +2,7 @@ title: Placeholder summary: Placeholder is used to reserve space for content that soon will appear in a layout. description: Reserve space for upcoming content. +layout: default --- ## Placeholder line diff --git a/docs/ui/components/popover.mdx b/docs/ui/components/popover.md similarity index 99% rename from docs/ui/components/popover.mdx rename to docs/ui/components/popover.md index 1ca33f598..45be036af 100644 --- a/docs/ui/components/popover.mdx +++ b/docs/ui/components/popover.md @@ -3,6 +3,7 @@ title: Popovers summary: Popovers are used to provide additional information on elements where a simple tooltip is not sufficient. bootstrapLink: components/popovers description: Provide extra information with popovers. +layout: default --- ## Default markup diff --git a/docs/ui/components/progress.mdx b/docs/ui/components/progress.md similarity index 99% rename from docs/ui/components/progress.mdx rename to docs/ui/components/progress.md index f4d442ced..bb4cc351f 100644 --- a/docs/ui/components/progress.mdx +++ b/docs/ui/components/progress.md @@ -3,6 +3,7 @@ title: Progress bars summary: Progress bars are used to provide feedback on an action status and inform users of the current progress. Although seemingly small interface elements, they are extremely hepful in managing users' expectations and preventing them from abandoning a process they have initiated. bootstrapLink: components/progress description: Track and display progress visually. +layout: default --- ## Default markup diff --git a/docs/ui/components/range-slider.mdx b/docs/ui/components/range-slider.md similarity index 98% rename from docs/ui/components/range-slider.mdx rename to docs/ui/components/range-slider.md index 97914df89..f812b4d37 100644 --- a/docs/ui/components/range-slider.mdx +++ b/docs/ui/components/range-slider.md @@ -3,6 +3,7 @@ title: Range slider libs: nouislider description: Adjust values with range sliders. summary: Range sliders allow users to select a range of values by adjusting two handles along a track, providing an intuitive and space-efficient input method. +layout: default --- To be able to use the range slider in your application you will need to install the nouislider dependency with `npm install nouislider`. diff --git a/docs/ui/components/ribbons.mdx b/docs/ui/components/ribbons.md similarity index 99% rename from docs/ui/components/ribbons.mdx rename to docs/ui/components/ribbons.md index c85c0e78f..99e94f413 100644 --- a/docs/ui/components/ribbons.mdx +++ b/docs/ui/components/ribbons.md @@ -2,6 +2,7 @@ title: Ribbons summary: Ribbons are graphical elements which attract users' attention to a given element of an interface and make it stand out. description: Highlight elements with graphical ribbons. +layout: default --- ## Default markup diff --git a/docs/ui/components/segmented-control.mdx b/docs/ui/components/segmented-control.md similarity index 99% rename from docs/ui/components/segmented-control.mdx rename to docs/ui/components/segmented-control.md index 382a1265e..dedb4df99 100644 --- a/docs/ui/components/segmented-control.mdx +++ b/docs/ui/components/segmented-control.md @@ -1,6 +1,7 @@ --- title: Segmented Control summary: A segmented control is a set of two or more segments, each of which functions as a mutually exclusive button. A segmented control is used to display a set of mutually exclusive options. +layout: default --- To create a segmented control, use the `nav` element with the `nav-segmented` class. Inside the `nav` element, add `button` or `a` elements with the `nav-link` class. The `nav-link` class is used to style the buttons as links. diff --git a/docs/ui/components/spinners.mdx b/docs/ui/components/spinners.md similarity index 99% rename from docs/ui/components/spinners.mdx rename to docs/ui/components/spinners.md index 6658ea85c..c42d6281e 100644 --- a/docs/ui/components/spinners.mdx +++ b/docs/ui/components/spinners.md @@ -3,6 +3,7 @@ title: Spinners summary: Spinners are used to show the loading state of a component or page. They provide feedback for an action a user has taken, when it takes a bit longer to complete. bootstrapLink: components/spinners/ description: Indicate loading state with spinners. +layout: default --- ## Default markup diff --git a/docs/ui/components/statuses.mdx b/docs/ui/components/statuses.md similarity index 99% rename from docs/ui/components/statuses.mdx rename to docs/ui/components/statuses.md index 294b920bd..1269900d9 100644 --- a/docs/ui/components/statuses.mdx +++ b/docs/ui/components/statuses.md @@ -2,6 +2,7 @@ title: Statuses summary: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space. description: Highlight interface elements with status dots. +layout: default --- ## Default markup diff --git a/docs/ui/components/steps.mdx b/docs/ui/components/steps.md similarity index 99% rename from docs/ui/components/steps.mdx rename to docs/ui/components/steps.md index 541e4836f..06f507170 100644 --- a/docs/ui/components/steps.mdx +++ b/docs/ui/components/steps.md @@ -3,6 +3,7 @@ title: Steps summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully. new: true description: Simplify complex processes with steps. +layout: default --- ## Default markup diff --git a/docs/ui/components/switch-icon.mdx b/docs/ui/components/switch-icon.md similarity index 99% rename from docs/ui/components/switch-icon.mdx rename to docs/ui/components/switch-icon.md index 752f22214..b2db118a8 100644 --- a/docs/ui/components/switch-icon.mdx +++ b/docs/ui/components/switch-icon.md @@ -3,6 +3,7 @@ title: Switch icon summary: The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version. banner: icons description: Transition between two icons smoothly. +layout: default --- ## Default markup diff --git a/docs/ui/components/tables.mdx b/docs/ui/components/tables.md similarity index 99% rename from docs/ui/components/tables.mdx rename to docs/ui/components/tables.md index 4112ac080..415648078 100644 --- a/docs/ui/components/tables.mdx +++ b/docs/ui/components/tables.md @@ -3,6 +3,7 @@ title: Tables summary: Tables are a useful interface element that allows to visualise data and arrange it in a clear way. Thanks to that, users can browse a lot of information at once and a good table design will help you take care of its clarity. bootstrapLink: content/tables/ description: Visualize data clearly with tables. +layout: default --- ## Basic Table diff --git a/docs/ui/components/tabs.mdx b/docs/ui/components/tabs.md similarity index 99% rename from docs/ui/components/tabs.mdx rename to docs/ui/components/tabs.md index b0f82f926..38d2e52e7 100644 --- a/docs/ui/components/tabs.mdx +++ b/docs/ui/components/tabs.md @@ -3,6 +3,7 @@ title: Tabs summary: Tabs allow users to alternate between equally important views within the same context. By dividing content into meaningful sections, they improve its organization and make it easy for users to navigate. bootstrapLink: components/navs/ description: Organize content with interactive tabs. +layout: default --- ## Default markup diff --git a/docs/ui/components/timelines.mdx b/docs/ui/components/timelines.md similarity index 99% rename from docs/ui/components/timelines.mdx rename to docs/ui/components/timelines.md index eb16de029..818d5b2ce 100644 --- a/docs/ui/components/timelines.mdx +++ b/docs/ui/components/timelines.md @@ -2,6 +2,7 @@ title: Timelines summary: A timeline is a perfect way to visualize processes and projects, as it's easy to read and attractive for users. You can use it to give an overview of events, present an agenda or point out important points in time. description: Visualize events and processes clearly. +layout: default --- ## Timeline diff --git a/docs/ui/components/tinymce.mdx b/docs/ui/components/tinymce.md similarity index 99% rename from docs/ui/components/tinymce.mdx rename to docs/ui/components/tinymce.md index 9365ec08e..7454fe3ca 100644 --- a/docs/ui/components/tinymce.mdx +++ b/docs/ui/components/tinymce.md @@ -3,6 +3,7 @@ title: TinyMCE libs: tinymce summary: The WYSIWYG editor that is flexible, customizable, and designed with the user in mind. TinyMCE can handle any challenge, from the most simple implementation through to the most complex use case. description: Flexible WYSIWYG editor for content. +layout: default --- [TinyMCE](https://www.tiny.cloud/docs/) documentation. diff --git a/docs/ui/components/toasts.mdx b/docs/ui/components/toasts.md similarity index 99% rename from docs/ui/components/toasts.mdx rename to docs/ui/components/toasts.md index 0b8f8eda2..51ce16959 100644 --- a/docs/ui/components/toasts.mdx +++ b/docs/ui/components/toasts.md @@ -3,6 +3,7 @@ title: Toasts summary: Toasts are lightweight alert boxes which display for a few seconds after a user has taken an action, to inform them of the state or outcome. They can be used when a user clicks a button or submits a form and their aim is to provide feedback, rather than encourage to take action. bootstrapLink: components/toasts/ description: Display lightweight alert notifications. +layout: default --- ## Default markup diff --git a/docs/ui/components/tooltips.mdx b/docs/ui/components/tooltips.md similarity index 99% rename from docs/ui/components/tooltips.mdx rename to docs/ui/components/tooltips.md index bc5895c13..14fc82977 100644 --- a/docs/ui/components/tooltips.mdx +++ b/docs/ui/components/tooltips.md @@ -3,6 +3,7 @@ title: Tooltips summary: Tooltips are text labels which appear when a user hovers over an interface element. They explain the interface elements that may be unclear for users and guide them when they need help. If used properly, tooltips can significantly enhance user experience and add value to your website or software. bootstrapLink: components/tooltips/ description: Guide users with informative tooltips. +layout: default --- ## Default markup diff --git a/docs/ui/components/tracking.mdx b/docs/ui/components/tracking.md similarity index 99% rename from docs/ui/components/tracking.mdx rename to docs/ui/components/tracking.md index 884f21423..a57fd671b 100644 --- a/docs/ui/components/tracking.mdx +++ b/docs/ui/components/tracking.md @@ -2,6 +2,7 @@ title: Tracking summary: Component for visualising activity logs or other monitoring-related data. With its ability to show data in a visually appealing and easily understandable way, the tracking component is an essential tool for any organization that relies on data monitoring and analysis to optimize performance and user experience. description: Monitor data activity visually. +layout: default --- ## Basic example diff --git a/docs/ui/components/vector-maps.mdx b/docs/ui/components/vector-maps.md similarity index 99% rename from docs/ui/components/vector-maps.mdx rename to docs/ui/components/vector-maps.md index 23dcd9135..597437b93 100644 --- a/docs/ui/components/vector-maps.mdx +++ b/docs/ui/components/vector-maps.md @@ -2,6 +2,7 @@ title: Vector Maps description: Interactive guide to creating vector maps with jsVectorMap. summary: Vector maps are a great way to display geographical data in an interactive and visually appealing way. Learn how to create vector maps with jsVectorMap. +layout: default --- ## Installation diff --git a/docs/ui/forms/form-color-check.mdx b/docs/ui/forms/form-color-check.md similarity index 99% rename from docs/ui/forms/form-color-check.mdx rename to docs/ui/forms/form-color-check.md index 30bc78b79..9864066e3 100644 --- a/docs/ui/forms/form-color-check.mdx +++ b/docs/ui/forms/form-color-check.md @@ -2,6 +2,7 @@ title: Color check summary: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily. description: Enhance forms with color checks. +layout: default --- Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors. diff --git a/docs/ui/forms/form-elements.mdx b/docs/ui/forms/form-elements.md similarity index 99% rename from docs/ui/forms/form-elements.mdx rename to docs/ui/forms/form-elements.md index 71bc68932..a97a0b56b 100644 --- a/docs/ui/forms/form-elements.mdx +++ b/docs/ui/forms/form-elements.md @@ -5,6 +5,7 @@ bootstrapLink: components/forms/ libs: nouislider description: Design user-friendly and effective forms. order: 1 +layout: default --- ## Classic inputs diff --git a/docs/ui/forms/form-fieldset.mdx b/docs/ui/forms/form-fieldset.md similarity index 98% rename from docs/ui/forms/form-fieldset.mdx rename to docs/ui/forms/form-fieldset.md index 5a76d6afa..d3772b096 100644 --- a/docs/ui/forms/form-fieldset.mdx +++ b/docs/ui/forms/form-fieldset.md @@ -2,6 +2,7 @@ title: Form fieldset summary: By grouping form elements together with the fieldset element, you can improve the organization and accessibility of your forms, making it easier for users to understand the purpose of each input and provide accurate information. description: Group form elements for clarity. +layout: default --- ## Default markup diff --git a/docs/ui/forms/form-helpers.mdx b/docs/ui/forms/form-helpers.md similarity index 99% rename from docs/ui/forms/form-helpers.mdx rename to docs/ui/forms/form-helpers.md index e9b31ac75..b1e716fcd 100644 --- a/docs/ui/forms/form-helpers.mdx +++ b/docs/ui/forms/form-helpers.md @@ -2,6 +2,7 @@ title: Form helpers summary: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label. description: Provide additional guidance in forms. +layout: default --- ## Input help diff --git a/docs/ui/forms/form-image-check.mdx b/docs/ui/forms/form-image-check.md similarity index 99% rename from docs/ui/forms/form-image-check.mdx rename to docs/ui/forms/form-image-check.md index b5e2b12b8..acf376811 100644 --- a/docs/ui/forms/form-image-check.mdx +++ b/docs/ui/forms/form-image-check.md @@ -2,6 +2,7 @@ title: Image check summary: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily. description: Add visual appeal to forms with images. +layout: default --- ## Default markup diff --git a/docs/ui/forms/form-input-mask.mdx b/docs/ui/forms/form-input-mask.md similarity index 99% rename from docs/ui/forms/form-input-mask.mdx rename to docs/ui/forms/form-input-mask.md index 0da2d6f70..bde322a6a 100644 --- a/docs/ui/forms/form-input-mask.mdx +++ b/docs/ui/forms/form-input-mask.md @@ -2,6 +2,7 @@ title: Input mask summary: An input mask is a used to clarify the input format required in a given field and is helpful for users, removing confusion and reducing the number of validation errors. description: Clarify input formats for users. +layout: default --- ## Installation diff --git a/docs/ui/forms/form-selectboxes.mdx b/docs/ui/forms/form-selectboxes.md similarity index 99% rename from docs/ui/forms/form-selectboxes.mdx rename to docs/ui/forms/form-selectboxes.md index 387f584c7..830adca44 100644 --- a/docs/ui/forms/form-selectboxes.mdx +++ b/docs/ui/forms/form-selectboxes.md @@ -2,6 +2,7 @@ title: Form selectgroup summary: Use selectgroup to make your form more intuitive by providing users with a set of options to choose from. You can add simple selectgroup with a label, use icons only or icons with labels. Alternatively, you can use pill selectgroup if they go well with your design. description: Improve form UX with select groups. +layout: default --- ## Simple selectgroup diff --git a/docs/ui/forms/form-validation.mdx b/docs/ui/forms/form-validation.md similarity index 99% rename from docs/ui/forms/form-validation.mdx rename to docs/ui/forms/form-validation.md index ee9bacd52..ab0bba00c 100644 --- a/docs/ui/forms/form-validation.mdx +++ b/docs/ui/forms/form-validation.md @@ -2,6 +2,7 @@ title: Validation states summary: To inform users whether the entered value is correct or not, use either of the validation states. Thanks to that, users will immediately know which form elements they need to correct and, if the state displays as invalid, why the value is incorrect. description: Indicate valid or invalid inputs. +layout: default --- ## Validation states diff --git a/docs/ui/forms/index.mdx b/docs/ui/forms/index.md similarity index 100% rename from docs/ui/forms/index.mdx rename to docs/ui/forms/index.md diff --git a/docs/ui/getting-started/browser-support.mdx b/docs/ui/getting-started/browser-support.md similarity index 97% rename from docs/ui/getting-started/browser-support.mdx rename to docs/ui/getting-started/browser-support.md index 1cf018151..1a6cd9c97 100644 --- a/docs/ui/getting-started/browser-support.mdx +++ b/docs/ui/getting-started/browser-support.md @@ -2,6 +2,7 @@ title: Browser Support description: Check browser compatibility for Tabler. summary: Learn about the supported browsers and compatibility guidelines for using Tabler UI components to ensure a consistent experience across different devices and platforms. +layout: default --- Tabler is fully optimized for all modern browsers, including the latest versions of Chrome, Firefox, Edge, Safari, and Opera. These browsers ensure a seamless and responsive experience, allowing users to enjoy Tabler's advanced UI components without compatibility issues. diff --git a/docs/ui/getting-started/customize.mdx b/docs/ui/getting-started/customize.md similarity index 98% rename from docs/ui/getting-started/customize.mdx rename to docs/ui/getting-started/customize.md index 21edd6c3a..68435579d 100644 --- a/docs/ui/getting-started/customize.mdx +++ b/docs/ui/getting-started/customize.md @@ -2,6 +2,7 @@ title: Customize Tabler summary: Tabler has been designed so that it can be adjusted to your needs and requirements as much as possible. You can customize your own fonts, colors, font sizes, etc in it. description: Adjust fonts, colors, and styles. +layout: default --- ## Custom Google Font diff --git a/docs/ui/getting-started/download.mdx b/docs/ui/getting-started/download.md similarity index 99% rename from docs/ui/getting-started/download.mdx rename to docs/ui/getting-started/download.md index f8bceec9b..fdf7e9cb0 100644 --- a/docs/ui/getting-started/download.mdx +++ b/docs/ui/getting-started/download.md @@ -2,6 +2,7 @@ title: Download summary: Download Tabler to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn and more. description: Get Tabler CSS, JS, and source code. +layout: default --- ## CDN via jsDelivr diff --git a/docs/ui/getting-started/faq.mdx b/docs/ui/getting-started/faq.md similarity index 98% rename from docs/ui/getting-started/faq.mdx rename to docs/ui/getting-started/faq.md index 6646a73f5..430f4d3c4 100644 --- a/docs/ui/getting-started/faq.mdx +++ b/docs/ui/getting-started/faq.md @@ -3,6 +3,7 @@ title: FAQ summary: Answers to the most frequently asked questions. description: Common questions and answers. order: 12 +layout: default --- ## I found an issue, what can I do? diff --git a/docs/ui/getting-started/how-to-contribute.mdx b/docs/ui/getting-started/how-to-contribute.md similarity index 97% rename from docs/ui/getting-started/how-to-contribute.mdx rename to docs/ui/getting-started/how-to-contribute.md index 5c1d0bccd..f6f494071 100644 --- a/docs/ui/getting-started/how-to-contribute.mdx +++ b/docs/ui/getting-started/how-to-contribute.md @@ -2,6 +2,7 @@ title: How to Contribute summary: This guide explains how to contribute to Tabler, from setting up a development environment to making and testing changes. It covers essential steps like forking the repository, installing dependencies, and submitting a pull request to help improve Tabler's features and functionality. description: Guide to contributing to Tabler and setting up for development. +layout: default --- Contributions are always welcome and highly encouraged! Whether you're new to open source or a seasoned contributor, your input helps make Tabler better for everyone. If you're new to open source, [start here](https://opensource.guide/how-to-contribute/) to learn more about contributing. diff --git a/docs/ui/getting-started/index.mdx b/docs/ui/getting-started/index.md similarity index 98% rename from docs/ui/getting-started/index.mdx rename to docs/ui/getting-started/index.md index 5f0d1c88c..bc6176083 100644 --- a/docs/ui/getting-started/index.mdx +++ b/docs/ui/getting-started/index.md @@ -3,6 +3,7 @@ title: Introduction summary: Free and open-source HTML Dashboard UI Kit built on Bootstrap order: 1 description: Overview of Tabler UI Kit. +layout: default --- ## What is Tabler? diff --git a/docs/ui/getting-started/installation.mdx b/docs/ui/getting-started/installation.md similarity index 97% rename from docs/ui/getting-started/installation.mdx rename to docs/ui/getting-started/installation.md index 187ca830d..974c797ef 100644 --- a/docs/ui/getting-started/installation.mdx +++ b/docs/ui/getting-started/installation.md @@ -3,6 +3,7 @@ title: Installation order: 1 summary: Learn how to set up Tabler in your project by creating a basic HTML file, adding Tabler’s CSS and JavaScript, and exploring its powerful components to build responsive and visually stunning web applications. description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs." +layout: default --- This guide will take you through the essential steps to set up Tabler in your project, from creating a basic HTML file to incorporating Tabler’s styles and scripts. Let’s dive in! diff --git a/docs/ui/getting-started/license.mdx b/docs/ui/getting-started/license.md similarity index 97% rename from docs/ui/getting-started/license.mdx rename to docs/ui/getting-started/license.md index 0c552b1c1..f170064af 100644 --- a/docs/ui/getting-started/license.mdx +++ b/docs/ui/getting-started/license.md @@ -2,6 +2,7 @@ title: Tabler License summary: The MIT license grants you the flexibility to use Tabler in commercial or personal projects, modify its code, and distribute it freely. Ensure you include the required license and copyright notices to stay compliant with the terms. description: "Tabler's MIT license: freedom to use, modify, and share." +layout: default --- Tabler is an open-source project licensed under the **MIT license**, giving you extensive freedom to use, modify, and distribute the software. This license ensures that you can adapt Tabler to your needs while maintaining the required attributions. While attribution is not required, it is greatly appreciated to acknowledge the hard work of the developers. diff --git a/docs/ui/index.mdx b/docs/ui/index.md similarity index 88% rename from docs/ui/index.mdx rename to docs/ui/index.md index d9aec8950..f035360fc 100644 --- a/docs/ui/index.mdx +++ b/docs/ui/index.md @@ -3,6 +3,7 @@ title: Tabler UI order: 1 description: Free and open source web application UI kit based on Bootstrap summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently. +layout: default --- ![](/docs/cover-tabler.png) \ No newline at end of file diff --git a/docs/ui/layout/index.mdx b/docs/ui/layout/index.md similarity index 100% rename from docs/ui/layout/index.mdx rename to docs/ui/layout/index.md diff --git a/docs/ui/layout/navbars.mdx b/docs/ui/layout/navbars.md similarity index 99% rename from docs/ui/layout/navbars.mdx rename to docs/ui/layout/navbars.md index 95ccf34ab..233f8c46e 100644 --- a/docs/ui/layout/navbars.mdx +++ b/docs/ui/layout/navbars.md @@ -2,6 +2,7 @@ title: Navbars summary: A navbar serves as a central navigation tool, offering users quick and easy access to key sections of a website or application, improving usability and enhancing the overall user experience. description: Create and customize responsive navigation bars with ease. +layout: default --- The navbar is a core component of any website or application, serving as the primary navigation tool. It provides users with quick access to key sections, enhancing usability and improving the overall user experience. Positioned typically at the top of the page, the navbar can contain links, buttons, branding elements, and even interactive components like dropdown menus or search bars. diff --git a/docs/ui/layout/navs-tabls.mdx b/docs/ui/layout/navs-tabls.md similarity index 99% rename from docs/ui/layout/navs-tabls.mdx rename to docs/ui/layout/navs-tabls.md index 92496d8cf..201b181af 100644 --- a/docs/ui/layout/navs-tabls.mdx +++ b/docs/ui/layout/navs-tabls.md @@ -2,6 +2,7 @@ title: Navs and tabs summary: This guide covered the basics of creating different types of navigation bars and tabs, including horizontal, vertical, pill-shaped, and underline-styled navs. description: "Essential guide to nav styles: tabs, pills, dropdowns, and more." +layout: default --- Navigation bars are essential components of modern web applications, providing users with intuitive ways to navigate between different sections and content. This guide explores various types of navigation bars and tabs that can be easily implemented using predefined classes in HTML and CSS. Each type serves specific use cases, from horizontal and vertical layouts to tabbed interfaces and dropdown menus. By utilizing these examples, developers can enhance the usability and aesthetics of their web projects. diff --git a/docs/ui/layout/page-headers.mdx b/docs/ui/layout/page-headers.md similarity index 99% rename from docs/ui/layout/page-headers.mdx rename to docs/ui/layout/page-headers.md index 22b0db937..5feef25bb 100644 --- a/docs/ui/layout/page-headers.mdx +++ b/docs/ui/layout/page-headers.md @@ -2,6 +2,7 @@ title: Page headers summary: Page heading examples for Tabler description: Examples of Tabler page headers. +layout: default --- ## Simple header diff --git a/docs/ui/layout/page-layouts.mdx b/docs/ui/layout/page-layouts.md similarity index 99% rename from docs/ui/layout/page-layouts.mdx rename to docs/ui/layout/page-layouts.md index 82682584c..b51d04ed5 100644 --- a/docs/ui/layout/page-layouts.mdx +++ b/docs/ui/layout/page-layouts.md @@ -2,6 +2,7 @@ title: Page layouts summary: Learn how to build a sample version of the dashboard description: Learn to design dashboard layouts. +layout: default --- diff --git a/docs/ui/plugins/flags.mdx b/docs/ui/plugins/flags.md similarity index 99% rename from docs/ui/plugins/flags.mdx rename to docs/ui/plugins/flags.md index 6a26710c4..e56f9fec6 100644 --- a/docs/ui/plugins/flags.mdx +++ b/docs/ui/plugins/flags.md @@ -4,6 +4,7 @@ summary: Thanks to the Tabler flags plugin, you can create flags to visually rep plugin: flags libs: tabler-flags description: Visual representation of countries/languages. +layout: default --- ## Installation diff --git a/docs/ui/plugins/index.mdx b/docs/ui/plugins/index.md similarity index 100% rename from docs/ui/plugins/index.mdx rename to docs/ui/plugins/index.md diff --git a/docs/ui/plugins/payments.mdx b/docs/ui/plugins/payments.md similarity index 99% rename from docs/ui/plugins/payments.mdx rename to docs/ui/plugins/payments.md index 206b608e9..6025d7611 100644 --- a/docs/ui/plugins/payments.mdx +++ b/docs/ui/plugins/payments.md @@ -3,6 +3,7 @@ title: Payments summary: 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 description: User-friendly payment provider icons. +layout: default --- ## Installation diff --git a/docs/ui/plugins/social-icons.mdx b/docs/ui/plugins/social-icons.md similarity index 99% rename from docs/ui/plugins/social-icons.mdx rename to docs/ui/plugins/social-icons.md index 1ff5bc499..c3c21e2ef 100644 --- a/docs/ui/plugins/social-icons.mdx +++ b/docs/ui/plugins/social-icons.md @@ -4,6 +4,7 @@ summary: Social icons are a great way to make your website more engaging and use plugin: socials libs: tabler-socials description: Connect users to your social profiles. +layout: default --- ## Installation diff --git a/docs/ui/utilities/borders.mdx b/docs/ui/utilities/borders.md similarity index 99% rename from docs/ui/utilities/borders.mdx rename to docs/ui/utilities/borders.md index 4ef833def..16e195592 100644 --- a/docs/ui/utilities/borders.mdx +++ b/docs/ui/utilities/borders.md @@ -2,6 +2,7 @@ title: Borders summary: Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. description: Style elements with border utilities. +layout: default --- ## Border direction diff --git a/docs/ui/utilities/cursors.mdx b/docs/ui/utilities/cursors.md similarity index 99% rename from docs/ui/utilities/cursors.mdx rename to docs/ui/utilities/cursors.md index a9d4de93e..b2e9129df 100644 --- a/docs/ui/utilities/cursors.mdx +++ b/docs/ui/utilities/cursors.md @@ -2,6 +2,7 @@ title: Cursors summary: You can use different cursors to reflect the intended user interaction with particular elements of an interface. The cursor will change when a user hovers over a given element to indicate the action which can be performed. description: Custom cursors for enhanced interaction. +layout: default --- ## Cursor utilities diff --git a/docs/ui/utilities/index.mdx b/docs/ui/utilities/index.md similarity index 100% rename from docs/ui/utilities/index.mdx rename to docs/ui/utilities/index.md diff --git a/docs/ui/utilities/interactions.mdx b/docs/ui/utilities/interactions.md similarity index 98% rename from docs/ui/utilities/interactions.mdx rename to docs/ui/utilities/interactions.md index 5ae4d6f7f..85e449f28 100644 --- a/docs/ui/utilities/interactions.mdx +++ b/docs/ui/utilities/interactions.md @@ -2,6 +2,7 @@ title: Interactions summary: Utility classes that change how users interact with contents of a website. description: Modify user interactions efficiently. +layout: default --- ## Text selection diff --git a/docs/ui/utilities/margins.mdx b/docs/ui/utilities/margins.md similarity index 99% rename from docs/ui/utilities/margins.mdx rename to docs/ui/utilities/margins.md index dd32b607d..757c58910 100644 --- a/docs/ui/utilities/margins.mdx +++ b/docs/ui/utilities/margins.md @@ -2,6 +2,7 @@ title: Margins summary: Use margin utilities to control the space between elements. description: Control the space between elements with margin utilities. +layout: default --- Margin utilities allow you to control the space between elements, providing flexibility to suit different design needs. These utilities are especially useful for creating spacing between components or aligning them consistently. Below are examples of how to use margin utilities for various directions and sizes. diff --git a/docs/ui/utilities/vertical-align.mdx b/docs/ui/utilities/vertical-align.md similarity index 99% rename from docs/ui/utilities/vertical-align.mdx rename to docs/ui/utilities/vertical-align.md index 84690f98e..51026b81d 100644 --- a/docs/ui/utilities/vertical-align.mdx +++ b/docs/ui/utilities/vertical-align.md @@ -2,6 +2,7 @@ title: Vertical align description: Quickly and easily align elements vertically with utility classes. summary: Easily modify the vertical alignment of elements such as inline, inline-block, inline-table, and table-cell to ensure proper positioning and alignment within their parent containers, allowing for more precise control over your layout and design. +layout: default --- Choose from `.align-baseline`, `.align-top`, `.align-middle`, `.align-bottom`, `.align-text-bottom`, and `.align-text-top` as needed. diff --git a/docs/ui/utilities/visually-hidden.mdx b/docs/ui/utilities/visually-hidden.md similarity index 97% rename from docs/ui/utilities/visually-hidden.mdx rename to docs/ui/utilities/visually-hidden.md index 0d5eab902..dbe951621 100644 --- a/docs/ui/utilities/visually-hidden.mdx +++ b/docs/ui/utilities/visually-hidden.md @@ -1,6 +1,7 @@ --- title: Visually hidden summary: Use these helpers to visually hide elements but keep them accessible to assistive technologies. +layout: default --- Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `.visually-hidden`. Use `.visually-hidden-focusable` to visually hide an element by default, but to display it when it's focused (e.g. by a keyboard-only user). `.visually-hidden-focusable` can also be applied to a container–thanks to `:focus-within`, the container will be displayed when any child element of the container receives focus. diff --git a/package.json b/package.json index ed0bfe962..76aa9d790 100644 --- a/package.json +++ b/package.json @@ -3,10 +3,12 @@ "description": "Premium and Open Source dashboard template with responsive and high quality UI.", "homepage": "https://tabler.io", "scripts": { - "build": "turbo build", - "dev": "turbo dev", - "clean": "turbo clean", - "bundlewatch": "turbo bundlewatch", + "build": "turbo run build", + "dev": "turbo run dev", + "dev-preview": "turbo run preview#dev", + "dev-docs": "turbo run docs#dev", + "clean": "turbo run clean", + "bundlewatch": "turbo run bundlewatch", "version": "changeset version", "publish": "changeset publish", "reformat-mdx": "node build/reformat-mdx.mjs"