Home Explore Help
Sign In
SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git
1
0
Fork 0
Files
Tree: 26e2fb08f7
Branches Tags
tabler
/
docs
/
ui
/
getting-started
/
installation.mdx

installation.mdx 2.6 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 
  1. ---
    2. 

  2. title: Installation
    3. 

  3. order: 1
    4. 

  4. 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.
    5. 

  5. description: "Set up Tabler: HTML, CSS, JS, and build stunning UIs."
    6. 

  6. ---
    7. 

  7. 

  8. 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!
    9. 

  9. 

  10. <div className="steps">
    11. 

  11. 

  12. ### Step 1: Create a Basic HTML File
    13. 

  13. 

  14. 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:
    15. 

  15. 

  16. ```html
    17. 

  17. <!doctype html>
    18. 

  18. <html lang="en">
    19. 

  19. <head>
    20. 

  20.   <meta charset="utf-8">
    21. 

  21.   <meta name="viewport" content="width=device-width, initial-scale=1">
    22. 

  22.   <title>Tabler demo</title>
    23. 

  23. </head>
    24. 

  24. <body>
    25. 

  25.   <h1>Hello, world!</h1>
    26. 

  26. </body>
    27. 

  27. </html>
    28. 

  28. ```
    29. 

  29. 

  30. ### Step 2: Add Tabler CSS and JavaScript
    31. 

  31. 

  32. 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:
    33. 

  33. 

  34. ```html
    35. 

  35. <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
    36. 

  36. <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
    37. 

  37. ```
    38. 

  38. 

  39. Update your HTML file to include these resources:
    40. 

  40. 

  41. ```html
    42. 

  42. <!doctype html>
    43. 

  43. <html lang="en">
    44. 

  44. <head>
    45. 

  45.   <meta charset="utf-8">
    46. 

  46.   <meta name="viewport" content="width=device-width, initial-scale=1">
    47. 

  47.   <title>Tabler Demo</title>
    48. 

  48.   <link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler.min.css">
    49. 

  49. </head>
    50. 

  50. <body>
    51. 

  51.   <h1>Hello, Tabler!</h1>
    52. 

  52.   <script src="$TABLER_CDN/dist/js/tabler.min.js"></script>
    53. 

  53. </body>
    54. 

  54. </html>
    55. 

  55. ```
    56. 

  56. 

  57. This setup includes the Tabler CSS and JavaScript via a CDN, providing a responsive and functional base for your project.
    58. 

  58. 

  59. 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.
    60. 

  60. 

  61. ### 3. Open in Your Browser
    62. 

  62. 

  63. 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.
    64. 

  64. 

  65. </div>
    66. 

  66. 

  67. 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.
    68.