siftal
Version:
CSS Framework, not bad ;)
1,143 lines (979 loc) • 27.4 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div class="tbox">
<h2>Tables</h2>
<p>Documentation and examples for tables with Siftal.</p>
</div>
<div class="cbox">
<h3>Examples</h3>
<p>Just add the base class <code class="code1">.tbl</code> to any <code class="code1"><table></code>, then extend with custom styles or our various included modifier classes.</p>
<h4>Simple table</h4>
<div class="example">
<table class="tbl">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl bordered">
<thead><tr><th colspan="3">Git Repository</th></tr></thead>
<tbody>
<tr>
<td class="collapsing selectable"><a href="#"><i class="sf-folder-2"></i>node_modules</a></td>
<td>Initial commit</td>
<td class="collapsing">10 hours ago</td>
</tr>
<tr>
<td class="selectable"><a href="#"><i class="sf-folder-2"></i>test</a></td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
<tr>
<td class="selectable"><a href="#"><i class="sf-folder-2"></i>build</a></td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
<tr>
<td class="selectable"><a href="#"><i class="sf-file-o"></i>package.json</a></td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
<tr>
<td class="selectable"><a href="#"><i class="sf-file-o"></i>Gruntfile.js</a></td>
<td>Initial commit</td>
<td>10 hours ago</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="cbox">
<h3>Colored</h3>
<p>A table's colors can be changed</p>
<div class="example">
<table class="tbl primary">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl secondary">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl success">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl danger">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl warn">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl info">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl light">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="cbox">
<h3>Table head options</h3>
<p>Similar to colored tables, use one of modifier classes to make rows appear colored.</p>
<table class="tbl">
<thead class="primary">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot class="dark">
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="cbox">
<h3>No Zebra!</h3>
<p>Use <code class="code1">.dead</code> to add zebra-striping to any table row within the <code class="code1"><tbody></code>.</p>
<div class="example">
<table class="tbl dead">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl dark dead">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="cbox">
<h3>Custom cell</h3>
<p>A cell or row may let a user know whether a value is good or bad.</p>
<p>you can add <code class="code1">.positive</code>, <code class="code1">.negative</code>, <code class="code1">.active</code>, <code class="code1">.warning</code> and <code class="code1">.disabled</code> to create custom design on cell or rows</p>
<div class="example">
<table class="tbl dead">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="positive"><th>1</th><td><i class="sf-check"></i>Javad</td><td>Evazzadeh</td><td>@evazzadeh</td></tr>
<tr><th>2</th><td>Reza</td><td class="positive">Mohiti</td><td>@biqarar</td></tr>
<tr><th>3</th><td class="negative">Hasan</td><td class="negative">Salehi</td><td>@baravak</td></tr>
<tr class="negative"><th>1</th><td>Javad</td><td><i class="sf-pencil-square-o"></i>Evazzadeh</td><td>@evazzadeh</td></tr>
<tr class="disabled"><th>2</th><td>Reza</td><td>Mohiti</td><td>@biqarar</td></tr>
<tr class="active"><th>3</th><td>Hasan</td><td>Salehi</td><td>@baravak</td></tr>
<tr class="warning"><th>3</th><td>Hasan</td><td>Salehi</td><td>@baravak</td></tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="cbox">
<h3>Bordered table</h3>
<p>Add <code class="code1">.bordered</code> for borders on all sides of the table and cells.</p>
<div class="example">
<table class="tbl bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<div class="example">
<table class="tbl bordered dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="cbox">
<h3>Responsive table</h3>
<p>Only add <code class="code1">.responsive</code> to table.</p>
<div class="example">
<table class="tbl responsive">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="cbox">
<h3>Sizes</h3>
<h4>Compact</h4>
<p>A table may sometimes need to be more compact to make more rows visible at a time</p>
<div class="example">
<table class="tbl compact">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<h4>Normal</h4>
<div class="example">
<table class="tbl">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<h4>Padded</h4>
<p>A table may sometimes need to be more padded for legibility</p>
<div class="example">
<table class="tbl padded">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<h4>Small</h4>
<p>A table may sometimes need to be small</p>
<div class="example">
<table class="tbl sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
<h4>Large</h4>
<p>A table may sometimes need to be large</p>
<div class="example">
<table class="tbl lg">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="cbox">
<h3>Sortable heading</h3>
<p>Add <code class="code1">data-sort=desc|asc</code> to table header for add icon of sorting</p>
<div class="example">
<table class="tbl bordered">
<thead>
<tr>
<th>#</th>
<th data-sort="desc"><a href="#">First Name</a></th>
<th data-sort=""><a href="#">Last Name</a></th>
<th data-sort="asc"><a href="#">Username</a></th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Javad</td>
<td>Evazzadeh</td>
<td>@evazzadeh</td>
</tr>
<tr>
<th>2</th>
<td>Reza</td>
<td>Mohiti</td>
<td>@biqarar</td>
</tr>
<tr>
<th>3</th>
<td>Hasan</td>
<td>Salehi</td>
<td>@baravak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>-</th>
<th colspan="3">Footer</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>