Presenting information the right way is very important, especially so when dealing with large amounts of data. The table 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.
To use the table module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
To customize the table module, duplicate an existing flavor file (we suggest you use the mini-default.scss 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 sass-autocompile if you are working with Atom).
The table module contains definitions for tables and table variants.
| Variable | Type | Description | Sample value |
|---|---|---|---|
| $table-border-style | Border | +Border style for <table> elements | 1px solid #bdbdbd | +
| $table-border-radius | Border radius | +Border radius for <table> elements | 2px | +
| $table-margin | Margin | +Margin for <table> elements | 0 auto | +
| $table-box-shadow | Box shadow | +Box shadow for <table> elements | 0 1px 3px rgba(0,0,0, 0.1) | +
| $table-caption-font-size | Font sizer | +Font size for <caption> elements | 1.5em | +
| $table-caption-margin | Margin | +Margin for <caption> elements | 8px | +
| $table-row-padding | Padding | +Padding for <tr> elements | 8px | +
| $table-column-padding | Padding | +Padding for <td> and <th> elements | 10px | +
| $table-head-back-color | Color | +Background color for <th> elements | #e0e0e0 | +
| $table-head-fore-color | Color | +Text color for <th> elements | $fore-color | +
| $table-body-back-color | Color | +Background color for <td> elements | #fafafa | +
| $table-body-fore-color | Color | +Text color for <td> elements | $fore-color | +
| $table-mobile-breakpoint | Breakpoint | +Breakpoint for <table> elements' mobile view | 767px | +
| $table-mobile-card-spacing | Margin bottom | +Bottom margin for <table> elements' cards in mobile view | 10px | +
| $table-mobile-card-label | String | +Attribute used to replace headers for <table> elements in mobile view | 'data-label' | +
| $table-mobile-label-font-weight | Font weight | +Font weight for the labels of <table> elements' cards in mobile view | 700 | +
| $include-horizontal-table | Logical | +Enables horizontal <table> elements1 | true | +
| $table-horizontal-name | String | +Class name for horizontal <table> elements1 | 'horizontal' | +
| $table-horizontal-breakpoint | Breakpoint | +Breakpoint for horizontal <table> elements' mobile view1 | 768px | +
| $table-not-responsive-name | String | +Class name for preset <table> elements | 'preset' | +
| $table-striped-name | String | +Class name for striped <table> elements | 'striped' | +
| $table-striped-alt-body-back-color | Color | +Secondary background color for striped <table> elements | #eeeeee | +
$table-horizontal-name and $table-horizontal-breakpoint will only be used if $include-horizontal-table is set to true.If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.
diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index dc21e3c..6d89ec2 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -965,3 +965,4 @@ - Documented `navigation` module's customization page. - Resolved #63, replacing the `flex-grow` and `flex-shrink` properties with the `flex` shorthand. Everything should display properly across browsers now. +- Fully documented `input_control` and `table` modules in terms of customization.