2016-11-13 21:12:36 +00:00
<!DOCTYPE html>
< html >
< head >
<!-- Live demo styled as of 20161111 -->
2016-11-22 08:32:05 +00:00
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/f3acf0b06d3784e17b6bf89ed2913e6e53f3c5a0/dist/mini - default.min.css"> -->
2016-11-13 21:12:36 +00:00
<!-- Local stylesheet -->
< link rel = "stylesheet" href = "../../dist/mini-default.min.css" >
< title > mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework< / title >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework" >
< meta name = "keywords" content = "mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass" >
< meta name = "author" content = "Angelos Chalaris (chalarangelo)" >
< link rel = "icon" type = "image/png" href = "favicon.png" >
< link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" >
< style >
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-header {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.box-centered { text-align: center; }
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-colored.red { background: #b71c1c; }
.card.fluid.box-centered {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
@media (max-width: 800px) {
.row.cards {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
.card.fluid.box-centered {
width: auto;
}
}
< / style >
< / head >
< body >
< header >
< img class = "logo" src = "mini-logo.svg" id = "header-logo" > < div style = "display: inline; overflow: auto;" >
< a href = "#" class = "button" > Introduction< / a >
< a href = "#" class = "button" > Module Overview< / a >
< a href = "#" class = "button" > Module Demos< / a >
< a href = "#" class = "button" > Flavors< / a >
< a href = "#" class = "button" > Customization< / a >
< a href = "https://github.com/Chalarangelo/mini.css" class = "button" > Github< / a >
< / div >
< / header >
< div class = "container" style = "height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);" >
< div class = "row" >
< div class = "col-sm" >
< div class = "box-centered" >
< img src = "mini-logo.svg" id = "top-logo" >
< h1 id = "top-header" > < span style = "font-size: 1.35em;" > m< / span > ini< span style = "font-size:0.65em; color: #558b2f;" > .css< / span > < / h1 >
< mark class = "tag tertiary" id = "top-version-tag" > v2.0< / mark >
< / div >
< / div >
< / div >
< / div >
<!-- Insert your page content here -->
< main > < div class = "container" style = "padding-top: 20px;" >
2016-12-05 21:48:05 +00:00
< button class = "small" > small< / button >
< button > normal< / button >
< button class = "large" > large< / button >
< button class = "inverse" > button< / button >
2016-12-05 12:07:28 +00:00
< p > Use rows and columns for normal alignment, use input-groups in rows without columns for unaligned but just vertical forms or predesigned forms etc.< / p >
2016-12-06 08:58:54 +00:00
< p > Add align-items:center hack style< / p >
2016-12-05 12:07:28 +00:00
< form >
< fieldset >
< legend > Aligned form (using < code > width< / code > and grid - no container):< / legend >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
2016-12-06 08:58:54 +00:00
< label for = "website" > Website< / label >
2016-12-05 12:07:28 +00:00
< / div >
< div class = "col-sm-12 col-md" >
< input type = "text" value = "" id = "website" placeholder = "website" style = "width:85%;" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
< label for = "username" > Username< / label >
< / div >
< div class = "col-sm-12 col-md" >
< input type = "text" value = "" id = "username" placeholder = "username" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-offset-1 col-sm-12 input-group" >
< label for = "username" > Username< / label >
< input type = "text" value = "" id = "username" placeholder = "username" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
2016-12-06 08:58:54 +00:00
< label for = "weburl" > URL< / label >
2016-12-05 12:07:28 +00:00
< / div >
< div class = "col-sm-12 col-md" >
< input type = "url" value = "" id = "weburl" placeholder = "https://www.mywebsite.com" style = "width:85%;" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
< label for = "desc" style = "vertical-align: text-top;" > Description< / label >
< / div >
< div class = "col-sm-12 col-md" >
< textarea type = "url" value = "" id = "desc" placeholder = "description" style = "width:85%;" > < / textarea >
< / div >
< / div >
< / fieldset >
< / form >
2016-12-05 11:05:44 +00:00
< form >
< fieldset >
< legend > Inline form (default style):< / legend >
< div class = "input-group" > < label for = "username" > Username< / label > < input type = "text" value = "" id = "username" placeholder = "username" > < / div >
< div class = "input-group" > < label for = "mail" > Email< / label > < input type = "email" value = "" id = "mail" placeholder = "mail@server.com" > < / div >
< div class = "input-group" > < label for = "pwd" > Password< / label > < input type = "password" value = "" id = "pwd" placeholder = "password" > < / div >
< / fieldset > < br >
2016-12-05 12:07:28 +00:00
< fieldset >
2016-12-05 11:05:44 +00:00
< legend > Aligned form (using < code > width< / code > and grid):< / legend >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
< label for = "website" style = "vertical-align: text-top;" > Website< / label >
< / div >
< div class = "col-sm-12 col-md" >
< input type = "text" value = "" id = "website" placeholder = "website" style = "width:85%;" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
< label for = "weburl" style = "vertical-align: text-top;" > URL< / label >
< / div >
< div class = "col-sm-12 col-md" >
< input type = "url" value = "" id = "weburl" placeholder = "https://www.mywebsite.com" style = "width:85%;" >
< / div >
< / div >
< div class = "row" >
< div class = "col-sm-12 col-md-2" style = "text-align:right;" >
< label for = "desc" style = "vertical-align: text-top;" > Description< / label >
< / div >
< div class = "col-sm-12 col-md" >
< textarea type = "url" value = "" id = "desc" placeholder = "description" style = "width:85%;" > < / textarea >
< / div >
< / div >
< / fieldset > < br >
< fieldset >
< legend > More inputs< / legend >
< input disabled value = "Disabled" >
< input readonly value = "Readonly" >
< input type = "number" value = "4" >
< select >
< option > Test< / option >
< option > Demo< / option >
< / select >
< input type = "search" placeholder = "search..." value = "" >
< / fieldset >
< / form >
< form >
< fieldset >
< div class = "input-group" >
< input type = "checkbox" id = "c1" tabindex = "0" > < label for = "c1" > Checkbox< / label >
< / div >
< div class = "input-group" >
< input type = "checkbox" id = "c2" disabled > < label for = "c2" disabled > Disabled< / label >
< / div >
< / fieldset >
< fieldset >
< div class = "input-group" >
< input type = "radio" name = "radios" value = "r1" checked id = "r1" tabindex = "0" > < label for = "r1" > Value 1< / label >
< input type = "radio" name = "radios" value = "r2" id = "r2" tabindex = "0" > < label for = "r2" > Value 2< / label >
< input type = "radio" name = "radios" value = "r3" checked id = "r3" tabindex = "0" > < label for = "r3" > Value 3< / label >
< / div >
< / fieldset >
< / form >
< button > Normal button< / button >
< input type = "button" value = "Input button" >
< input type = "submit" value = "Submit button" >
< input type = "reset" value = "Reset button" >
< a href = "#" class = "button" > Link button< / a >
< button disabled > Disabled button< / button > < br >
< p > Button groups can also be created, utilising the < code > .button-group< / code > class. Simply add a set of buttons in it and you're good to go. Check it out below:< / p >
< div class = "button-group" >
< input type = "button" value = "Input button" >
< input type = "submit" value = "Submit button" >
< input type = "reset" value = "Reset button" >
< button > Normal button< / button >
< a href = "#" class = "button" > Link button< / a >
< / div >
< p > File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. < strong > mini.css< / strong > deals with the problem, using a workaround involving labels that use the < code > button< / code > class, which applies the exact same style to those labels. Just link it to the < code > < input type=" file" > < / code > element of your choice and you're good to go. For example:< / p >
< span style = "margin:3px;" > < / span > < input type = "file" id = "file-input-demo" > < label for = "file-input-demo" class = "button" > < i class = "fa fa-upload" aria-hidden = "true" > < / i > Upload file< / label > < br >
< p > There are also different kinds of buttons, specifically < code > primary< / code > , < code > secondary< / code > and < code > tertiary< / code > , as well as < code > small< / code > and < code > large< / code > buttons. All of these types can be specified as classes. For example:< / p >
< span style = "margin:3px;" > < / span >
< button class = "primary" > Primary normal button< / button >
< input type = "button" value = "Secondary input button" class = "secondary" >
< input type = "reset" value = "Tertiary reset button" class = "tertiary" >
< input type = "submit" value = "Large submit button" class = "large" >
< label disabled class = "button small primary" > Small primary disabled label button< / label >
2016-11-13 21:12:36 +00:00
< / div > < / main >
<!-- End of page content -->
< footer > < strong > mini.css< / strong > was designed and built 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 >
< / body >
< / html >
