<ahref="https://www.npmjs.com/package/tabler"><ahref="#backers"alt="sponsors on Open Collective"><imgsrc="https://opencollective.com/tabler/backers/badge.svg"/></a><ahref="#sponsors"alt="Sponsors on Open Collective"><imgsrc="https://opencollective.com/tabler/sponsors/badge.svg"/></a><imgsrc="https://img.shields.io/npm/dt/tabler.svg"alt="Total Downloads"></a><ahref="https://github.com/tabler/tabler/blob/master/LICENSE"><imgsrc="https://img.shields.io/npm/l/tabler.svg"alt="License"></a><ahref="https://github.com/tabler/tabler/releases"><imgsrc="https://img.shields.io/npm/v/tabler.svg"alt="Latest Release"></a>
...
...
@@ -13,6 +14,7 @@ A premium and open source dashboard template with a responsive and high-quality
[](#backers)
[](#sponsors)
## Features
We've created this admin panel for everyone who wants to create templates based on our pre-made components. Our mission is to deliver a user-friendly, clear and easy administration panel that can be used by both simple websites and sophisticated systems. The only requirement is basic HTML and CSS (and some [Liquid](https://github.com/Shopify/liquid/wiki)) knowledge — as a reward, you'll be able to manage and visualise different types of data in the easiest possible way!
...
...
@@ -24,10 +26,12 @@ We've created this admin panel for everyone who wants to create templates based
***Demo pages**: Tabler features over 20 individual pages using various components, which gives you the freedom to choose and combine. All components can vary in color and styling that you can easily modify using Sass. Sky is the limit!
***Single Page Application versions:**[Tabler React](https://github.com/tabler/tabler-react) has React components for Tabler.
Code and documentation copyright 2018 the [Tabler Authors](https://github.com/tabler/tabler/graphs/contributors) and [codecalm.net](https://codecalm.net). Code released under the [MIT License](https://github.com/tabler/tabler/blob/master/LICENSE).
The dividers are automatically created in the content of the `:before` pseudo-element of li tags. You can inform the current page using the `active` modifier in a `li` tag. It will disable the navigation of inner links.
{% capture code %}
...
...
@@ -15,6 +15,7 @@ The dividers are automatically created in the content of the `:before` pseudo-el
{% endcapture %}
{% include example.html code=code centered=true %}
## Breadcrumb variations
You can add more variations by modify `$breadcrumb-variants` variable in Tabler config.
...
...
@@ -34,6 +35,7 @@ You can add more variations by modify `$breadcrumb-variants` variable in Tabler
{% endcapture %}
{% include example.html code=code centered=true %}
The `.btn` classes are designed to be used with the `<button>` element. However, you can also use these classes on `<a>` or `<input>` elements (though some browsers may apply a slightly different rendering).
...
...
@@ -33,6 +34,7 @@ Use any of the available button classes to quickly create a styled button . We p
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Disabled buttons
Make buttons look inactive by adding the disabled boolean attribute to any `.btn` element. `<a>`s don’t support the disabled attribute, so you must add the `.disabled` class to make it visually appear disabled.
...
...
@@ -46,6 +48,7 @@ Make buttons look inactive by adding the disabled boolean attribute to any `.btn
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Color variations
The classic button, in different colors.
...
...
@@ -57,6 +60,7 @@ The classic button, in different colors.
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Ghost Buttons
Use `.btn-ghost-*` class for ghost buttons.
...
...
@@ -68,6 +72,7 @@ Use `.btn-ghost-*` class for ghost buttons.
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Square buttons
Add `.btn-square` to button to remove border-radius.
...
...
@@ -81,6 +86,7 @@ Add `.btn-square` to button to remove border-radius.
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Pill buttons
Add `.btn-pill` class to any button to make them more rounded.
...
...
@@ -94,6 +100,7 @@ Add `.btn-pill` class to any button to make them more rounded.
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Outline buttons
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
...
...
@@ -107,6 +114,7 @@ In need of a button, but not the hefty background colors they bring? Replace the
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Button size
Add `.btn-lg` or `.btn-sm` for additional sizes.
...
...
@@ -131,6 +139,7 @@ Create block level buttons—those that span the full width of a parent—by add
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Button with icon
Basic buttons are traditional buttons with borders and background with an extra commponent like an icon. You can place it either on the left or the right which ever you want with different color opitons.
...
...
@@ -165,6 +174,7 @@ Comment
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Social buttons
A button can be formatted to link to a social website
...
...
@@ -190,6 +200,7 @@ You can use only icons.
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Icon buttons
Icon only button. Add `.btn-icon` class to remove unnecessary padding from button.
...
...
@@ -234,6 +245,7 @@ Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
{% endcapture %}
{% include example.html code=code wrapper="btn-list" centered=true %}
## Loading button
Add `.btn-loading` to use a loading state on a button. The width of the button depends on the length of the text inside.
...
...
@@ -252,6 +264,7 @@ Add `.btn-loading` to use a loading state on a button. The width of the button d
{% endcapture %}
{% include example.html code=code centered=true %}
## List of buttons
You can now create a list of buttons with the `.btn-list` container.
...
...
@@ -319,6 +332,7 @@ Use the `.text-center` or the `.text-right` modifiers to alter the alignment.
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
## Default card
To create a new card you have to use the `.card` and `.card-body` classes. You can put any content inside.
...
...
@@ -17,6 +18,7 @@ To create a new card you have to use the `.card` and `.card-body` classes. You c
{% endcapture %}
{% include example.html code=code columns=1 %}
## Card padding
You can change the padding of a newly created card. You can do this with the `.card-sm`, `.card-md` and `.card-lg` classes.
...
...
@@ -31,6 +33,7 @@ Cards with the `.card-sm` class are very well suited for small items such as sni
{% endcapture %}
{% include example.html code=code columns=2 %}
## Card with title
To add a title to a card you should add a class `.card-title` inside `.card-body`.
...
...
@@ -43,6 +46,7 @@ You can also place the title inside the `.card-header` element - then the title
{% endcapture %}
{% include example.html code=code columns=1 %}
## Card with title and image
{% capture code %}
...
...
@@ -50,6 +54,7 @@ You can also place the title inside the `.card-header` element - then the title
{% endcapture %}
{% include example.html code=code columns=1 %}
## Blog post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
...
...
@@ -59,6 +64,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
{% endcapture %}
{% include example.html code=code columns=1 %}
## Row deck
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
...
...
@@ -84,6 +90,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
{% endcapture %}
{% include example.html code=code columns=2 %}
## Post card with aside image
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
...
...
@@ -93,6 +100,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endcapture %}
{% include example.html code=code columns=2 %}
## Color variations
{% capture code %}
...
...
@@ -107,6 +115,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endcapture %}
{% include example.html code=code columns=2 %}
## Stacked card
{% capture code %}
...
...
@@ -114,6 +123,7 @@ You can also add the image on the left side of the card. All you need do to is:
Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up to different sizes based on what’s needed.
...
...
@@ -26,6 +28,7 @@ Using Bootstrap’s typical naming structure, you can create a standard flag, or
{% endcapture %}
{% include example.html code=code %}
## Types
To set the flag of the country you want add a class `flag-(country name)`. For example to create a flag of Andorra your class should look like this: `.flag-ad`.
Tabler is a UI kit that speeds up the development process and makes it easier than ever! Built on the latest version of Bootstrap, it helps you create templates based on fully customisable and ready-to-use UI components, which can be used by both simple websites and sophisticated systems. With basic knowledge of HTML and CSS, you’ll be able to create dashboards that are fully functional and beautifully designed!
## What are the benefits?
Tabler is a perfect solution if you want to create an interface which is not only user-friendly but also fully reponsive. Thanks to the big choice of ready-made components, you can customise 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.
To start using Tabler, first you need to set up the environment.
## 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:
...
...
@@ -31,6 +34,7 @@ To use our build system and run our documentation locally, you'll need a copy of
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.
...
...
@@ -41,6 +45,7 @@ Once you've completed the setup, you'll be able to run the various commands prov
Run `npm run build` for rerforms a one off build application without refresh.
Open [http://localhost:3001](http://localhost:3001) to configure the Web server.
## Bugs and feature requests
Found a bug or have a feature request? [Please open a new issue](https://github.com/tabler/tabler/issues/new).
By setting `js-name` you can access slider in your js code. **Remember to use it in your code after the page has loaded.**
...
...
@@ -55,6 +58,7 @@ function slider(){
{% endcapture %}
{% include example.html code=code %}
## start
The `start` option sets the number of handles and corresponding start positions.
...
...
@@ -71,6 +75,7 @@ The `start` option uses the slider's `'format'` option to decode the input. Numb
{% endcapture %}
{% include example.html code=code %}
## range
All values on the slider are part of a range. The range has a minimum and maximum value. **The minimum value cannot be equal to the maximum value.**
...
...
@@ -85,6 +90,7 @@ All values on the slider are part of a range. The range has a minimum and maximu
{% endcapture %}
{% include example.html code=code %}
## step
By default, the slider slides fluently. In order to make the handles jump between intervals, you can use the step option.
...
...
@@ -99,6 +105,7 @@ By default, the slider slides fluently. In order to make the handles jump betwee
{% endcapture %}
{% include example.html code=code %}
## connect
The connect option can be used to control the bar between the handles or the edges of the slider.
...
...
@@ -118,6 +125,7 @@ Setting true sets the bars between the handles, but not between the handles and
{% endcapture %}
{% include example.html code=code %}
## margin
When using two handles, the minimum distance between the handles can be set using the margin option. The margin value is relative to the value set in 'range'. This option is only available on linear sliders.
...
...
@@ -130,6 +138,7 @@ When using two handles, the minimum distance between the handles can be set usin
{% endcapture %}
{% include example.html code=code %}
## limit
The `limit` option is the oposite of the margin option, limiting the maximum distance between two handles. As with the margin option, the `limit` option can only be used on linear sliders.
...
...
@@ -140,6 +149,7 @@ The `limit` option is the oposite of the margin option, limiting the maximum dis
{% endcapture %}
{% include example.html code=code %}
## padding
Padding limits how close to the slider edges handles can be.
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we’ll also attempt to blur the elements under a toast.
...
...
@@ -21,6 +23,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
{% endcapture %}
{% include example.html code=code %}
## Stacking toasts
If you want to stack toasts just put them in the same container.
@@ -44,6 +47,7 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
{% endcapture %}
{% include example.html code=code %}
## Horizontal rules
{% capture code %}
...
...
@@ -51,6 +55,7 @@ Text <sup>Superscripted</sup>{% hide %} <code class="ml-2">sup</code><br/>{% end
{% endcapture %}
{% include example.html code=code %}
## Horizontal rules with label
{% capture code %}
...
...
@@ -116,6 +121,7 @@ Tabler has been optimized to correctly display content in any language. The Tabl
{% endcapture %}
{% include example.html code=code %}
## Text transform
Transform text in components with text capitalization classes.
...
...
@@ -127,6 +133,7 @@ Transform text in components with text capitalization classes.
{% endcapture %}
{% include example.html code=code %}
## Letter spacing
Utilities for controlling the tracking (letter spacing) of an element.
...
...
@@ -138,6 +145,7 @@ Utilities for controlling the tracking (letter spacing) of an element.
{% endcapture %}
{% include example.html code=code %}
## Line Height
Utilities for controlling the leading (line height) of an element.
...
...
@@ -150,6 +158,7 @@ Utilities for controlling the leading (line height) of an element.
{% endcapture %}
{% include example.html code=code %}
## Antialiasing
Utilities for controlling the font smoothing of an element.
...
...
@@ -162,6 +171,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use
{% endcapture %}
{% include example.html code=code %}
## Markdown elements
When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.markdown` as container. It can handle almost any HTML tag.
Well, she turned me into a newt. Burn her! We want a shrubbery!! Well, I got better. Listen. Strange women lying in ponds distributing swords is no basis for a system of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.
Listen. __Strange women lying in ponds distributing swords is no basis for a system of government.__ *Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony.* The swallow may fly south with the sun, and the house martin or the plover may seek warmer climes in winter, yet these are not strangers to our land.
## Well, Mercia's a temperate zone!
You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits! A newt?
...
...
@@ -17,6 +19,7 @@ You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a sil
2. I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!
3. We found them.
### What do you mean?
Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! The Lady of the Lake, her arm clad in the purest shimmering samite, held aloft Excalibur from the bosom of the water, signifying by divine providence that I, Arthur, was to carry Excalibur. That is why I am your king.
...
...
@@ -47,26 +50,32 @@ Bloody Peasant! What a strange person. Burn her anyway! Camelot! You don't vote
You don't vote for kings. I dunno. Must be a king. How do you know she is a witch? Why? I don't want to talk to you no more, you empty-headed animal food trough water! I fart in your general direction! Your mother was a hamster and your father smelt of elderberries! Now leave before I am forced to taunt you a second time!
# Heading 1
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
## Heading 2
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
### Heading 3
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
#### Heading 4
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
##### Heading 5
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
###### Heading 6
Bloody Peasant! What do you mean? It's only a model. Well, Mercia's a temperate zone!
