getting-started.html 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995
  1. <!doctype html>
  2. <!--
  3. * Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
  4. * @version 1.0.0-beta14
  5. * @link https://tabler.io
  6. * Copyright 2018-2022 The Tabler Authors
  7. * Copyright 2018-2022 codecalm.net Paweł Kuna
  8. * Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
  9. -->
  10. <html lang="en">
  11. <head>
  12. <meta charset="utf-8"/>
  13. <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
  14. <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  15. <title>Getting started - Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
  16. <!-- CSS files -->
  17. <link href="../dist/css/tabler.min.css?1666304673" rel="stylesheet"/>
  18. <link href="../dist/css/tabler-flags.min.css?1666304673" rel="stylesheet"/>
  19. <link href="../dist/css/tabler-payments.min.css?1666304673" rel="stylesheet"/>
  20. <link href="../dist/css/tabler-vendors.min.css?1666304673" rel="stylesheet"/>
  21. <link href="../dist/css/demo.min.css?1666304673" rel="stylesheet"/>
  22. <style>
  23. @import url('https://rsms.me/inter/inter.css');
  24. :root {
  25. --tblr-font-sans-serif: Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
  26. }
  27. </style>
  28. </head>
  29. <body >
  30. <script src="../dist/js/demo-theme.min.js?1666304673"></script>
  31. <div class="page">
  32. <!-- Navbar -->
  33. <header class="navbar navbar-expand-md navbar-light d-print-none">
  34. <div class="container-xl">
  35. <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
  36. <span class="navbar-toggler-icon"></span>
  37. </button>
  38. <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
  39. <a href="..">
  40. <img src="../static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
  41. </a>
  42. </h1>
  43. <div class="navbar-nav flex-row order-md-last">
  44. <div class="nav-item d-none d-md-flex me-3">
  45. <div class="btn-list">
  46. <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
  47. <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
  48. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
  49. Source code
  50. </a>
  51. <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
  52. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  53. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  54. Sponsor
  55. </a>
  56. </div>
  57. </div>
  58. <div class="d-none d-md-flex">
  59. <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
  60. data-bs-placement="bottom">
  61. <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
  62. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
  63. </a>
  64. <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
  65. data-bs-placement="bottom">
  66. <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
  67. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
  68. </a>
  69. <div class="nav-item dropdown d-none d-md-flex me-3">
  70. <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
  71. <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
  72. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
  73. <span class="badge bg-red"></span>
  74. </a>
  75. <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
  76. <div class="card">
  77. <div class="card-header">
  78. <h3 class="card-title">Last updates</h3>
  79. </div>
  80. <div class="list-group list-group-flush list-group-hoverable">
  81. <div class="list-group-item">
  82. <div class="row align-items-center">
  83. <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
  84. <div class="col text-truncate">
  85. <a href="#" class="text-body d-block">Example 1</a>
  86. <div class="d-block text-muted text-truncate mt-n1">
  87. Change deprecated html tags to text decoration classes (#29604)
  88. </div>
  89. </div>
  90. <div class="col-auto">
  91. <a href="#" class="list-group-item-actions">
  92. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  93. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  94. </a>
  95. </div>
  96. </div>
  97. </div>
  98. <div class="list-group-item">
  99. <div class="row align-items-center">
  100. <div class="col-auto"><span class="status-dot d-block"></span></div>
  101. <div class="col text-truncate">
  102. <a href="#" class="text-body d-block">Example 2</a>
  103. <div class="d-block text-muted text-truncate mt-n1">
  104. justify-content:between ⇒ justify-content:space-between (#29734)
  105. </div>
  106. </div>
  107. <div class="col-auto">
  108. <a href="#" class="list-group-item-actions show">
  109. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  110. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  111. </a>
  112. </div>
  113. </div>
  114. </div>
  115. <div class="list-group-item">
  116. <div class="row align-items-center">
  117. <div class="col-auto"><span class="status-dot d-block"></span></div>
  118. <div class="col text-truncate">
  119. <a href="#" class="text-body d-block">Example 3</a>
  120. <div class="d-block text-muted text-truncate mt-n1">
  121. Update change-version.js (#29736)
  122. </div>
  123. </div>
  124. <div class="col-auto">
  125. <a href="#" class="list-group-item-actions">
  126. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  127. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  128. </a>
  129. </div>
  130. </div>
  131. </div>
  132. <div class="list-group-item">
  133. <div class="row align-items-center">
  134. <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
  135. <div class="col text-truncate">
  136. <a href="#" class="text-body d-block">Example 4</a>
  137. <div class="d-block text-muted text-truncate mt-n1">
  138. Regenerate package-lock.json (#29730)
  139. </div>
  140. </div>
  141. <div class="col-auto">
  142. <a href="#" class="list-group-item-actions">
  143. <!-- Download SVG icon from http://tabler-icons.io/i/star -->
  144. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  145. </a>
  146. </div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="nav-item dropdown">
  155. <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
  156. <span class="avatar avatar-sm" style="background-image: url(../static/avatars/000m.jpg)"></span>
  157. <div class="d-none d-xl-block ps-2">
  158. <div>Paweł Kuna</div>
  159. <div class="mt-1 small text-muted">UI Designer</div>
  160. </div>
  161. </a>
  162. <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
  163. <a href="#" class="dropdown-item">Status</a>
  164. <a href="#" class="dropdown-item">Profile</a>
  165. <a href="#" class="dropdown-item">Feedback</a>
  166. <div class="dropdown-divider"></div>
  167. <a href="../settings.html" class="dropdown-item">Settings</a>
  168. <a href="../sign-in.html" class="dropdown-item">Logout</a>
  169. </div>
  170. </div>
  171. </div>
  172. </div>
  173. </header>
  174. <div class="navbar-expand-md">
  175. <div class="collapse navbar-collapse" id="navbar-menu">
  176. <div class="navbar navbar-light">
  177. <div class="container-xl">
  178. <ul class="navbar-nav">
  179. <li class="nav-item">
  180. <a class="nav-link" href="../index.html" >
  181. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
  182. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="5 12 3 12 12 3 21 12 19 12" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
  183. </span>
  184. <span class="nav-link-title">
  185. Home
  186. </span>
  187. </a>
  188. </li>
  189. <li class="nav-item dropdown">
  190. <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  191. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
  192. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5 12 3" /><line x1="12" y1="12" x2="20" y2="7.5" /><line x1="12" y1="12" x2="12" y2="21" /><line x1="12" y1="12" x2="4" y2="7.5" /><line x1="16" y1="5.25" x2="8" y2="9.75" /></svg>
  193. </span>
  194. <span class="nav-link-title">
  195. Interface
  196. </span>
  197. </a>
  198. <div class="dropdown-menu">
  199. <div class="dropdown-menu-columns">
  200. <div class="dropdown-menu-column">
  201. <a class="dropdown-item" href="../empty.html">
  202. Empty page
  203. </a>
  204. <a class="dropdown-item" href="../accordion.html">
  205. Accordion
  206. </a>
  207. <a class="dropdown-item" href="../blank.html">
  208. Blank page
  209. </a>
  210. <a class="dropdown-item" href="../buttons.html">
  211. Buttons
  212. </a>
  213. <div class="dropend">
  214. <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  215. Cards
  216. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  217. </a>
  218. <div class="dropdown-menu">
  219. <a href="../cards.html" class="dropdown-item">
  220. Sample cards
  221. </a>
  222. <a href="../card-actions.html" class="dropdown-item">
  223. Card actions
  224. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  225. </a>
  226. <a href="../cards-masonry.html" class="dropdown-item">
  227. Cards Masonry
  228. </a>
  229. </div>
  230. </div>
  231. <a class="dropdown-item" href="../colors.html">
  232. Colors
  233. </a>
  234. <a class="dropdown-item" href="../datagrid.html">
  235. Data grid
  236. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  237. </a>
  238. <a class="dropdown-item" href="../datatables.html">
  239. Datatables
  240. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  241. </a>
  242. <a class="dropdown-item" href="../dropdowns.html">
  243. Dropdowns
  244. </a>
  245. <a class="dropdown-item" href="../modals.html">
  246. Modals
  247. </a>
  248. <a class="dropdown-item" href="../maps.html">
  249. Maps
  250. </a>
  251. <a class="dropdown-item" href="../map-fullsize.html">
  252. Map fullsize
  253. </a>
  254. <a class="dropdown-item" href="../maps-vector.html">
  255. Vector maps
  256. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  257. </a>
  258. <a class="dropdown-item" href="../navigation.html">
  259. Navigation
  260. </a>
  261. <a class="dropdown-item" href="../charts.html">
  262. Charts
  263. </a>
  264. </div>
  265. <div class="dropdown-menu-column">
  266. <a class="dropdown-item" href="../pagination.html">
  267. <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
  268. Pagination
  269. </a>
  270. <a class="dropdown-item" href="../placeholder.html">
  271. Placeholder
  272. </a>
  273. <a class="dropdown-item" href="../tabs.html">
  274. Tabs
  275. </a>
  276. <a class="dropdown-item" href="../tables.html">
  277. Tables
  278. </a>
  279. <a class="dropdown-item" href="../carousel.html">
  280. Carousel
  281. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  282. </a>
  283. <a class="dropdown-item" href="../lists.html">
  284. Lists
  285. </a>
  286. <a class="dropdown-item" href="../typography.html">
  287. Typography
  288. </a>
  289. <a class="dropdown-item" href="../offcanvas.html">
  290. Offcanvas
  291. </a>
  292. <a class="dropdown-item" href="../markdown.html">
  293. Markdown
  294. </a>
  295. <a class="dropdown-item" href="../dropzone.html">
  296. Dropzone
  297. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  298. </a>
  299. <a class="dropdown-item" href="../lightbox.html">
  300. Lightbox
  301. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  302. </a>
  303. <a class="dropdown-item" href="../tinymce.html">
  304. TinyMCE
  305. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  306. </a>
  307. <a class="dropdown-item" href="../inline-player.html">
  308. Inline player
  309. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  310. </a>
  311. <div class="dropend">
  312. <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  313. Authentication
  314. </a>
  315. <div class="dropdown-menu">
  316. <a href="../sign-in.html" class="dropdown-item">
  317. Sign in
  318. </a>
  319. <a href="../sign-in-illustration.html" class="dropdown-item">
  320. Sign in with illustration
  321. </a>
  322. <a href="../sign-in-cover.html" class="dropdown-item">
  323. Sign in with cover
  324. </a>
  325. <a href="../sign-up.html" class="dropdown-item">
  326. Sign up
  327. </a>
  328. <a href="../forgot-password.html" class="dropdown-item">
  329. Forgot password
  330. </a>
  331. <a href="../terms-of-service.html" class="dropdown-item">
  332. Terms of service
  333. </a>
  334. <a href="../auth-lock.html" class="dropdown-item">
  335. Lock screen
  336. </a>
  337. </div>
  338. </div>
  339. <div class="dropend">
  340. <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  341. <!-- Download SVG icon from http://tabler-icons.io/i/file-minus -->
  342. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><line x1="9" y1="14" x2="15" y2="14" /></svg>
  343. Error pages
  344. </a>
  345. <div class="dropdown-menu">
  346. <a href="../error-404.html" class="dropdown-item">
  347. 404 page
  348. </a>
  349. <a href="../error-500.html" class="dropdown-item">
  350. 500 page
  351. </a>
  352. <a href="../error-maintenance.html" class="dropdown-item">
  353. Maintenance page
  354. </a>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. </div>
  360. </li>
  361. <li class="nav-item">
  362. <a class="nav-link" href="../form-elements.html" >
  363. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
  364. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><polyline points="9 11 12 14 20 6" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
  365. </span>
  366. <span class="nav-link-title">
  367. Form elements
  368. </span>
  369. </a>
  370. </li>
  371. <li class="nav-item dropdown">
  372. <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  373. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
  374. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
  375. </span>
  376. <span class="nav-link-title">
  377. Extra
  378. </span>
  379. </a>
  380. <div class="dropdown-menu">
  381. <div class="dropdown-menu-columns">
  382. <div class="dropdown-menu-column">
  383. <a class="dropdown-item" href="../activity.html">
  384. Activity
  385. </a>
  386. <a class="dropdown-item" href="../gallery.html">
  387. Gallery
  388. </a>
  389. <a class="dropdown-item" href="../invoice.html">
  390. Invoice
  391. </a>
  392. <a class="dropdown-item" href="../search-results.html">
  393. Search results
  394. </a>
  395. <a class="dropdown-item" href="../pricing.html">
  396. Pricing cards
  397. </a>
  398. <a class="dropdown-item" href="../pricing-table.html">
  399. Pricing table
  400. </a>
  401. <a class="dropdown-item" href="../faq.html">
  402. FAQ
  403. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  404. </a>
  405. <a class="dropdown-item" href="../users.html">
  406. Users
  407. </a>
  408. <a class="dropdown-item" href="../license.html">
  409. License
  410. </a>
  411. </div>
  412. <div class="dropdown-menu-column">
  413. <a class="dropdown-item" href="../logs.html">
  414. Logs
  415. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  416. </a>
  417. <a class="dropdown-item" href="../music.html">
  418. Music
  419. </a>
  420. <a class="dropdown-item" href="../tasks.html">
  421. Tasks
  422. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  423. </a>
  424. <a class="dropdown-item" href="../uptime.html">
  425. Uptime monitor
  426. </a>
  427. <a class="dropdown-item" href="../widgets.html">
  428. Widgets
  429. </a>
  430. <a class="dropdown-item" href="../wizard.html">
  431. Wizard
  432. </a>
  433. <a class="dropdown-item" href="../settings.html">
  434. Settings
  435. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  436. </a>
  437. <a class="dropdown-item" href="../job-listing.html">
  438. Job listing
  439. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  440. </a>
  441. </div>
  442. </div>
  443. </div>
  444. </li>
  445. <li class="nav-item dropdown">
  446. <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  447. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
  448. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="4" y="4" width="6" height="5" rx="2" /><rect x="4" y="13" width="6" height="7" rx="2" /><rect x="14" y="4" width="6" height="7" rx="2" /><rect x="14" y="15" width="6" height="5" rx="2" /></svg>
  449. </span>
  450. <span class="nav-link-title">
  451. Layout
  452. </span>
  453. </a>
  454. <div class="dropdown-menu">
  455. <div class="dropdown-menu-columns">
  456. <div class="dropdown-menu-column">
  457. <a class="dropdown-item" href="../layout-horizontal.html">
  458. Horizontal
  459. </a>
  460. <a class="dropdown-item" href="../layout-boxed.html">
  461. Boxed
  462. <span class="badge badge-sm bg-green text-uppercase ms-2">New</span>
  463. </a>
  464. <a class="dropdown-item" href="../layout-vertical.html">
  465. Vertical
  466. </a>
  467. <a class="dropdown-item" href="../layout-vertical-transparent.html">
  468. Vertical transparent
  469. </a>
  470. <a class="dropdown-item" href="../layout-vertical-right.html">
  471. Right vertical
  472. </a>
  473. <a class="dropdown-item" href="../layout-condensed.html">
  474. Condensed
  475. </a>
  476. <a class="dropdown-item" href="../layout-combo.html">
  477. Combined
  478. </a>
  479. </div>
  480. <div class="dropdown-menu-column">
  481. <a class="dropdown-item" href="../layout-navbar-dark.html">
  482. Navbar dark
  483. </a>
  484. <a class="dropdown-item" href="../layout-navbar-sticky.html">
  485. Navbar sticky
  486. </a>
  487. <a class="dropdown-item" href="../layout-navbar-overlap.html">
  488. Navbar overlap
  489. </a>
  490. <a class="dropdown-item" href="../layout-rtl.html">
  491. RTL mode
  492. </a>
  493. <a class="dropdown-item" href="../layout-fluid.html">
  494. Fluid
  495. </a>
  496. <a class="dropdown-item" href="../layout-fluid-vertical.html">
  497. Fluid vertical
  498. </a>
  499. </div>
  500. </div>
  501. </div>
  502. </li>
  503. <li class="nav-item">
  504. <a class="nav-link" href="../icons.html" >
  505. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
  506. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><line x1="10" y1="10" x2="10.01" y2="10" /><line x1="14" y1="10" x2="14.01" y2="10" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
  507. </span>
  508. <span class="nav-link-title">
  509. 2853 icons
  510. </span>
  511. </a>
  512. </li>
  513. <li class="nav-item active dropdown">
  514. <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
  515. <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
  516. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="4" /><circle cx="12" cy="12" r="9" /><line x1="15" y1="15" x2="18.35" y2="18.35" /><line x1="9" y1="15" x2="5.65" y2="18.35" /><line x1="5.65" y1="5.65" x2="9" y2="9" /><line x1="18.35" y1="5.65" x2="15" y2="9" /></svg>
  517. </span>
  518. <span class="nav-link-title">
  519. Help
  520. </span>
  521. </a>
  522. <div class="dropdown-menu">
  523. <a class="dropdown-item" href="../docs/index.html">
  524. Documentation
  525. </a>
  526. <a class="dropdown-item" href="../changelog.html">
  527. Changelog
  528. </a>
  529. <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
  530. Source code
  531. </a>
  532. <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
  533. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  534. <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  535. Sponsor project!
  536. </a>
  537. </div>
  538. </li>
  539. </ul>
  540. <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
  541. <form action="../" method="get" autocomplete="off" novalidate>
  542. <div class="input-icon">
  543. <span class="input-icon-addon">
  544. <!-- Download SVG icon from http://tabler-icons.io/i/search -->
  545. <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>
  546. </span>
  547. <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
  548. </div>
  549. </form>
  550. </div>
  551. </div>
  552. </div>
  553. </div>
  554. </div>
  555. <div class="page-wrapper">
  556. <!-- Page header -->
  557. <div class="page-header d-print-none">
  558. <div class="container-xl">
  559. <div class="row g-2 align-items-center">
  560. <div class="col">
  561. <h2 class="page-title">
  562. Documentation
  563. </h2>
  564. </div>
  565. </div>
  566. </div>
  567. </div>
  568. <!-- Page body -->
  569. <div class="page-body">
  570. <div class="container-xl">
  571. <div class="row gx-lg-5">
  572. <div class="d-none d-lg-block col-lg-3">
  573. <ul class="nav nav-pills nav-vertical">
  574. <li class="nav-item">
  575. <a href="../docs/" class="nav-link">
  576. Introduction
  577. </a>
  578. </li>
  579. <li class="nav-item">
  580. <a href="#menu-base" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  581. Getting started
  582. <span class="nav-link-toggle"></span>
  583. </a>
  584. <ul class="nav nav-pills collapse" id="menu-base">
  585. <li class="nav-item">
  586. <a href="../docs/getting-started.html" class="nav-link">
  587. Getting Started
  588. </a>
  589. </li>
  590. <li class="nav-item">
  591. <a href="../docs/download.html" class="nav-link">
  592. Download
  593. </a>
  594. </li>
  595. <li class="nav-item">
  596. <a href="../docs/browser-support.html" class="nav-link">
  597. Browser Support
  598. </a>
  599. </li>
  600. </ul>
  601. </li>
  602. <li class="nav-item">
  603. <a href="#menu-content" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  604. Content
  605. <span class="nav-link-toggle"></span>
  606. </a>
  607. <ul class="nav nav-pills collapse" id="menu-content">
  608. <li class="nav-item">
  609. <a href="../docs/colors.html" class="nav-link">
  610. Colors
  611. </a>
  612. </li>
  613. <li class="nav-item">
  614. <a href="../docs/typography.html" class="nav-link">
  615. Typography
  616. </a>
  617. </li>
  618. <li class="nav-item">
  619. <a href="../docs/icons.html" class="nav-link">
  620. Icons
  621. </a>
  622. </li>
  623. <li class="nav-item">
  624. <a href="../docs/customize.html" class="nav-link">
  625. Customize Tabler
  626. </a>
  627. </li>
  628. </ul>
  629. </li>
  630. <li class="nav-item">
  631. <a href="#menu-layout" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  632. Layout
  633. <span class="nav-link-toggle"></span>
  634. </a>
  635. <ul class="nav nav-pills collapse" id="menu-layout">
  636. <li class="nav-item">
  637. <a href="../docs/page-headers.html" class="nav-link">
  638. Page headers
  639. </a>
  640. </li>
  641. </ul>
  642. </li>
  643. <li class="nav-item">
  644. <a href="#menu-forms" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  645. Form components
  646. <span class="nav-link-toggle"></span>
  647. </a>
  648. <ul class="nav nav-pills collapse" id="menu-forms">
  649. <li class="nav-item">
  650. <a href="../docs/form-elements.html" class="nav-link">
  651. Form elements
  652. </a>
  653. </li>
  654. <li class="nav-item">
  655. <a href="../docs/form-helpers.html" class="nav-link">
  656. Form helpers
  657. </a>
  658. </li>
  659. <li class="nav-item">
  660. <a href="../docs/form-validation.html" class="nav-link">
  661. Validation states
  662. </a>
  663. </li>
  664. <li class="nav-item">
  665. <a href="../docs/form-image-check.html" class="nav-link">
  666. Image check
  667. </a>
  668. </li>
  669. <li class="nav-item">
  670. <a href="../docs/form-color-check.html" class="nav-link">
  671. Color check
  672. </a>
  673. </li>
  674. <li class="nav-item">
  675. <a href="../docs/form-selectboxes.html" class="nav-link">
  676. Form selectboxes
  677. </a>
  678. </li>
  679. <li class="nav-item">
  680. <a href="../docs/form-fieldset.html" class="nav-link">
  681. Form fieldset
  682. </a>
  683. </li>
  684. </ul>
  685. </li>
  686. <li class="nav-item">
  687. <a href="#menu-components" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  688. Components
  689. <span class="nav-link-toggle"></span>
  690. </a>
  691. <ul class="nav nav-pills collapse" id="menu-components">
  692. <li class="nav-item">
  693. <a href="../docs/alerts.html" class="nav-link">
  694. Alerts
  695. </a>
  696. </li>
  697. <li class="nav-item">
  698. <a href="../docs/avatars.html" class="nav-link">
  699. Avatars
  700. </a>
  701. </li>
  702. <li class="nav-item">
  703. <a href="../docs/badges.html" class="nav-link">
  704. Badges
  705. </a>
  706. </li>
  707. <li class="nav-item">
  708. <a href="../docs/breadcrumb.html" class="nav-link">
  709. Breadcrumb
  710. </a>
  711. </li>
  712. <li class="nav-item">
  713. <a href="../docs/buttons.html" class="nav-link">
  714. Buttons
  715. </a>
  716. </li>
  717. <li class="nav-item">
  718. <a href="../docs/cards.html" class="nav-link">
  719. Cards
  720. </a>
  721. </li>
  722. <li class="nav-item">
  723. <a href="../docs/carousel.html" class="nav-link">
  724. Carousel
  725. </a>
  726. </li>
  727. <li class="nav-item">
  728. <a href="../docs/datagrid.html" class="nav-link">
  729. Data grid
  730. </a>
  731. </li>
  732. <li class="nav-item">
  733. <a href="../docs/dropdowns.html" class="nav-link">
  734. Dropdowns
  735. </a>
  736. </li>
  737. <li class="nav-item">
  738. <a href="../docs/divider.html" class="nav-link">
  739. Divider
  740. </a>
  741. </li>
  742. <li class="nav-item">
  743. <a href="../docs/empty.html" class="nav-link">
  744. Empty states
  745. </a>
  746. </li>
  747. <li class="nav-item">
  748. <a href="../docs/modals.html" class="nav-link">
  749. Modals
  750. </a>
  751. </li>
  752. <li class="nav-item">
  753. <a href="../docs/page-headers.html" class="nav-link">
  754. Page headers
  755. </a>
  756. </li>
  757. <li class="nav-item">
  758. <a href="../docs/progress.html" class="nav-link">
  759. Progress
  760. </a>
  761. </li>
  762. <li class="nav-item">
  763. <a href="../docs/range-slider.html" class="nav-link">
  764. Range slider
  765. </a>
  766. </li>
  767. <li class="nav-item">
  768. <a href="../docs/ribbons.html" class="nav-link">
  769. Ribbons
  770. </a>
  771. </li>
  772. <li class="nav-item">
  773. <a href="../docs/placeholder.html" class="nav-link">
  774. Placeholder
  775. </a>
  776. </li>
  777. <li class="nav-item">
  778. <a href="../docs/spinners.html" class="nav-link">
  779. Spinners
  780. </a>
  781. </li>
  782. <li class="nav-item">
  783. <a href="../docs/statuses.html" class="nav-link">
  784. Statuses
  785. </a>
  786. </li>
  787. <li class="nav-item">
  788. <a href="../docs/steps.html" class="nav-link">
  789. Steps
  790. </a>
  791. </li>
  792. <li class="nav-item">
  793. <a href="../docs/switch-icon.html" class="nav-link">
  794. Switch icon
  795. </a>
  796. </li>
  797. <li class="nav-item">
  798. <a href="../docs/tables.html" class="nav-link">
  799. Tables
  800. </a>
  801. </li>
  802. <li class="nav-item">
  803. <a href="../docs/tabs.html" class="nav-link">
  804. Tabs
  805. </a>
  806. </li>
  807. <li class="nav-item">
  808. <a href="../docs/timelines.html" class="nav-link">
  809. Timelines
  810. </a>
  811. </li>
  812. <li class="nav-item">
  813. <a href="../docs/toasts.html" class="nav-link">
  814. Toasts
  815. </a>
  816. </li>
  817. <li class="nav-item">
  818. <a href="../docs/tracking.html" class="nav-link">
  819. Tracking
  820. </a>
  821. </li>
  822. <li class="nav-item">
  823. <a href="../docs/tooltips.html" class="nav-link">
  824. Tooltips
  825. </a>
  826. </li>
  827. <li class="nav-item">
  828. <a href="../docs/popover.html" class="nav-link">
  829. Popover
  830. </a>
  831. </li>
  832. </ul>
  833. </li>
  834. <li class="nav-item">
  835. <a href="#menu-utils" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  836. Utilities
  837. <span class="nav-link-toggle"></span>
  838. </a>
  839. <ul class="nav nav-pills collapse" id="menu-utils">
  840. <li class="nav-item">
  841. <a href="../docs/borders.html" class="nav-link">
  842. Borders
  843. </a>
  844. </li>
  845. <li class="nav-item">
  846. <a href="../docs/cursors.html" class="nav-link">
  847. Cursors
  848. </a>
  849. </li>
  850. <li class="nav-item">
  851. <a href="../docs/interactions.html" class="nav-link">
  852. Interactions
  853. </a>
  854. </li>
  855. </ul>
  856. </li>
  857. <li class="nav-item">
  858. <a href="#menu-plugins" class="nav-link" data-bs-toggle="collapse" aria-expanded="false">
  859. Plugins
  860. <span class="nav-link-toggle"></span>
  861. </a>
  862. <ul class="nav nav-pills collapse" id="menu-plugins">
  863. <li class="nav-item">
  864. <a href="../docs/autosize.html" class="nav-link">
  865. Autosize
  866. </a>
  867. </li>
  868. <li class="nav-item">
  869. <a href="../docs/input-mask.html" class="nav-link">
  870. Form input mask
  871. </a>
  872. </li>
  873. <li class="nav-item">
  874. <a href="../docs/flags.html" class="nav-link">
  875. Flags
  876. </a>
  877. </li>
  878. <li class="nav-item">
  879. <a href="../docs/payments.html" class="nav-link">
  880. Payments
  881. </a>
  882. </li>
  883. <li class="nav-item">
  884. <a href="../docs/charts.html" class="nav-link">
  885. Charts
  886. </a>
  887. </li>
  888. <li class="nav-item">
  889. <a href="../docs/dropzone.html" class="nav-link">
  890. Dropzone
  891. </a>
  892. </li>
  893. <li class="nav-item">
  894. <a href="../docs/inline-player.html" class="nav-link">
  895. Inline player
  896. </a>
  897. </li>
  898. <li class="nav-item">
  899. <a href="../docs/tinymce.html" class="nav-link">
  900. TinyMCE
  901. </a>
  902. </li>
  903. </ul>
  904. </li>
  905. <li class="nav-item">
  906. <a href="../changelog.html" class="nav-link">
  907. Changelog
  908. <span class="badge bg-primary-lt ms-auto">1.0.0-beta14</span>
  909. </a>
  910. </li>
  911. </ul>
  912. </div>
  913. <div class="col-lg-9">
  914. <div class="card card-lg">
  915. <div class="card-body">
  916. <div class="markdown">
  917. <div>
  918. <div class="d-flex mb-3">
  919. <h1 class="m-0">Getting started</h1>
  920. </div>
  921. </div>
  922. <h2 id="what-are-the-benefits">What are the benefits?</h2>
  923. <p>Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully responsive. Thanks to the big choice of ready-made components, you can customize your design and adapt it to the needs of even the most demanding users. On top of that, Tabler is an open source solution, continuously developed and improved by the open source community.</p>
  924. <h2 id="set-up-the-environment">Set up the environment</h2>
  925. <p>To use our build system and run our documentation locally, you’ll need a copy of Tabler’s source files. Follow the steps below:</p>
  926. <ol>
  927. <li><a href="https://nodejs.org/download/">Install Node.js</a>, which we use to manage our dependencies.</li>
  928. <li>Navigate to the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory and run <code class="language-plaintext highlighter-rouge">npm install</code> to install our local dependencies listed in <code class="language-plaintext highlighter-rouge">package.json</code>.</li>
  929. <li><a href="https://ruby-lang.org/en/documentation/installation/">Install Ruby</a> - the recommended version is <a href="https://cache.ruby-lang.org/pub/ruby/2.5/ruby-2.5.5.tar.gz">2.5.5</a>.</li>
  930. <li><a href="https://bundler.io">Install Bundler</a> with <code class="language-plaintext highlighter-rouge">gem install bundler</code> and, finally, run <code class="language-plaintext highlighter-rouge">bundle install</code>. It will install all Ruby dependencies, such as <a href="https://jekyllrb.com">Jekyll and plugins</a>.</li>
  931. </ol>
  932. <h3 id="windows-users">Windows users</h3>
  933. <ol>
  934. <li><a href="https://git-scm.com/download/win">Install Git</a> in <code class="language-plaintext highlighter-rouge">C:\Program Files\git\bin</code> directory and run <code class="language-plaintext highlighter-rouge">npm config set script-shell "C:\Program Files\git\bin\bash.exe"</code> to change the default shell.</li>
  935. <li><a href="https://rubyinstaller.org/downloads/">Install Ruby+Devkit</a> - recommended version is <a href="https://github.com/oneclick/rubyinstaller2/releases/download/RubyInstaller-2.5.5-1/rubyinstaller-devkit-2.5.5-1-x86.exe">2.5.5</a>.</li>
  936. <li><a href="https://jekyllrb.com/docs/installation/windows/">Read guide</a> to get Jekyll up and running without problems.</li>
  937. </ol>
  938. <p>Once you’ve completed the setup, you’ll be able to run the various commands provided from the command line.</p>
  939. <h2 id="build-tabler-locally">Build Tabler locally</h2>
  940. <ol>
  941. <li>From the root <code class="language-plaintext highlighter-rouge">/tabler</code> directory, run <code class="language-plaintext highlighter-rouge">npm run start</code> in the command line.</li>
  942. <li>Open <a href="http://localhost:3000">http://localhost:3000</a> in your browser, and voilà.</li>
  943. <li>Any change in <code class="language-plaintext highlighter-rouge">/src</code> directory will build the application and refresh the page.</li>
  944. </ol>
  945. <h2 id="bugs-and-feature-requests">Bugs and feature requests</h2>
  946. <p>Found a bug or have a feature request? <a href="https://github.com/tabler/tabler/issues/new">Please open a new issue</a>.</p>
  947. </div>
  948. </div>
  949. </div>
  950. </div>
  951. </div>
  952. </div>
  953. </div>
  954. <footer class="footer footer-transparent d-print-none">
  955. <div class="container-xl">
  956. <div class="row text-center align-items-center flex-row-reverse">
  957. <div class="col-lg-auto ms-lg-auto">
  958. <ul class="list-inline list-inline-dots mb-0">
  959. <li class="list-inline-item"><a href="../docs/index.html" class="link-secondary">Documentation</a></li>
  960. <li class="list-inline-item"><a href="../license.html" class="link-secondary">License</a></li>
  961. <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
  962. <li class="list-inline-item">
  963. <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
  964. <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
  965. <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
  966. Sponsor
  967. </a>
  968. </li>
  969. </ul>
  970. </div>
  971. <div class="col-12 col-lg-auto mt-3 mt-lg-0">
  972. <ul class="list-inline list-inline-dots mb-0">
  973. <li class="list-inline-item">
  974. Copyright &copy; 2022
  975. <a href=".." class="link-secondary">Tabler</a>.
  976. All rights reserved.
  977. </li>
  978. <li class="list-inline-item">
  979. <a href="../changelog.html" class="link-secondary" rel="noopener">
  980. v1.0.0-beta14
  981. </a>
  982. </li>
  983. </ul>
  984. </div>
  985. </div>
  986. </div>
  987. </footer>
  988. </div>
  989. </div>
  990. <!-- Libs JS -->
  991. <!-- Tabler Core -->
  992. <script src="../dist/js/tabler.min.js?1666304673" defer></script>
  993. <script src="../dist/js/demo.min.js?1666304673" defer></script>
  994. </body>
  995. </html>