Complete feature parity with Bootstrap
owenversteeg opened this issue · 4 comments
Currently, Min is missing many features that Bootstrap has.
Features that may be implemented in Min core:
- Blockquotes:
blockquote { padding: 10px 20px; border-left: 5px solid #ccc; } - Blockquote citations:
blockquote footer:before { content: '\2014 \00A0'; } blockquote footer { color: #888; margin-top: 10px; } - Pre elements for code
Features that exist, but need to be documented:
- Italics with em and i
- Bold text with b
- the address element
- Lists with
<ol> <li> </li> </ol>and<ul> <li> </li> </ul>
Bootstrap features that are uncommonly used, so they will be created in min-bootstrap-plugin:
- the small element, but only for headings:
h1 small, h2 small, h3 small, h4 .small, h5 .small, h6 .small { font-size: 65%; color: #999; } - the .lead class:
.lead { font-size: 1.5em; } - the attr element:
attr { cursor: help; } - the .initialism class, but only for attr elements:
attr.initialism { font-size: 90%; text-transform: uppercase; } - Text-aligning classes:
.text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } - the list-inline class:
.list-inline { padding-left: 0; } .list-inline>li:first-child { padding-left: 0; } .list-inline>li { padding: 0 5px; } - Description lists:
dl { margin-top: 0; } dt { font-weight: bold; } - Horizontal description lists:
.dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } - Inline code blocks with the code element:
code { padding: 2px 4px; background: #eee; border-radius: 4px; } - Keyboard user input in pre elements (code blocks):
kbd { padding: 2px 4px; color: #fff; background: #333; border-radius: 3px; font-family: monospace; } - Pre-scrollable classes added to pre elements:
pre.pre-scrollable { max-height: 340px; overflow-y: scroll; } - Bordered tables:
table.bordered, table.bordered td { border: 1px solid; }
All the table, button, image, helper class, and responsive helper class shenanigans have not yet been added. Please feel free to contribute in the comments. I left off at http://getbootstrap.com/css/#tables
Might want to look into lines between tables instead of striped tables
Use .table instead of
(so as to not interfere with plugins/other uses of tables)Hover rows: .table.hoverable tbody tr { background: #ddd; }
Condensed tables: .table.condensed td { padding: 5px; }
Colored table rows: .table tr.active { background: #ddd; } .table tr.success { background: #cfc; } .table tr.info { background: #def; } .table tr.warning { background: #ffd; } .table tr.danger { background: #fdd; }
Responsive tables: @media {max-width: 767px} { .table-responsive { overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } }
input[type="email"], input[type="password"], input[type="file"], input[type="checkbox"]
Forms: form * { display: block;margin-bottom: 10px; }
Inline forms: form.inline * { vertical-align: top; margin: 0 10px 0 0; }
Move -webkit-appearance: none to the textarea, input[type='text'] {width: 13em;} area, this way it doesn't screw up checkboxes. Also, add some kind of selection indicator for radio and checkboxes.
Disabled inputs: .disabled label, input[disabled], textarea[disabled], .label.disabled { cursor: not-allowed; }
Inline checkboxes/radiobuttons: .checkbox-inline, .radio-inline { display: inline; }
For Bootstrap-style forms: label[for] { font-weight: bold; text-align: right; padding-right: 10px; } form .c10 { width: 83.33%; margin: 0; display: inline-block; } form .c2 { display: inline-block }label[for], form input[type="text"] { display: inline-block; box-sizing: border-box; }
Input focus: input[type="text"] { border-color: #5ab; }
Input validation states: .has-success input { border-color: #5b5; } .has-warning input { border-color: #ca6; } .has-error input { border-color: #c88; } [class*="has-"] { border-width: 2px; }
