<p>The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
<p>Presenting information the right way is very important, especially so when dealing with large amounts of data. The <strong>table</strong> module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.</p><br>
<p>To customize the <strong>table</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <ahref="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <ahref="https://atom.io/">Atom</a>).</p><br>
<tddata-label="Description">Attribute used to replace headers for <code><table></code> elements in mobile view</td><tddata-label="Sample value">'data-label'</td>
<tddata-label="Description">Font weight for the labels of <code><table></code> elements' cards in mobile view</td><tddata-label="Sample value">700</td>
<tddata-label="Description">Class name for horizontal <code><table></code> elements<sup><ahref="#table-note-one">1</a></sup></td><tddata-label="Sample value">'horizontal'</td>
<tddata-label="Description">Breakpoint for horizontal <code><table></code> elements' mobile view<sup><ahref="#table-note-one">1</a></sup></td><tddata-label="Sample value">768px</td>
<tddata-label="Description">Secondary background color for striped <code><table></code> elements</td><tddata-label="Sample value">#eeeeee</td>
</tr>
</tbody>
</table><br/>
</div>
<divclass="section">
<h3>Notes:</h3>
<ol>
<liid="table-note-one">The values of <code>$table-horizontal-name</code> and <code>$table-horizontal-breakpoint</code> will only be used if <code>$include-horizontal-table</code> is set to <codeclass="fore-tertiary">true</code>.</li>
<p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <ahref="index.html">customization page</a> or choose a module from the top menu to see its documentation.</p>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer><strong>mini.css</strong> was designed and built with <iclass="fa fa-heart-o"aria-hidden="true"></i> by <ahref="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <ahref="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <ahref="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
