mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-09-01 18:03:31 +02:00
Code Issues Releases Wiki Activity

Responsive tables

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-22 01:25:48 +03:00
parent 2edf1f3f32
commit c9d597fac2
7 changed files with 250 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/v2/index.html
View File

@@ -202,7 +202,7 @@
<div class="row">
<div class="col-xs">
<div>
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p>
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><br>
<h3>Progress bars</h3>
<p>The <code>&lt;progress&gt;</code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
<br>
@@ -213,6 +213,46 @@
<p>Nano progress:</p>
<progress class="nano" value="35" max="100"></progress>
<br>
<h3>Tables</h3>
<p>Tables are responsive and use the <code>data-label</code> attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):</p>
<table>
<caption>Hacker List</caption>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Surname">Smith</td>
<td data-label="Email">johnsmith@mail.com</td>
<td data-label="Handle">SmithereensJohn</td>
</tr>
<tr>
<td data-label="Name">Lisa</td>
<td data-label="Surname">Cody</td>
<td data-label="Email">codyl@mail.com</td>
<td data-label="Handle">Codyl</td>
</tr>
<tr>
<td data-label="Name">Max</td>
<td data-label="Surname">Roberts</td>
<td data-label="Email">terminus@mail.com</td>
<td data-label="Handle">T3rm1nu5</td>
</tr>
<tr>
<td data-label="Name">Adam</td>
<td data-label="Surname">Leeks</td>
<td data-label="Email">leekt@mail.com</td>
<td data-label="Handle">Leekt</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
</div>