2017-04-06 10:33:56 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
2017-04-18 11:27:39 +00:00
< link rel = "stylesheet" href = "../mini-default.min.css" >
2017-04-06 10:33:56 +00:00
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" >
< title > mini.css - Table< / title >
< meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "mini.css - Minimal, responsive, style-agnostic CSS framework" >
< meta name = "keywords" content = "mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, table " >
< meta name = "author" content = "Angelos Chalaris (chalarangelo)" >
< meta property = "og:title" content = "mini.css - Minimal, responsive, style-agnostic CSS framework" >
< meta property = "og:description" content = "mini.css is a tiny CSS framework designed to build quick, modern and responsive websites." / >
< meta property = "og:type" content = "website" / > < meta property = "og:image" content = "../page_thumb.png" >
< meta property = "og:url" content = "https://chalarangelo.github.io/mini.css/" > < link rel = "icon" type = "image/png" href = "../favicon.png" >
< style >
2017-05-03 08:00:04 +00:00
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
2017-04-06 10:33:56 +00:00
#header-logo { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto; } [class^='col-'] .card.fluid { margin: 2px 0 20px; }
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
2017-05-04 21:47:22 +00:00
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
2017-04-06 10:33:56 +00:00
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
2017-05-04 22:15:03 +00:00
.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
2017-04-13 11:35:39 +00:00
td:first-child, td:last-child { font-family: monospace, monospace; }
2017-05-12 11:22:22 +00:00
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
2017-04-06 10:33:56 +00:00
< / style >
< / head >
< body >
2017-04-28 09:34:02 +00:00
< header class = "sticky" >
2017-06-14 09:23:29 +00:00
< a href = "../index" class = "logo" > < span id = "header-logo" > m< / span > < / a >
2017-05-12 11:22:22 +00:00
< label class = "drawer-toggle button" for = "navigation-toggle" > < / label >
2017-06-14 09:23:29 +00:00
< a href = "../index" class = "button hidden-sm" > Introduction< / a > < a href = "../modules" class = "button hidden-sm" > Modules< / a >
< a href = "../flavors" class = "button hidden-sm" > Flavors< / a > < a href = "../templates" class = "button hidden-sm" > Templates< / a >
< a href = "../customization" class = "button hidden-sm" > Customization< / a > < a href = "../quick_reference" class = "button hidden-sm" > Quick Reference< / a >
2017-04-06 10:33:56 +00:00
< a href = "https://github.com/Chalarangelo/mini.css" class = "button" > < i class = "fa fa-github" aria-hidden = "true" style = "font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;" > < / i > Github< / a >
< / header >
2017-04-28 09:34:02 +00:00
< div class = "container" style = "padding-left: 0.25rem;" >
2017-05-12 11:22:22 +00:00
< div class = "row" > < input type = "checkbox" id = "navigation-toggle" > < nav class = "drawer col-md-4 col-lg-2" >
< label class = "close" for = "navigation-toggle" > < / label >
2017-06-14 09:23:29 +00:00
< a href = "../index" > < h4 style = "margin-left: 0;" > Introduction< / h4 > < / a >
< a href = "../modules" > < h4 style = "margin-left: 0;" > Modules< / h4 > < / a >
< a href = "../flavors" > < h4 style = "margin-left: 0;" > Flavors< / h4 > < / a >
< a href = "../templates" > < h4 style = "margin-left: 0;" > Templates< / h4 > < / a >
< h4 style = "margin-left: 0;" > Customization< / h4 > < a href = "core#core-title" > Core< / a >
< a href = "core#typography-headings" class = "sublink-1" > Typography & headings< / a >
< a href = "core#common-elements" class = "sublink-1" > Common elements & fixes< / a >
< br / > < a href = "grid#grid-title" > Grid< / a >
< a href = "grid#classes-breakpoints" class = "sublink-1" > Classes & breakpoints< / a >
< br / > < a href = "input_control#input-control-title" > Input Control< / a >
< a href = "input_control#forms-input" class = "sublink-1" > Forms & input< / a > < a href = "input_control#checkbox-radio" class = "sublink-1" > Checkboxes & radio buttons< / a > < a href = "input_control#switch" class = "sublink-1" > Switches< / a >
< a href = "input_control#buttons" class = "sublink-1" > Buttons & button groups< / a > < a href = "input_control#button-mixins" class = "sublink-1" > Button mixins< / a > < a href = "input_control#switch-mixins" class = "sublink-1" > Switch mixins< / a >
< br / > < a href = "navigation#navigation-title" > Navigation< / a >
< a href = "navigation#header" class = "sublink-1" > Header< / a > < a href = "navigation#navigation-bar" class = "sublink-1" > Navigation bar< / a >
< a href = "navigation#drawer" class = "sublink-1" > Drawer< / a > < a href = "navigation#footer" class = "sublink-1" > Footer< / a >
< br / > < a href = "table#table-title" > Table< / a >
< a href = "table#table-styling" class = "sublink-1" > Table styling< / a >
< br / > < a href = "card#card-title" > Card< / a >
< a href = "card#cards-sections" class = "sublink-1" > Cards and sections< / a > < a href = "card#card-mixins" class = "sublink-1" > Card mixins< / a >
< br / > < a href = "tab#tab-title" > Tab< / a >
< a href = "tab#tab-styling" class = "sublink-1" > Tab styling< / a >
< br / > < a href = "contextual#contextual-title" > Contextual< / a >
< a href = "contextual#text-highlighting" class = "sublink-1" > Text highlighting< / a > < a href = "contextual#toasts" class = "sublink-1" > Toasts< / a >
< a href = "contextual#tooltips" class = "sublink-1" > Tooltips< / a > < a href = "contextual#modals" class = "sublink-1" > Modals< / a >
< a href = "contextual#highlighting-mixins" class = "sublink-1" > Text highlighting mixins< / a >
< a href = "contextual#toast-mixins" class = "sublink-1" > Toast mixins< / a > < a href = "contextual#tooltip-mixins" class = "sublink-1" > Tooltip mixins< / a >
< br / > < a href = "progress#progress-title" > Progress< / a >
< a href = "progress#progress-bar" class = "sublink-1" > Progress bar< / a > < a href = "progress#donut-spinner" class = "sublink-1" > Donut spinner< / a >
< a href = "progress#progress-mixins" class = "sublink-1" > Progress bar mixins< / a > < a href = "progress#spinner-mixins" class = "sublink-1" > Donut spinner mixins< / a >
< br / > < a href = "utility#utility-title" > Utility< / a >
< a href = "utility#visibility-legacy" class = "sublink-1" > Visibility helpers & legacy features< / a > < a href = "utility#breadcrumbs" class = "sublink-1" > Breadcrumbs< / a >
< a href = "utility#close-icon" class = "sublink-1" > Close icon< / a >
< a href = "utility#borders-shadows-mixins" class = "sublink-1" > Generic border & shadow mixins< / a >
< a href = "utility#responsive-sizing-mixins" class = "sublink-1" > Responsive sizing & spacing mixins< / a >
< a href = "utility#responsive-visibility-mixins" class = "sublink-1" > Responsive visibility helper mixins< / a >
< a href = "../quick_reference" > < h4 style = "margin-left: 0;" > Quick Reference< / h4 > < / a >
2017-05-12 11:22:22 +00:00
< / nav >
2017-04-28 09:34:02 +00:00
< div class = "col-sm-12 col-md-8 col-lg-10" > < main >
< div class = "row" style = "padding-top: 40px;" id = "table-title" >
< div class = "col-sm-12-1" >
2017-04-06 10:33:56 +00:00
< h1 > Table< / h1 >
2017-05-22 14:05:40 +00:00
< p style = "text-align:justify" > 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 > < br / >
2017-04-06 10:33:56 +00:00
< / div >
< / div >
< div class = "row" >
2017-04-28 09:34:02 +00:00
< div class = "col-sm-12" >
2017-04-06 10:33:56 +00:00
< div class = "card fluid" >
< div class = "section" >
< h2 > Quick overview< / h2 >
2017-05-22 14:05:40 +00:00
< p style = "text-align:justify" > 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 >
2017-04-06 10:33:56 +00:00
< / div >
< div class = "section" >
2017-04-13 11:35:39 +00:00
< h2 > Quick start< / h2 >
2017-05-22 14:05:40 +00:00
< p style = "text-align:justify" > 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 < a href = "https://atom.io/packages/sass-autocompile" > sass-autocompile< / a > if you are working with < a href = "https://atom.io/" > Atom< / a > ).< / p > < br >
2017-04-06 10:33:56 +00:00
< / div >
< / div >
< / div >
< / div >
2017-04-13 11:35:39 +00:00
2017-04-28 09:34:02 +00:00
< div class = "row" id = "table-styling" >
< div class = "col-sm-12" >
2017-04-13 11:35:39 +00:00
< div class = "card fluid" >
< div class = "section" > < h2 > Table styling< / h2 > < / div >
< div class = "section" >
2017-05-22 14:05:40 +00:00
< p style = "text-align:justify" > The < strong > table< / strong > module contains definitions for tables and table variants.< / p > < br / >
2017-05-03 06:58:09 +00:00
< table style = "width: 100%" class = "striped" >
2017-04-13 11:35:39 +00:00
< caption > Variables< / caption >
< thead >
< tr > < th > Variable< / th > < th > Type< / th > < th > Description< / th > < th > Sample value< / th > < / tr >
< / thead >
< tbody >
< tr >
< td data-label = "Variable" > $table-border-style< / td > < td data-label = "Type" > Border< / td >
< td data-label = "Description" > Border style for < code > < table> < / code > elements< / td > < td data-label = "Sample value" > 1px solid #bdbdbd< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-border-radius< / td > < td data-label = "Type" > Border radius< / td >
< td data-label = "Description" > Border radius for < code > < table> < / code > elements< / td > < td data-label = "Sample value" > 2px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-margin< / td > < td data-label = "Type" > Margin< / td >
< td data-label = "Description" > Margin for < code > < table> < / code > elements< / td > < td data-label = "Sample value" > 0 auto< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-box-shadow< / td > < td data-label = "Type" > Box shadow< / td >
< td data-label = "Description" > Box shadow for < code > < table> < / code > elements< / td > < td data-label = "Sample value" > 0 1px 3px rgba(0,0,0, 0.1)< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-caption-font-size< / td > < td data-label = "Type" > Font sizer< / td >
< td data-label = "Description" > Font size for < code > < caption> < / code > elements< / td > < td data-label = "Sample value" > 1.5em< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-caption-margin< / td > < td data-label = "Type" > Margin< / td >
< td data-label = "Description" > Margin for < code > < caption> < / code > elements< / td > < td data-label = "Sample value" > 8px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-row-padding< / td > < td data-label = "Type" > Padding< / td >
< td data-label = "Description" > Padding for < code > < tr> < / code > elements< / td > < td data-label = "Sample value" > 8px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-column-padding< / td > < td data-label = "Type" > Padding< / td >
< td data-label = "Description" > Padding for < code > < td> < / code > and < code > < th> < / code > elements< / td > < td data-label = "Sample value" > 10px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-head-back-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Background color for < code > < th> < / code > elements< / td > < td data-label = "Sample value" > #e0e0e0< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-head-fore-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Text color for < code > < th> < / code > elements< / td > < td data-label = "Sample value" > $fore-color< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-body-back-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Background color for < code > < td> < / code > elements< / td > < td data-label = "Sample value" > #fafafa< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-body-fore-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Text color for < code > < td> < / code > elements< / td > < td data-label = "Sample value" > $fore-color< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-mobile-breakpoint< / td > < td data-label = "Type" > Breakpoint< / td >
< td data-label = "Description" > Breakpoint for < code > < table> < / code > elements' mobile view< / td > < td data-label = "Sample value" > 767px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-mobile-card-spacing< / td > < td data-label = "Type" > Margin bottom< / td >
< td data-label = "Description" > Bottom margin for < code > < table> < / code > elements' cards in mobile view< / td > < td data-label = "Sample value" > 10px< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-mobile-card-label< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Attribute used to replace headers for < code > < table> < / code > elements in mobile view< / td > < td data-label = "Sample value" > 'data-label'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-mobile-label-font-weight< / td > < td data-label = "Type" > Font weight< / td >
< td data-label = "Description" > Font weight for the labels of < code > < table> < / code > elements' cards in mobile view< / td > < td data-label = "Sample value" > 700< / td >
< / tr >
< tr >
< td data-label = "Variable" > $include-horizontal-table< / td > < td data-label = "Type" > Logical< / td >
< td data-label = "Description" > Enables horizontal < code > < table> < / code > elements< sup > < a href = "#table-note-one" > 1< / a > < / sup > < / td > < td data-label = "Sample value" > true< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-horizontal-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for horizontal < code > < table> < / code > elements< sup > < a href = "#table-note-one" > 1< / a > < / sup > < / td > < td data-label = "Sample value" > 'horizontal'< / td >
< / tr >
2017-06-09 10:08:34 +00:00
< tr >
< td data-label = "Variable" > $include-scrollable-table< / td > < td data-label = "Type" > Logical< / td >
< td data-label = "Description" > Enables scrollable < code > < table> < / code > elements< sup > < a href = "#table-note-two" > 1< / a > < / sup > < / td > < td data-label = "Sample value" > true< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-scrollable-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for scrollable < code > < table> < / code > elements< sup > < a href = "#table-note-two" > 1< / a > < / sup > < / td > < td data-label = "Sample value" > 'scrollable'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-scrollable-height< / td > < td data-label = "Type" > Height< / td >
< td data-label = "Description" > Table for scrollable < code > < table> < / code > elements< sup > < a href = "#table-note-two" > 1< / a > < / sup > < / td > < td data-label = "Sample value" > 400px< / td >
< / tr >
2017-04-13 11:35:39 +00:00
< tr >
< td data-label = "Variable" > $table-not-responsive-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for preset < code > < table> < / code > elements< / td > < td data-label = "Sample value" > 'preset'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-striped-name< / td > < td data-label = "Type" > String< / td >
< td data-label = "Description" > Class name for striped < code > < table> < / code > elements< / td > < td data-label = "Sample value" > 'striped'< / td >
< / tr >
< tr >
< td data-label = "Variable" > $table-striped-alt-body-back-color< / td > < td data-label = "Type" > Color< / td >
< td data-label = "Description" > Secondary background color for striped < code > < table> < / code > elements< / td > < td data-label = "Sample value" > #eeeeee< / td >
< / tr >
< / tbody >
< / table > < br / >
< / div >
< div class = "section" >
< h3 > Notes:< / h3 >
2017-05-22 14:05:40 +00:00
< ol style = "text-align:justify" >
2017-06-09 09:00:00 +00:00
< li id = "table-note-one" > The value of < code > $table-horizontal-name< / code > will only be used if < code > $include-horizontal-table< / code > is set to < code class = "fore-tertiary" > true< / code > .< / li >
2017-06-09 10:08:34 +00:00
< li id = "table-note-one" > The valuse of < code > $table-scrollable-name< / code > and < code > $table-scrollable-height< / code > will only be used if < code > $include-scrollable-table< / code > is set to < code class = "fore-tertiary" > true< / code > .< / li >
2017-04-13 11:35:39 +00:00
< / ol >
< / div >
< / div >
< / div >
< / div >
2017-04-06 10:33:56 +00:00
< div class = "row" style = "padding-bottom: 20px; padding-top:20px;" >
2017-04-28 09:34:02 +00:00
< div class = "col-sm-12" >
2017-06-14 09:23:29 +00:00
< p style = "text-align:justify" > If you want to learn more about customizing < strong > mini.css< / strong > , go back to the < a href = "../customization" > customization page< / a > or choose a module from the top menu to see its documentation.< / p >
2017-04-06 10:33:56 +00:00
< / div >
< / div >
2017-04-28 09:34:02 +00:00
< / main > < / div > < / div > < / div >
2017-05-22 14:05:40 +00:00
< footer style = "text-align:justify" > < strong > mini.css< / strong > was designed and built with < i class = "fa fa-heart-o" aria-hidden = "true" > < / i > by < a href = "https://github.com/Chalarangelo" > @Chalarangelo< / a > . It is licensed under the < a href = "https://github.com/Chalarangelo/mini.css/blob/master/LICENSE" > MIT License< / a > . You can view the project's source code on < a href = "https://github.com/Chalarangelo/mini.css" > Github< / a > .< / footer >
2017-04-06 10:33:56 +00:00
< / body >
< / html >
