mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 10:48:14 +04:00
Enhance documentation (#2048)
This commit is contained in:
Paweł Kuna
GitHub
@@ -4,9 +4,11 @@ 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.
|
||||
---
|
||||
|
||||
As of this latest release, Tabler has launched many new features that may not be compatible with all browsers, especially older ones.
|
||||
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.
|
||||
|
||||
For instance, Tabler no longer uses **vendor prefixes** in styles that are known to have some compatibility issues except for a few parts. Tabler also supports new features such as **CSS grid**, **object fit**, and **sticky positioning** which is not yet supported on all browsers. In short, Tabler supports all the latest supported browsers with **only** partial support for Internet Explorer.
|
||||
In this latest release, Tabler introduces modern features like CSS Grid, object fit, and sticky positioning, which enhance design flexibility but may not be fully supported on older browsers. While Tabler has dropped most vendor prefixes to streamline its styles, partial support remains for Internet Explorer, with some features potentially limited.
|
||||
|
||||
For the best experience, we recommend using one of the latest supported browsers to take full advantage of Tabler’s capabilities and design precision.
|
||||
|
||||
## Supported Browsers
|
||||
|
||||
@@ -20,3 +22,7 @@ Browser|Version
|
||||
<img src="/docs/browsers/electron.svg" width="48" height="48" alt="Electron Logo"/>|last 3 versions
|
||||
<img src="/docs/browsers/brave.svg" width="48" height="48" alt="Brave Logo"/>|last 3 versions
|
||||
<img src="/docs/browsers/vivaldi.svg" width="48" height="48" alt="Vivaldi Logo"/>|last 3 versions
|
||||
|
||||
## Internet Explorer
|
||||
|
||||
Internet Explorer is not supported.
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
title: Development
|
||||
description: Learn how to install Tabler and set up the development environment.
|
||||
summary: This guide provides step-by-step instructions for setting up the environment, including installing Node.js, Ruby, and Bundler, configuring the build system, and running Tabler locally to preview changes in real-time, along with guidance on reporting bugs or submitting feature requests through GitHub.
|
||||
order: 11
|
||||
---
|
||||
|
||||
## Set up the environment
|
||||
|
||||
To use our build system and run our documentation locally, you'll need a copy of Tabler's source files. Follow the steps below:
|
||||
|
||||
1. [Install Node.js](https://nodejs.org/download/), which we use to manage our dependencies.
|
||||
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
|
||||
|
||||
1. From the root `/tabler` directory, run `npm run start` in the command line.
|
||||
2. Open [http://localhost:3000](http://localhost:3000) in your browser, and voilà.
|
||||
3. Any change in `/src` directory will build the application and refresh the page.
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
|
||||
96
docs/ui/getting-started/how-to-contribute.mdx
Normal file
96
docs/ui/getting-started/how-to-contribute.mdx
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
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.
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## Contribution Requirements
|
||||
|
||||
When contributing to Tabler, please adhere to the following guidelines:
|
||||
|
||||
1. By submitting a contribution, you grant a non-exclusive license to the Tabler project to use your contribution in any context deemed appropriate.
|
||||
2. If your contribution includes content from other sources, it must be appropriately licensed under an open source license.
|
||||
3. Contributions must be submitted via GitHub pull requests.
|
||||
4. Ensure your code works in all supported browsers (refer to our [browser support documentation](/docs/ui/getting-started/browser-support)).
|
||||
|
||||
## Installation
|
||||
|
||||
Follow these steps to set up Tabler for development:
|
||||
|
||||
1. Fork the repository: [Guide to forking](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
||||
|
||||
2. Clone the repository to your local machine:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_USERNAME/tabler.git
|
||||
```
|
||||
|
||||
3. Create a new branch for your changes:
|
||||
|
||||
```bash
|
||||
git checkout -b your-branch-name
|
||||
```
|
||||
|
||||
## Development
|
||||
|
||||
To set up Tabler for development, follow these steps:
|
||||
|
||||
<div className="steps">
|
||||
|
||||
### Ensure Node.js and npm are installed
|
||||
|
||||
You’ll need Node.js (v20 or higher) and pnpm to compile Tabler’s files. If you don’t have them installed, download and install them from the official websites:
|
||||
|
||||
- [Node.js](https://nodejs.org/)
|
||||
- [pnpm](https://pnpm.io/)
|
||||
|
||||
### Install Ruby and Bundler
|
||||
|
||||
Tabler uses Ruby and Bundler to manage dependencies. Install Ruby and Bundler by following the instructions in the [Ruby documentation](https://www.ruby-lang.org/en/documentation/installation/) and the [Bundler website](https://bundler.io/).
|
||||
|
||||
### Install dependencies
|
||||
|
||||
Run the following command to install all required npm packages. We recommend using pnpm for faster installation:
|
||||
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Install Jekyll
|
||||
|
||||
Tabler uses Jekyll to build the documentation. Install Jekyll by running the following command:
|
||||
|
||||
```bash
|
||||
bundle install
|
||||
```
|
||||
|
||||
### Start developer mode
|
||||
|
||||
Use the following command to enable autocompilation with live reload. This will start a local server at `http://localhost:3000/`:
|
||||
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
|
||||
### Make changes
|
||||
|
||||
Make your changes in the appropriate folders, such as `./src/` or `./docs/`. Avoid modifying files in `./dist/`, as they are auto-generated during the build process and will be overwritten.
|
||||
</div>
|
||||
|
||||
## Compiling for Production
|
||||
|
||||
Before submitting a pull request, ensure your changes are properly compiled and tested:
|
||||
|
||||
1. Compile the production files
|
||||
|
||||
```bash
|
||||
pnpm run build
|
||||
```
|
||||
|
||||
2. Test all pages to confirm everything works as expected.
|
||||
|
||||
## Submitting Your Contribution
|
||||
|
||||
Once your changes are ready, create a pull request (PR) on GitHub. Make sure to include a clear and concise description of the changes and their purpose. Thank you for contributing to Tabler!
|
||||
67
docs/ui/getting-started/installation.mdx
Normal file
67
docs/ui/getting-started/installation.mdx
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
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."
|
||||
---
|
||||
|
||||
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!
|
||||
|
||||
<div className="steps">
|
||||
|
||||
### Step 1: Create a Basic HTML File
|
||||
|
||||
Begin by creating a new `index.html` file in the root of your project. This file will serve as the foundation for your Tabler-based interface. Include the basic HTML structure and a `<meta name="viewport">` tag for proper responsiveness:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Tabler demo</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, world!</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Step 2: Add Tabler CSS and JavaScript
|
||||
|
||||
Enhance your page by including Tabler's CSS and JavaScript files. Use the following links to load the core Tabler styles and scripts from the CDN:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
|
||||
<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
|
||||
```
|
||||
|
||||
Update your HTML file to include these resources:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Tabler Demo</title>
|
||||
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello, Tabler!</h1>
|
||||
<script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
|
||||
|
||||
You can also download the files and include them locally in your project. For more information, see the [Download](/docs/ui/getting-started/download) page.
|
||||
|
||||
### 3. Open in Your Browser
|
||||
|
||||
Save the file and open it in your browser. You should see your first Tabler-powered page! From here, you can start adding layouts and components to create a fully functional and visually appealing web application.
|
||||
|
||||
</div>
|
||||
|
||||
With these simple steps, you're ready to explore Tabler's features and build stunning web interfaces. For inspiration and guidance, you can view live demos at [preview.tabler.io](https://preview.tabler.io) and consult our [official documentation](https://tabler.io/docs) for detailed instructions and examples.
|
||||
30
docs/ui/getting-started/license.mdx
Normal file
30
docs/ui/getting-started/license.mdx
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
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."
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## What You Can Do with Tabler
|
||||
|
||||
The MIT license allows you to:
|
||||
- Use Tabler in **commercial projects**.
|
||||
- Use Tabler in **personal or private projects**.
|
||||
- **Modify and customize** the source code to fit your requirements.
|
||||
- **Distribute** the original or modified code.
|
||||
- **Sublicense**: Integrate Tabler into projects with a more restrictive license.
|
||||
|
||||
## What You Cannot Do with Tabler
|
||||
|
||||
- The software is provided **“as is”**, meaning you cannot hold the authors or contributors liable for any issues, bugs, or damages that may arise from its use.
|
||||
|
||||
## What You Must Do When Using Tabler
|
||||
|
||||
When using Tabler, you must:
|
||||
1. Include the **license notice** in all copies of the work.
|
||||
2. Include the **copyright notice** in all copies of the work, except for the footer of the example HTML pages provided in the repository.
|
||||
|
||||
For more details, please refer to the full [Tabler License](https://github.com/tabler/tabler/blob/main/LICENSE).
|
||||
|
||||
By adhering to these requirements, you help ensure the continued openness and usability of Tabler for everyone. Thank you for supporting open-source software!
|
||||
Reference in New Issue
Block a user