1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00

new version dist

This commit is contained in:
chomik
2018-03-20 15:37:24 +01:00
parent 568950f0a4
commit 715fa78a35
39 changed files with 969 additions and 454 deletions

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Alerts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
@@ -217,8 +217,7 @@
<h2 class="mt-0 mb-4">Alerts</h2>
<p>Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.</p>
<div class="alert alert-primary mt-5 mb-6">
<h4 class="mb-1">Work in progress!</h4>
<div>More detailed documentation is coming soon, but in the meantime here's a quick class reference.</div>
<div><strong>Work in progress!</strong> More detailed documentation is coming soon.</div>
</div>
<h3 id="default-alerts">Default alerts</h3>
<p>Add color contextual class.</p>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Avatars - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Buttons - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Cards - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Charts - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>

210
dist/docs/colors.html vendored
View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Colors - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
@@ -309,107 +309,117 @@
<h3 id="other-colors">Other colors</h3>
<p>Instead of using contextual classes you can use ordinary color names.</p>
<div class="example">
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-blue rounded mr-4"></div>
<div>
<strong>Blue</strong><br />
<code>.bg-blue</code>
<div class="row">
<div class="col-4">
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-blue rounded mr-4"></div>
<div>
<strong>Blue</strong><br />
<code>.bg-blue</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-azure rounded mr-4"></div>
<div>
<strong>Azure</strong><br />
<code>.bg-azure</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-indigo rounded mr-4"></div>
<div>
<strong>Indigo</strong><br />
<code>.bg-indigo</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-purple rounded mr-4"></div>
<div>
<strong>Purple</strong><br />
<code>.bg-purple</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-pink rounded mr-4"></div>
<div>
<strong>Pink</strong><br />
<code>.bg-pink</code>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-azure rounded mr-4"></div>
<div>
<strong>Azure</strong><br />
<code>.bg-azure</code>
<div class="col-4">
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-red rounded mr-4"></div>
<div>
<strong>Red</strong><br />
<code>.bg-red</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-orange rounded mr-4"></div>
<div>
<strong>Orange</strong><br />
<code>.bg-orange</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-yellow rounded mr-4"></div>
<div>
<strong>Yellow</strong><br />
<code>.bg-yellow</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-lime rounded mr-4"></div>
<div>
<strong>Lime</strong><br />
<code>.bg-lime</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-green rounded mr-4"></div>
<div>
<strong>Green</strong><br />
<code>.bg-green</code>
</div>
</div>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-indigo rounded mr-4"></div>
<div>
<strong>Indigo</strong><br />
<code>.bg-indigo</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-purple rounded mr-4"></div>
<div>
<strong>Purple</strong><br />
<code>.bg-purple</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-pink rounded mr-4"></div>
<div>
<strong>Pink</strong><br />
<code>.bg-pink</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-red rounded mr-4"></div>
<div>
<strong>Red</strong><br />
<code>.bg-red</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-orange rounded mr-4"></div>
<div>
<strong>Orange</strong><br />
<code>.bg-orange</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-yellow rounded mr-4"></div>
<div>
<strong>Yellow</strong><br />
<code>.bg-yellow</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-lime rounded mr-4"></div>
<div>
<strong>Lime</strong><br />
<code>.bg-lime</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-green rounded mr-4"></div>
<div>
<strong>Green</strong><br />
<code>.bg-green</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-teal rounded mr-4"></div>
<div>
<strong>Teal</strong><br />
<code>.bg-teal</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-cyan rounded mr-4"></div>
<div>
<strong>Cyan</strong><br />
<code>.bg-cyan</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-gray rounded mr-4"></div>
<div>
<strong>Gray</strong><br />
<code>.bg-gray</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-gray-dark rounded mr-4"></div>
<div>
<strong>Dark gray</strong><br />
<code>.bg-gray-dark</code>
<div class="col-4">
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-teal rounded mr-4"></div>
<div>
<strong>Teal</strong><br />
<code>.bg-teal</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-cyan rounded mr-4"></div>
<div>
<strong>Cyan</strong><br />
<code>.bg-cyan</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-gray rounded mr-4"></div>
<div>
<strong>Gray</strong><br />
<code>.bg-gray</code>
</div>
</div>
<div class="d-flex align-items-center mb-4">
<div class="w-7 h-7 bg-gray-dark rounded mr-4"></div>
<div>
<strong>Dark gray</strong><br />
<code>.bg-gray-dark</code>
</div>
</div>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center mb-4"</span><span class="nt">&gt;</span>
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-7 h-7 bg-blue rounded mr-4"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
<span class="nt">&lt;strong&gt;</span>Blue<span class="nt">&lt;/strong&gt;&lt;br</span> <span class="nt">/&gt;</span>
@@ -444,6 +454,8 @@
<span class="nt">&lt;code&gt;</span>.bg-pink<span class="nt">&lt;/code&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-7 h-7 bg-red rounded mr-4"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
@@ -479,6 +491,8 @@
<span class="nt">&lt;code&gt;</span>.bg-green<span class="nt">&lt;/code&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"d-flex align-items-center mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"w-7 h-7 bg-teal rounded mr-4"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div&gt;</span>
@@ -506,6 +520,8 @@
<span class="nt">&lt;strong&gt;</span>Dark gray<span class="nt">&lt;/strong&gt;&lt;br</span> <span class="nt">/&gt;</span>
<span class="nt">&lt;code&gt;</span>.bg-gray-dark<span class="nt">&lt;/code&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="tinting-backgrounds">Tinting backgrounds</h3>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Form components - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
@@ -314,7 +314,7 @@
<div class="example">
<div class="form-group">
<label class="form-label">Image Check</label>
<div class="row sm-gutters">
<div class="row gutters-sm">
<div class="col-sm-2">
<label class="imagecheck mb-4">
<input name="imagecheck" type="checkbox" value="1" class="imagecheck-input" />
@@ -369,7 +369,7 @@
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"form-group"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"form-label"</span><span class="nt">&gt;</span>Image Check<span class="nt">&lt;/label&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row sm-gutters"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-sm"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-2"</span><span class="nt">&gt;</span>
<span class="nt">&lt;label</span> <span class="na">class=</span><span class="s">"imagecheck mb-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">"imagecheck"</span> <span class="na">type=</span><span class="s">"checkbox"</span> <span class="na">value=</span><span class="s">"1"</span> <span class="na">class=</span><span class="s">"imagecheck-input"</span> <span class="nt">/&gt;</span>

204
dist/docs/grid.html vendored
View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Grid utilities - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
@@ -215,9 +215,205 @@
<div class="card-body">
<div class="text-wrap p-lg-6">
<h2 class="mt-0 mb-4">Grid utilities</h2>
<p>Quickly and easily create layouts with the basic 12-column.</p>
<div class="alert alert-primary mt-5 mb-6">
<h4 class="mb-1">Work in progress!</h4>
<div>More detailed documentation is coming soon, but in the meantime here's a quick class reference.</div>
<div><strong>Work in progress!</strong> More detailed documentation is coming soon.</div>
</div>
<h3 id="basic-layout">Basic layout</h3>
<p>Create basic grid layout using columns. With <code class="highlighter-rouge">.row</code> and <code class="highlighter-rouge">.col</code>, we can easily manipulate the layout.</p>
<div class="example">
<div class="row mb-3">
<div class="col-12">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-6">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-6">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-4">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-4">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-4">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
<div class="row mb-3">
<div class="col-2">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-2">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-2">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-2">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-2">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-2">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-12"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-6"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-4"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-2"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
<h3 id="column-spacing">Column spacing</h3>
<p>Row provides <code class="highlighter-rouge">.gutters-[size]</code> attribute to specify spacings between columns.</p>
<div class="example">
<div class="row gutters-0 mb-3">
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
<div class="row gutters-xs mb-3">
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
<div class="row gutters-sm mb-3">
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
<div class="row gutters-md mb-3">
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
<div class="row gutters-lg mb-3">
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lighter rounded"></div>
</div>
<div class="col-3">
<div class="h-5 bg-gray-lightest rounded"></div>
</div>
</div>
</div>
<div class="highlight">
<pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-0 mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-xs mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-sm mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-md mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row gutters-lg mb-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lighter rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-3"</span><span class="nt">&gt;&lt;div</span> <span class="na">class=</span><span class="s">"h-5 bg-gray-lightest rounded"</span><span class="nt">&gt;&lt;/div&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
</div>
</div>
</div>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Introduction - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>

4
dist/docs/tags.html vendored
View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Tags - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>

View File

@@ -14,7 +14,7 @@
<meta name="MobileOptimized" content="320">
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />
<!-- Generated: 2018-02-28 23:24:40 +0100 -->
<!-- Generated: 2018-03-20 15:36:58 +0100 -->
<title>Typography - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
@@ -127,6 +127,7 @@
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
<a href="../pricing-cards.html" class="nav-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item">
@@ -181,7 +182,6 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>