Shipping Min v2.0! :shipit:
This commit is contained in:
Owen Versteeg
parent
6c43f07faa
commit
a7822241a6
33 changed files with 1338 additions and 239 deletions
5
build.sh
5
build.sh
|
|
@ -3,7 +3,7 @@
|
|||
mkdir compiled -p
|
||||
#The compiled folder holds all the separate compiled CSS files.
|
||||
|
||||
subtypes=(general buttons grid headings icons iehacks inputs navbar tables)
|
||||
subtypes=(general buttons grid headings icons inputs navbar tables)
|
||||
#You can change the subtypes used by changing this.
|
||||
|
||||
rm -f compiledcss.js
|
||||
|
|
@ -14,6 +14,9 @@ i="0"
|
|||
echo "var css = {" >> compiledcss.js
|
||||
#Begin making compiledcss.js
|
||||
|
||||
echo -n "/*Copyright 2014 Owen Versteeg; MIT licensed*/" >> entireframework.min.css
|
||||
#Begin making entireframework.min.css; -n is to remove the newline
|
||||
|
||||
#For each subtype, we compile the LESS file, minify it, and concatenate it into two files:
|
||||
#entireframework.min.css and compiledcss.js
|
||||
for item in ${subtypes[*]}
|
||||
|
|
|
|||
70
compiled/buttons.css
Normal file
70
compiled/buttons.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.btn {
|
||||
background: #999;
|
||||
border-radius: 6px;
|
||||
/* rounded corners */
|
||||
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
/* Enables non-inline-block elements like <div>s to be buttons */
|
||||
|
||||
font-size: 2em;
|
||||
margin: .2em .3em .2em 0;
|
||||
padding: 12px 30px 14px;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #888;
|
||||
}
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
background: #777;
|
||||
}
|
||||
.btn-a {
|
||||
background: #0ae;
|
||||
}
|
||||
.btn-a:hover {
|
||||
background: #09d;
|
||||
/* darken(@btn-a-bg, 5%) */
|
||||
|
||||
}
|
||||
.btn-a:active,
|
||||
.btn-a:focus {
|
||||
background: #08b;
|
||||
/* darken(@btn-a-bg, 10%) */
|
||||
|
||||
}
|
||||
.btn-b {
|
||||
background: #3c5;
|
||||
}
|
||||
.btn-b:hover {
|
||||
background: #2b4;
|
||||
/* darken(@btn-b-bg, 5%) */
|
||||
|
||||
}
|
||||
.btn-b:active,
|
||||
.btn-b:focus {
|
||||
background: #2a4;
|
||||
/* darken(@btn-b-bg, 10%) */
|
||||
|
||||
}
|
||||
.btn-c {
|
||||
background: #d33;
|
||||
}
|
||||
.btn-c:hover {
|
||||
background: #c22;
|
||||
/* darken(@btn-c-bg, 5%) */
|
||||
|
||||
}
|
||||
.btn-c:active,
|
||||
.btn-c:focus {
|
||||
background: #b22;
|
||||
/* darken(@btn-c-bg, 10%) */
|
||||
|
||||
}
|
||||
.btn-sm {
|
||||
border-radius: 4px;
|
||||
/* rounded corners */
|
||||
|
||||
padding: 10px 15px 11px;
|
||||
}
|
||||
1
compiled/buttons.min.css
vendored
Normal file
1
compiled/buttons.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;font-size:2em;margin:.2em .3em .2em 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}
|
||||
32
compiled/general.css
Normal file
32
compiled/general.css
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
body,
|
||||
textarea {
|
||||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
.smooth {
|
||||
transition: all .2s;
|
||||
}
|
||||
.btn,
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
.container {
|
||||
width: 1270px;
|
||||
margin: auto;
|
||||
}
|
||||
@media (max-width: 1310px) {
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
label > * {
|
||||
display: inline;
|
||||
}
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
1
compiled/general.min.css
vendored
Normal file
1
compiled/general.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
body,textarea{font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}
|
||||
56
compiled/grid.css
Normal file
56
compiled/grid.css
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
/*
|
||||
Since every column has 2% padding (1% on each side) its width is (((its number/12) * 100)-2) percent (truncated, to avoid spillage.) Thus, c12 has width 98%.
|
||||
*/
|
||||
.row {
|
||||
margin-top: 2%;
|
||||
overflow: auto;
|
||||
/* required - without this, the page layout is screwed up */
|
||||
|
||||
}
|
||||
.col {
|
||||
float: left;
|
||||
}
|
||||
.c12,
|
||||
.table {
|
||||
width: 100%;
|
||||
}
|
||||
.c11 {
|
||||
width: 91.66%;
|
||||
}
|
||||
.c10 {
|
||||
width: 83.33%;
|
||||
}
|
||||
.c9 {
|
||||
width: 75%;
|
||||
}
|
||||
.c8 {
|
||||
width: 66.66%;
|
||||
}
|
||||
.c7 {
|
||||
width: 58.33%;
|
||||
}
|
||||
.c6 {
|
||||
width: 50%;
|
||||
}
|
||||
.c5 {
|
||||
width: 41.66%;
|
||||
}
|
||||
.c4 {
|
||||
width: 33.33%;
|
||||
}
|
||||
.c3 {
|
||||
width: 25%;
|
||||
}
|
||||
.c2 {
|
||||
width: 16.66%;
|
||||
}
|
||||
.c1 {
|
||||
width: 8.33%;
|
||||
}
|
||||
/* For smaller screens, change all columns to 100% width */
|
||||
@media (max-width: 870px) {
|
||||
.row .col {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
1
compiled/grid.min.css
vendored
Normal file
1
compiled/grid.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.row{margin-top:2%;overflow:auto}.col{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}
|
||||
7
compiled/headings.css
Normal file
7
compiled/headings.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
/* Make the default heading style larger */
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
1
compiled/headings.min.css
vendored
Normal file
1
compiled/headings.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
h1{font-size:4em}h2{font-size:2em}
|
||||
5
compiled/icons.css
Normal file
5
compiled/icons.css
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.ico {
|
||||
font: 2.04em Arial Unicode MS, Lucida Sans Unicode;
|
||||
/* This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu. */
|
||||
|
||||
}
|
||||
1
compiled/icons.min.css
vendored
Normal file
1
compiled/icons.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.ico{font:2.04em Arial Unicode MS,Lucida Sans Unicode}
|
||||
1
compiled/iehacks.css
Normal file
1
compiled/iehacks.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
/* There aren't any IE hacks needed as of now */
|
||||
0
compiled/iehacks.min.css
vendored
Normal file
0
compiled/iehacks.min.css
vendored
Normal file
27
compiled/inputs.css
Normal file
27
compiled/inputs.css
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
textarea,
|
||||
input,
|
||||
.addon-front,
|
||||
.btn-sm,
|
||||
.nav a {
|
||||
font-size: .9em;
|
||||
}
|
||||
textarea,
|
||||
input {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
textarea:focus,
|
||||
input:focus {
|
||||
border-color: #5ab;
|
||||
}
|
||||
textarea,
|
||||
input[type='text'] {
|
||||
width: 13em;
|
||||
-webkit-appearance: none;
|
||||
/* make iOS inputs pretty */
|
||||
|
||||
}
|
||||
.addon-front {
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
}
|
||||
1
compiled/inputs.min.css
vendored
Normal file
1
compiled/inputs.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
textarea,input,.addon-front,.btn-sm,.nav a{font-size:.9em}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{width:13em;-webkit-appearance:none}.addon-front{padding:8px 12px;box-shadow:0 0 0 1px #ccc}
|
||||
69
compiled/navbar.css
Normal file
69
compiled/navbar.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
.nav,
|
||||
.nav .current,
|
||||
.nav a:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.nav {
|
||||
height: 1.5em;
|
||||
padding: .7em 0 .95em;
|
||||
/* Uncomment for animations
|
||||
max-height: 1.5em;
|
||||
*/
|
||||
|
||||
}
|
||||
.nav a {
|
||||
padding-right: 1em;
|
||||
color: #aaa;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
.btn.btn-close {
|
||||
background: #000;
|
||||
visibility: hidden;
|
||||
float: right;
|
||||
margin-top: -54px;
|
||||
font-size: 25px;
|
||||
}
|
||||
.nav .pagename {
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.btn.btn-close {
|
||||
visibility: visible;
|
||||
}
|
||||
.nav {
|
||||
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagename {
|
||||
margin-top: -11px;
|
||||
}
|
||||
.nav:focus {
|
||||
/* Necesary for animations
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
*/
|
||||
|
||||
height: auto;
|
||||
}
|
||||
.nav div:before {
|
||||
content: '';
|
||||
border-top: 3px solid;
|
||||
border-bottom: 10px double;
|
||||
float: right;
|
||||
height: 4px;
|
||||
right: 3px;
|
||||
top: 14px;
|
||||
width: 20px;
|
||||
position: relative;
|
||||
background: #000;
|
||||
}
|
||||
.nav a {
|
||||
padding: .5em 0;
|
||||
width: 50%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
1
compiled/navbar.min.css
vendored
Normal file
1
compiled/navbar.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:1.5em;padding:.7em 0 .95em}.nav a{padding-right:1em;color:#aaa;top:-1px;position:relative}.btn.btn-close{background:#000;visibility:hidden;float:right;margin-top:-54px;font-size:25px}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{visibility:visible}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{content:'';border-top:3px solid;border-bottom:10px double;float:right;height:4px;right:3px;top:14px;width:20px;position:relative;background:#000}.nav a{padding:.5em 0;width:50%;display:block}}
|
||||
15
compiled/tables.css
Normal file
15
compiled/tables.css
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
.table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
.table th,
|
||||
.table td {
|
||||
padding: .5em;
|
||||
text-align: left;
|
||||
}
|
||||
.table tbody > *:nth-child(2n-1) {
|
||||
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
|
||||
|
||||
background: #ddd;
|
||||
/* Shade every other table row */
|
||||
|
||||
}
|
||||
1
compiled/tables.min.css
vendored
Normal file
1
compiled/tables.min.css
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
.table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}
|
||||
|
|
@ -1,12 +1,10 @@
|
|||
var css = {
|
||||
"general": "body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}",
|
||||
"buttons": "ico,button,.btn{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button,.btn{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active{background:#b22}.btn-small{padding:7px 19px;font-size:16px}",
|
||||
"grid": ".row{line-height:2em;margin-top:2%;overflow:auto}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}",
|
||||
"headings": ".title{font-size:7em;margin:0}h1{font-size:4em;margin:0}h2{font-size:2em}",
|
||||
"icons": "ico{font-size:2.04em}",
|
||||
"iehacks": ".ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}",
|
||||
"inputs": "textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}",
|
||||
"messages": "message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}",
|
||||
"navbar": ".navbar{width:100%;background:#000;color:#fff;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:#fff;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:#fff}.navbar input,.navbar button,.navbar .btn{margin-top:-20px}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}",
|
||||
"tables": "table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}"
|
||||
"general": "body,textarea{font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}",
|
||||
"buttons": ".btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;font-size:2em;margin:.2em .3em .2em 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}",
|
||||
"grid": ".row{margin-top:2%;overflow:auto}.col{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}",
|
||||
"headings": "h1{font-size:4em}h2{font-size:2em}",
|
||||
"icons": ".ico{font:2.04em Arial Unicode MS,Lucida Sans Unicode}",
|
||||
"inputs": "textarea,input,.addon-front,.btn-sm,.nav a{font-size:.9em}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{width:13em;-webkit-appearance:none}.addon-front{padding:8px 12px;box-shadow:0 0 0 1px #ccc}",
|
||||
"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:1.5em;padding:.7em 0 .95em}.nav a{padding-right:1em;color:#aaa;top:-1px;position:relative}.btn.btn-close{background:#000;visibility:hidden;float:right;margin-top:-54px;font-size:25px}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{visibility:visible}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{content:'';border-top:3px solid;border-bottom:10px double;float:right;height:4px;right:3px;top:14px;width:20px;position:relative;background:#000}.nav a{padding:.5em 0;width:50%;display:block}}",
|
||||
"tables": ".table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}"
|
||||
};
|
||||
|
|
|
|||
BIN
congruent_outline.png
Normal file
BIN
congruent_outline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
442
docs.html
Normal file
442
docs.html
Normal file
|
|
@ -0,0 +1,442 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("ico"); document.createElement("button");
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script>
|
||||
document.createElement("col"); document.createElement("message"); document.createElement("nav"); document.createElement("ico"); document.createElement("button");
|
||||
|
||||
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>min - docs</title>
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<script src="IE70.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
/* Min+ plugin*/
|
||||
message {
|
||||
display: block;
|
||||
padding: 2em;
|
||||
background: #def;
|
||||
border-left: 5px solid #44e;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-color: #e44;
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.great {
|
||||
border-color: #2d2;
|
||||
background: #dfd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
/* These styles are used on this page only to make the demo page look nicer. Don't use them in your project. */
|
||||
|
||||
/* Bootstrap stuff */
|
||||
.buttonsizes * {
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* code blocks */
|
||||
pre {
|
||||
font-size: .9em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* formatting for grid system */
|
||||
.dark {
|
||||
background-color: rgb(172, 172, 172);
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: rgb(223, 223, 223);
|
||||
}
|
||||
|
||||
.col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
/* pretty heading demo display (all headings on one line) */
|
||||
.headings *:not(first-of-type) {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* fancy page heading styles */
|
||||
h1:not(.exampleh1) {
|
||||
margin: 0.2em 0;
|
||||
border-bottom: 5px solid;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* normally, the button would extend past the page top and be invisible but when it's in the middle of the page it shows */
|
||||
button.btn-close.btn-sm {
|
||||
padding-top: 4px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
/* this fixes the display of the demo-navbar when the page is resized */
|
||||
.navbar .container {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
/* support tables */
|
||||
.support span.full, .support tr.full {
|
||||
background: #3c5;
|
||||
}
|
||||
|
||||
.support span.partial, .support tr.partial {
|
||||
background: #fd5;
|
||||
}
|
||||
|
||||
.support span.none, .support tr.none {
|
||||
background: #d55;
|
||||
}
|
||||
|
||||
.key {
|
||||
padding: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.support th, .support td, .support table {
|
||||
border: 1px solid;
|
||||
}
|
||||
.support table, .support .key {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.browserdetails {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* End this-page-only styles, start beta styles */
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE styles */
|
||||
|
||||
/*
|
||||
.btn-sm {
|
||||
font-size:1em;
|
||||
margin-top: 0;
|
||||
padding-top: 1000px;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: .65em;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
margin-top: -84px;
|
||||
}
|
||||
|
||||
a.btn-sm, div.btn-sm {
|
||||
margin-top: -49px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
button.btn-sm {
|
||||
line-height: .7em;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
display: inline;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* Changes to the main CSS:
|
||||
- move media query from max-width to min-width
|
||||
*/
|
||||
|
||||
/* new beta styles */
|
||||
|
||||
</style>
|
||||
|
||||
<!--[if lte IE 6]>
|
||||
<style>
|
||||
.col {
|
||||
margin: 0.5%;
|
||||
}
|
||||
.c12 {
|
||||
margin: 0.5%;
|
||||
margin-left: 0.5%;
|
||||
width: 97%;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="index.html">Min</a>
|
||||
<a class="current" href="#">Docs</a>
|
||||
<!--
|
||||
<a href="bootstrapconverter.html">Bootstrap Converter</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
-->
|
||||
<a href="download.html">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1>Min Basics</h1>
|
||||
<p>
|
||||
Min's minimalism has several advantages. Firstly, it doesn't prescribe a specific design for you. Each element has just a handful of CSS rules applied to it, and as a result overriding default styles is extremely easy. Min being only 995 bytes means that there's less of it to get in your way when you want to customize your site. Contrast this with Bootstrap, where you may have to override many different rules to get what you want.
|
||||
</p>
|
||||
<p>
|
||||
Secondly, there's less markup to type. Patients that switched from Bootstrap to Min reported up to a ninefold decrease in markup and drastic improvements in most cases of divitis. Ask your CSS-atrician if Min is right for you.
|
||||
</p>
|
||||
<p>
|
||||
Min is also extremely flexible: you can apply the btn class to any element - a link, a <button>, a div - anything. The same goes for any of the column sizes, any of the button coloration styles, and many more classes in plugins. You can apply the smooth class to anything to give it a 200ms transition.
|
||||
</p>
|
||||
<p>
|
||||
Because of its minimalist goal, Min core has fewer features than Bootstrap. Many of the features omitted in Min are superfluous, unsemantic, and just plain idiotic (I'm looking at you, text-left class.) However, when using the <a href="https://owenversteeg.com/min-bootstrap-plugin">3.5kB Min Bootstrap plugin</a>, Min has full feature parity with Bootstrap. If you are migrating a complex site from Bootstrap to Min, it is highly recommended that you use this plugin.
|
||||
</p>
|
||||
</div>
|
||||
<h1>Browser support</h1>
|
||||
<div class="support">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Chrome</th>
|
||||
<th>IE</th>
|
||||
<th>FF</th>
|
||||
<th>Opera</th>
|
||||
<th>Safari</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="full">
|
||||
<td>33 - 2 <span class="browserdetails">(27.32%) [2014 - 2009]</span></td>
|
||||
<td>11 - 9 <span class="browserdetails">(5.22% + 0.20% + 0.20%) [2014 - 2011]</span></td>
|
||||
<td>27 - 3.5 <span class="browserdetails">(18.66% + 0.09% + 0.04%) [2014 - 2009]</span></td>
|
||||
<td>19 - 10 <span class="browserdetails">(1.51% + 1.32%) [2014 - 2009]</span></td>
|
||||
<td>7 - 4 <span class="browserdetails">(3.88% + 11.66% + 5.55%) [2014 - 2009]</span></td>
|
||||
</tr>
|
||||
<tr class="partial">
|
||||
<td>None</td>
|
||||
<td>8 - 5.5 <span class="browserdetails">(4.56%) [2009 - 2000]</span></td>
|
||||
<td onclick="alert('Tables are not shaded')">3 <span class="browserdetails">(0.03%) [2008]</span></td>
|
||||
<td onclick="alert('Tables are not shaded and buttons are not rounded')">9 <span class="browserdetails">(0.00%) [2006]</span></td>
|
||||
<td>None</td>
|
||||
</tr>
|
||||
<tr class="none">
|
||||
<td onclick="alert('page overflows')">1 - 0.2 <span class="browserdetails">(0.00%) [2008 - 2008]</span></td>
|
||||
<td onclick="alert('Navbars don't work at all, neither do grids or icons, and buttons are not padded')">5 - 1 <span class="browserdetails">(0.01%) [1999 - 1995]</span></td>
|
||||
<td onclick="alert('navbars broken (replace nav elements with divs for a fix)')">2 - 0.8 <span class="browserdetails">(0.05%) [2006 - 2004]</span></td>
|
||||
<td>8 - 2 <span class="browserdetails">(0.00%) [2005 - 1996]</span></td>
|
||||
<td onclick="alert('page overflows, no rounded buttons')">3 - 1 <span class="browserdetails">(0.00%) [2007 - 2003]</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Reverse Mali flag, Bolivian flag, and Helvetic Republic flag -->
|
||||
|
||||
<p>Key: <span class="full key">Full support</span>, <span class="partial key">partial support</span>, and <span class="none key">no support</span>. <span class="browserdetails">Market share data <a href="http://stats.wikimedia.org/archive/squid_reports/2014-01/SquidReportClients.htm">from Wikimedia</a> is in parens (in the format desktop+mobile+tablet); browser release dates are in brackets. Due to web crawlers and other mobile browsers, numbers will add up to about 80%.</span> Click on each cell for details (if available.) </p>
|
||||
<p>
|
||||
Partial support means that Min supports that browser but there may be a small visual quibble, such as no rounded corners on buttons, a difference in how the page responds to resizing, or slight table shading differences.
|
||||
</p>
|
||||
<p>
|
||||
Netscape support has ended with the release of Min 2.0 as part of a push towards using semantic HTML5 elements. Replace all <nav> elements with <div>s to make Min work in Netscape 7+.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<h1>Buttons</h1>
|
||||
<a class="btn smooth btn-a" href="#">btn-a</a>
|
||||
<a class="smooth btn-b btn" href="#">btn-b</a>
|
||||
<a class="smooth btn-c btn" href="#">btn-c</a>
|
||||
<a class="smooth btn" href="#">classless</a>
|
||||
|
||||
<br><br><pre><a class="btn btn-b smooth">btn-b</a></pre>
|
||||
<br>
|
||||
<a class="btn smooth btn-a btn-sm" href="#">btn-sm btn-a</a>
|
||||
<a class="btn smooth btn-b btn-sm" href="#">btn-sm btn-b</a>
|
||||
<a class="btn smooth btn-c btn-sm" href="#">btn-sm btn-c</a>
|
||||
<a class="btn smooth btn-sm" href="#">btn-sm classless</a>
|
||||
|
||||
<br><br><pre><a class="btn btn-b btn-sm smooth">btn-sm</a></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Inputs</h1>
|
||||
<input type="text" class="smooth" placeholder="input type="text""><br><br>
|
||||
<textarea rows="3" class="smooth" placeholder="textarea"></textarea><br><br><span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class="addon-front"">
|
||||
<br><br>
|
||||
<pre><input type="text" class="smooth">
|
||||
<br><textarea rows="3" class="smooth">
|
||||
<br><span class="addon-front"></span><input type="text" class="smooth"></pre>
|
||||
</div>
|
||||
|
||||
<div class="navbar">
|
||||
<h1>Navbars</h1>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">Min</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
<a href="#">Four</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
<br>
|
||||
<pre><nav class="nav" tabindex="-1" onclick="this.focus()"><br> <div class="container"><br> <a class="pagename current" href="#">Min</a><br> <a href="#">One</a><br> <a href="#">Two</a> <br> <a href="#">Three</a><br> </div><br></nav><br><button class="btn-close btn btn-sm">×</button></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Tables</h1>
|
||||
<table class="table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<br><br>
|
||||
<pre><table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div class="icons">
|
||||
<h1>Icons</h1>
|
||||
<i class="ico"><b>Android Safe</b> ☎ ♂ ♀ ⓧ © § ® ⇦ ⇧ ⇨ ⇩♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟☜ ☞ ♨ ♭ ♯ ￥￡ ￠❊ ฿ ๏ ※ ₧ ₨ ₪ € №</i>
|
||||
<br><br><message class="great">The "Android Safe" icons work everywhere, tested on hundreds of devices. </message>
|
||||
<br>
|
||||
<i class="ico"><b>Total Set</b> ✉ ✰ ☁ ✈ ☑ ☒ ✆ ☀ ☮ ☢ ☠ ☣ ⌂ ℗ ☺ ☻ ☼ ∡ ∿ ⊝ ⊘ ⁂ ☤ ♫ ☄ ✎ ☟ ☝ ☹ ☭ ☚ ☛ ✌ 〠 ☃ ♮ ☂ ☸ ✍ ☯ ✂ ₩ ◍ ۩</i>
|
||||
<br><br><message class="warning">Although over 75% of Android devices we tested support all "Total Set" icons, if a substantial portion of your users use old Android devices you should stick to the "Android Safe" set. (The "Total Set" does not include icons from the "Android Safe" set.)</message>
|
||||
<pre><i class="ico">Copy and paste icons from above here!</i></pre>
|
||||
<h1>Grids</h1>
|
||||
<div class="row">
|
||||
<div class="col dark c12">12</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c11">11</div>
|
||||
<div class="col light c1">1</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c10">10</div>
|
||||
<div class="col light c2">2</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c9">9</div>
|
||||
<div class="col light c3">3</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c8">8</div>
|
||||
<div class="col light c4">4</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c7">7</div>
|
||||
<div class="col light c5">5</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c6">6</div>
|
||||
<div class="col light c6">6</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c5">5</div>
|
||||
<div class="col light c7">7</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c4">4</div>
|
||||
<div class="col light c8">8</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c3">3</div>
|
||||
<div class="col light c9">9</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c2">2</div>
|
||||
<div class="col light c10">10</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col dark c1">1</div>
|
||||
<div class="col light c11">11</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col light c12">12</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<!--[if lte IE 6]><br><br><br><![endif]-->
|
||||
|
||||
<pre><div class="row"><br> <div class="col c12">12</div><br></div>
|
||||
<br><div class="row"><br> <div class="col c4">4</div><br> <div class="col c8">8</div><br></div>
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<h1>Headings</h1>
|
||||
<div class="headings">
|
||||
<h1 class="exampleh1">h1</h1>
|
||||
<h2>h2</h2>
|
||||
<h3>h3</h3>
|
||||
<h4>h4</h4>
|
||||
<h5>h5</h5>
|
||||
<h6>h6</h6>
|
||||
<br>
|
||||
<pre><h1>Level One Heading</h1></pre>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<script type="text/javascript">
|
||||
function downloadJSAtOnload() {
|
||||
var element = document.createElement("script");
|
||||
element.src = "defer.js";
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
if (window.addEventListener)
|
||||
window.addEventListener("load", downloadJSAtOnload, false);
|
||||
else if (window.attachEvent)
|
||||
window.attachEvent("onload", downloadJSAtOnload);
|
||||
else window.onload = downloadJSAtOnload;
|
||||
</script>
|
||||
</div>
|
||||
<script src="defer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
316
download.html
316
download.html
|
|
@ -1,78 +1,254 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>min - download</title>
|
||||
<style type="text/css">body{font-family:Helvetica,sans-serif;text-align:center;margin:0;font-size:16px}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}a{text-decoration:none}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}.thin{font-weight:100}h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}button{background:#afafaf;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;box-shadow:3px 3px 0 black;color:#f3f3f3 !important;display:inline-block;font-size:2.5em;padding:15px 40px 16px;text-align:center;text-decoration:none;margin:.3em .7em .3em .7em;cursor:pointer;border:0}button.smooth{transition:background-color .15s ease-in-out}button.btn-a{background:#00a8e9}button.btn-a:hover{background:#0096d0}button.btn-a:active{background:#0083b6}button.btn-b{background:#4cc947}button.btn-b:hover{background:#3dbf38}button.btn-b:active{background:#37ab32}button.btn-c{background:#d64040}button.btn-c:hover{background:#d02d2d}button.btn-c:active{background:#bb2828}button.btn-small{padding:7px 19px 10px;font-size:16px}textarea,input{border:1px solid lightgray;outline:0;padding:6px;font-size:.8em;font-family:Helvetica,sans-serif}textarea.smooth,input.smooth{transition:border .15s ease-in-out}textarea:focus,input:focus{border:1px solid #57abb3}textarea,input[type="text"]{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border:1px solid lightgray;z-index:400;display:inline-block;border-right:0;font-size:.8em;font-family:Arial Unicode MS Regular,sans-serif !important}.navbar{width:100%;background:black;color:white;text-align:left;height:1.5em;padding:1em 0 .6em}.pagename{color:white;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:white}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left;vertical-align:top}.table td{border-top:1px solid #ddd}tbody tr:nth-child(2n-1){background:#e0e0e0}message{width:100%;display:block;padding:2em 0;background:#a7d3e4}message.warning{background:#e4a7a7}message.great{background:#a7e4ae}ico{font-size:1.9375em;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}.row{display:block;line-height:2em;margin-top:2%;height:2em}column{display:inline-block;float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}@media(max-width:720px){.row [class*="c"]{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}.ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}</style>
|
||||
<link type="text/css" rel="stylesheet/less" href="download.less"/>
|
||||
<script src="less.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-41177412-1']);
|
||||
_gaq.push(['_setDomainName', 'minfwk.com']);
|
||||
_gaq.push(['_setAllowLinker', true]);
|
||||
_gaq.push(['_trackPageview']);
|
||||
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("ico"); document.createElement("button");
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script>
|
||||
document.createElement("col"); document.createElement("message"); document.createElement("nav"); document.createElement("ico"); document.createElement("button");
|
||||
|
||||
(function() {
|
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
||||
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>min - download</title>
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<script src="IE70.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
/* Min+ plugin*/
|
||||
message {
|
||||
display: block;
|
||||
padding: 2em;
|
||||
background: #def;
|
||||
border-left: 5px solid #44e;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-color: #e44;
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.great {
|
||||
border-color: #2d2;
|
||||
background: #dfd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
/* These styles are used on this page only to make the demo page look nicer. Don't use them in your project. */
|
||||
|
||||
/* Bootstrap stuff */
|
||||
.buttonsizes * {
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* code blocks */
|
||||
pre {
|
||||
font-size: .9em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* formatting for grid system */
|
||||
.dark {
|
||||
background-color: rgb(172, 172, 172);
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: rgb(223, 223, 223);
|
||||
}
|
||||
|
||||
.col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
/* pretty heading demo display (all headings on one line) */
|
||||
.headings *:not(first-of-type) {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* fancy page heading styles */
|
||||
h1:not(.exampleh1) {
|
||||
margin: 0.2em 0;
|
||||
border-bottom: 5px solid;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* normally, the button would extend past the page top and be invisible but when it's in the middle of the page it shows */
|
||||
button.btn-close.btn-sm {
|
||||
padding-top: 4px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
/* this fixes the display of the demo-navbar when the page is resized */
|
||||
.navbar .container {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
/* support tables */
|
||||
.support span.full, .support tr.full {
|
||||
background: #3c5;
|
||||
}
|
||||
|
||||
.support span.partial, .support tr.partial {
|
||||
background: #fd5;
|
||||
}
|
||||
|
||||
.support span.none, .support tr.none {
|
||||
background: #d55;
|
||||
}
|
||||
|
||||
.key {
|
||||
padding: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.support th, .support td, .support table {
|
||||
border: 1px solid;
|
||||
}
|
||||
.support table, .support .key {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.browserdetails {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* End this-page-only styles, start beta styles */
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE styles */
|
||||
|
||||
/*
|
||||
.btn-sm {
|
||||
font-size:1em;
|
||||
margin-top: 0;
|
||||
padding-top: 1000px;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: .65em;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
margin-top: -84px;
|
||||
}
|
||||
|
||||
a.btn-sm, div.btn-sm {
|
||||
margin-top: -49px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
button.btn-sm {
|
||||
line-height: .7em;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
display: inline;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* Changes to the main CSS:
|
||||
- move media query from max-width to min-width
|
||||
*/
|
||||
|
||||
/* new beta styles */
|
||||
|
||||
</style>
|
||||
|
||||
<!--[if lte IE 6]>
|
||||
<style>
|
||||
.col {
|
||||
margin: 0.5%;
|
||||
}
|
||||
.c12 {
|
||||
margin: 0.5%;
|
||||
margin-left: 0.5%;
|
||||
width: 97%;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">min</h1>
|
||||
<h3>please select your components</h3>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="index.html">Min</a>
|
||||
<a href="docs.html">Docs</a>
|
||||
<!--
|
||||
<a href="bootstrapconverter.html">Bootstrap Converter</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
-->
|
||||
<a class="current" href="#">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<div>
|
||||
<h1>Download</h1>
|
||||
<p>
|
||||
Since Min is only 995 bytes and all of the core components are very commonly used, for most developers it makes sense to use <a href="http://www.jsdelivr.com/#!min">the CDN version from jsdelivr</a>. This provides several benefits: the user may have cached the framework, and if they have not, it will be served from a blazingly-fast server in their location instead.
|
||||
</p>
|
||||
<p>
|
||||
However, for some developers each byte counts and it makes sense to pick and choose each component. You can do so below.
|
||||
<div id="checkboxes">
|
||||
<label><input name="general" type="checkbox" checked disabled/>General (required)</label>
|
||||
<label><input name="headings" type="checkbox" checked/>Headings</label>
|
||||
<label><input name="buttons" type="checkbox" checked/>Buttons</label>
|
||||
<label><input name="inputs" type="checkbox" checked/>Inputs</label>
|
||||
<label><input name="navbar" type="checkbox"/>Navbar</label>
|
||||
<label><input name="tables" type="checkbox"/>Tables</label>
|
||||
<label><input name="icons" type="checkbox"/>Icons</label>
|
||||
<label><input name="grid" type="checkbox"/>Grid</label>
|
||||
</div>
|
||||
<a href="javascript:prettyOutput()"><button class="btn smooth btn-a">Get CSS</button></a>
|
||||
<br>
|
||||
<textarea id="result" rows="5" class="smooth" onclick="this.select();" readonly></textarea>
|
||||
<h4 id="details"></h4>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
|
||||
<div id="checkboxes">
|
||||
<label><input name="general" type="checkbox" checked disabled/>General (required) - 604 - 421 - 239</label>
|
||||
<script src="compiledcss.js" type="text/javascript"></script>
|
||||
<script src="download.js" type="text/javascript"></script>
|
||||
|
||||
<label><input name="headings" type="checkbox" checked/>Headings - 105 - 66 - 76</label>
|
||||
|
||||
<label><input name="buttons" type="checkbox" checked/>Buttons - 1048 - 833 - 413</label>
|
||||
|
||||
<label><input name="inputs" type="checkbox" checked/>Inputs - 598 - 473 - 300</label>
|
||||
|
||||
<label><input name="navbar" type="checkbox"/>Navbar - 453 - 311 - 216</label>
|
||||
|
||||
<label><input name="tables" type="checkbox"/>Tables - 270 - 200 - 175</label>
|
||||
|
||||
<label><input name="messages" type="checkbox"/>Messages - 183 - 134 - 124</label>
|
||||
|
||||
<label><input name="icons" type="checkbox"/>Icons - 155 - 80 - 98</label>
|
||||
|
||||
<label><input name="grid" type="checkbox"/>Grid - 588 - 377 - 237</label>
|
||||
|
||||
<label><input name="iehacks" type="checkbox"/>IE hacks - 131 - 98 - 100</label>
|
||||
<script type="text/javascript">
|
||||
function downloadJSAtOnload() {
|
||||
var element = document.createElement("script");
|
||||
element.src = "defer.js";
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
if (window.addEventListener)
|
||||
window.addEventListener("load", downloadJSAtOnload, false);
|
||||
else if (window.attachEvent)
|
||||
window.attachEvent("onload", downloadJSAtOnload);
|
||||
else window.onload = downloadJSAtOnload;
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<a href="javascript:prettyOutput()"><button class="smooth btn-a">Get CSS</button></a>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="mediumwidth">
|
||||
<textarea id="result" rows="5" class="smooth" onclick="this.select();" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<h4 id="details"></h4>
|
||||
|
||||
<h6 id="warning">Please note that the input size does not always correlate directly to the output size with gzip (e.g. deselecting some options can increase the gzipped file size)</h6>
|
||||
|
||||
<h5>Also available via CDN from <a style="text-decoration:underline;" href="http://www.jsdelivr.com/#!min">jsDelivr</a></h5>
|
||||
|
||||
<br>
|
||||
|
||||
<!-- Mixpanel -->
|
||||
<script type="text/javascript">(function(e,b){if(!b.__SV){var a,f,i,g;window.mixpanel=b;a=e.createElement("script");a.type="text/javascript";a.async=!0;a.src=("https:"===e.location.protocol?"https:":"http:")+'//cdn.mxpnl.com/libs/mixpanel-2.2.min.js';f=e.getElementsByTagName("script")[0];f.parentNode.insertBefore(a,f);b._i=[];b.init=function(a,e,d){function f(b,h){var a=h.split(".");2==a.length&&(b=b[a[0]],h=a[1]);b[h]=function(){b.push([h].concat(Array.prototype.slice.call(arguments,0)))}}var c=b;"undefined"!==
|
||||
typeof d?c=b[d]=[]:d="mixpanel";c.people=c.people||[];c.toString=function(b){var a="mixpanel";"mixpanel"!==d&&(a+="."+d);b||(a+=" (stub)");return a};c.people.toString=function(){return c.toString(1)+".people (stub)"};i="disable track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config people.set people.set_once people.increment people.append people.track_charge people.clear_charges people.delete_user".split(" ");for(g=0;g<i.length;g++)f(c,i[g]);
|
||||
b._i.push([a,e,d])};b.__SV=1.2}})(document,window.mixpanel||[]);
|
||||
mixpanel.init("048a77a4ae0938d041e6996dc178e173");
|
||||
mixpanel.track('Page load', {'page name' : document.title, 'url' : window.location.pathname});
|
||||
</script>
|
||||
<script src="compiledcss.js" type="text/javascript"></script>
|
||||
<script src="download.js" type="text/javascript"></script>
|
||||
<script src="defer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
13
download.js
13
download.js
|
|
@ -1,6 +1,5 @@
|
|||
function prettyOutput() {
|
||||
document.getElementById('result').style.display = "inline-block";
|
||||
document.getElementById('warning').style.display = "inline-block";
|
||||
document.getElementById('result').innerText = calculateCSS();
|
||||
}
|
||||
|
||||
|
|
@ -22,13 +21,8 @@ function calculateCSS() {
|
|||
inputs: false,
|
||||
navbar: false,
|
||||
tables: false,
|
||||
messages: false,
|
||||
icons: false,
|
||||
iehacks: false,
|
||||
grid: false,
|
||||
total: 0,
|
||||
totalmin: 0,
|
||||
totalmingzip: 0
|
||||
};
|
||||
|
||||
for (var i=0; i<document.getElementById('checkboxes').children.length; i++) {
|
||||
|
|
@ -38,11 +32,6 @@ function calculateCSS() {
|
|||
details[currentTypeName] = isChecked;
|
||||
|
||||
if (isChecked) {
|
||||
var det = getNums(document.getElementsByName(currentTypeName)[0].parentElement.innerText || document.getElementsByName(currentTypeName)[0].parentElement.textContent);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
|
||||
mincss += css[currentTypeName];
|
||||
}
|
||||
}
|
||||
|
|
@ -68,7 +57,7 @@ function calculateCSS() {
|
|||
};
|
||||
http.send(params);
|
||||
|
||||
document.getElementById('details').innerHTML = "Your download of min is " + details.total + " bytes unminified and " + details.totalmin + " bytes minified (above)";
|
||||
document.getElementById('details').innerHTML = "Your download of min is " + mincss.length + " bytes minified and un-gzipped."
|
||||
|
||||
console.log(details);
|
||||
return mincss;
|
||||
|
|
|
|||
2
entireframework.min.css
vendored
2
entireframework.min.css
vendored
|
|
@ -1 +1 @@
|
|||
body{font-family:sans-serif;text-align:center;margin:0;font-size:16px}.smooth{transition:all .2s}hr{margin:2.5em auto}hr.mediumwidth{margin:2.5em auto}.mediumwidth{font-size:16px;width:40%;margin-left:30%;margin-top:.3em;margin-bottom:.3em}@media(max-width:870px){.mediumwidth{width:70%;margin-left:15%}.row [class*='c']{width:100%;display:block;margin:1% auto}.row:last-child column{margin-bottom:2.5em}}@media(max-width:520px){.mediumwidth{width:100%;margin-left:0}hr.mediumwidth{width:auto}}ico,button,.btn{font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}button,.btn{background:#aaa;box-shadow:3px 3px #000;color:#fff;font-size:2.5em;padding:15px 40px 16px;text-decoration:none;margin:.3em .7em;cursor:pointer;border:0}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active{background:#b22}.btn-small{padding:7px 19px;font-size:16px}.row{line-height:2em;margin-top:2%;overflow:auto}column{float:left;margin:auto 1%}.ie column{margin:auto .7%}.c10{width:98%}.c9{width:88%}.c8{width:78%}.c7{width:68%}.c6{width:58%}.c5{width:48%}.c4{width:38%}.c3{width:28%}.c2{width:18%}.c1{width:8%}.title{font-size:7em;margin:0}h1{font-size:4em;margin:0}h2{font-size:2em}ico{font-size:2.04em}.ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}textarea,input{outline:0;padding:6px;font-family:sans-serif}textarea:focus,input:focus{border:1px solid #5ab}textarea,input[type='text']{width:13em}.addon-front{padding:6px 11px 6px 10px;margin-right:-2px;border-right:0}textarea,input,.addon-front{border:1px solid #ccc;font-size:.8em}message{display:block;padding:2em 0;background:#ACE}message.warning{background:#D99}message.great{background:#9D9}.navbar{width:100%;background:#000;color:#fff;text-align:left;height:1.5em;padding:1em 0 .6em}.navbar a{text-decoration:none}.pagename{color:#fff;padding:0 1em 0 2em;font-weight:bold}.navbar-link{padding:.5em;color:#aaa}.navbar-link:hover{color:#fff}.navbar input,.navbar button,.navbar .btn{margin-top:-20px}@media(max-width:500px){.navbar a{text-align:center;display:block}.navbar{height:7.5em}}table{width:100%;border-spacing:0}.table th,.table td{padding:.5em;line-height:1.4em;text-align:left}tbody tr:nth-child(2n-1){background:#CCC}
|
||||
/*Copyright 2014 Owen Versteeg; MIT licensed*/body,textarea{font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}*{outline:0}.container{width:1270px;margin:auto}@media(max-width:1310px){.container{margin:0 20px;width:auto}}label>*{display:inline}form>*{display:block;margin-bottom:10px}.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;font-size:2em;margin:.2em .3em .2em 0;padding:12px 30px 14px}.btn:hover{background:#888}.btn:active,.btn:focus{background:#777}.btn-a{background:#0ae}.btn-a:hover{background:#09d}.btn-a:active,.btn-a:focus{background:#08b}.btn-b{background:#3c5}.btn-b:hover{background:#2b4}.btn-b:active,.btn-b:focus{background:#2a4}.btn-c{background:#d33}.btn-c:hover{background:#c22}.btn-c:active,.btn-c:focus{background:#b22}.btn-sm{border-radius:4px;padding:10px 15px 11px}.row{margin-top:2%;overflow:auto}.col{float:left}.c12,.table{width:100%}.c11{width:91.66%}.c10{width:83.33%}.c9{width:75%}.c8{width:66.66%}.c7{width:58.33%}.c6{width:50%}.c5{width:41.66%}.c4{width:33.33%}.c3{width:25%}.c2{width:16.66%}.c1{width:8.33%}@media(max-width:870px){.row .col{width:100%}}h1{font-size:4em}h2{font-size:2em}.ico{font:2.04em Arial Unicode MS,Lucida Sans Unicode}textarea,input,.addon-front,.btn-sm,.nav a{font-size:.9em}textarea,input{border:1px solid #ccc;padding:8px}textarea:focus,input:focus{border-color:#5ab}textarea,input[type='text']{width:13em;-webkit-appearance:none}.addon-front{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:1.5em;padding:.7em 0 .95em}.nav a{padding-right:1em;color:#aaa;top:-1px;position:relative}.btn.btn-close{background:#000;visibility:hidden;float:right;margin-top:-54px;font-size:25px}.nav .pagename{font-size:22px;top:1px}@media(max-width:500px){.btn.btn-close{visibility:visible}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:focus{height:auto}.nav div:before{content:'';border-top:3px solid;border-bottom:10px double;float:right;height:4px;right:3px;top:14px;width:20px;position:relative;background:#000}.nav a{padding:.5em 0;width:50%;display:block}}.table{border-spacing:0}.table th,.table td{padding:.5em;text-align:left}.table tbody>*:nth-child(2n-1){background:#ddd}
|
||||
448
index.html
448
index.html
|
|
@ -1,126 +1,322 @@
|
|||
<!DOCTYPE html><!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]--><head>
|
||||
<!--[if lt IE 9]>
|
||||
<script> document.createElement("column"); document.createElement("message"); </script>
|
||||
<![endif]-->
|
||||
<style type="text/css">pre {font-size: .9em;}.dark {background-color: rgb(172, 172, 172);}.light {background-color: rgb(223, 223, 223);}</style><meta charset="UTF-8"><title>min</title>
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body><br><h1 class="title">min</h1><h3>995 byte CSS framework · supports ie5.5+ · <a href="https://github.com/owenversteeg/min"><u>on github</u></a></h3><hr class="mediumwidth"><div class="buttons"><a href="#"><button class="smooth btn-a">btn-a</button></a><a href="#"><button class="smooth btn-b">btn-b</button></a><a href="#"><button class="smooth btn-c">btn-c</button></a>
|
||||
<br><br><pre><button class="smooth btn-b">btn-small</button></pre>
|
||||
<br><a href="http://minframework.com"><button class="smooth btn-b btn-small">btn-small</button></a>
|
||||
<br><br><pre><button class="smooth btn-b btn-small">btn-small</button></pre>
|
||||
</div>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
<h1 class="title">h1 title</h1><h1>h1</h1><h2>h2</h2><h3>h3</h3><h4>h4</h4><h5>h5</h5><h6>h6</h6><br>
|
||||
<pre><h1 class="title">h1 title</h1></pre>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
<div class="mediumwidth">
|
||||
<input type="text" class="smooth" placeholder="input type="text""><br><br>
|
||||
<textarea rows="3" class="smooth" placeholder="textarea"></textarea><br><br><span class="addon-front">$</span><input type="text" class="smooth" placeholder="span class="addon-front"">
|
||||
<br><br>
|
||||
<pre><input type="text" class="smooth">
|
||||
<br><textarea rows="3" class="smooth">
|
||||
<br><span class="addon-front"></span><input type="text" class="smooth"></pre>
|
||||
</div>
|
||||
|
||||
<hr class="mediumwidth"><div class="mediumwidth"><div class="navbar"><a class="pagename" href="#"><!--[if lt IE 6]> <![endif]-->Min Framework</a> <a class="navbar-link" href="#">One</a> <a class="navbar-link" href="#">Two</a> <a class="navbar-link" href="#">Three</a></div></div>
|
||||
<br><pre><div class="navbar"><br><a class="pagename" href="#">Min Framework</a><br><a class="navbar-link" href="#">One</a><br> <a class="navbar-link" href="#">Two</a> <br><a class="navbar-link" href="#">Three</a><br></div></pre>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
<div class="mediumwidth"><table class="table-striped table"><thead><tr><th>#</th><th>Widgets Sold</th><th>Revenue (£)</th><th>Profit (£)</th></tr></thead><tbody><tr><td>1</td><td>5</td><td>10</td><td>2</td></tr><tr><td>2</td><td>10</td><td>20</td><td>4</td></tr><tr><td>3</td><td>500</td><td>1000</td><td>200</td></tr></tbody></table>
|
||||
<br><br>
|
||||
<pre><table class="table-striped table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Widgets Sold</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>5</td>
|
||||
</tr><tr>
|
||||
<td>2</td>
|
||||
<td>10</td>
|
||||
</tr><tr>
|
||||
<td>3</td>
|
||||
<td>500</td>
|
||||
</tr></tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
<hr class="mediumwidth"><div class="mediumwidth"><message class="warning"><strong>Watch out!</strong> You don't have H9RBS.js installed.</message><br><message class="great"><strong>Great!</strong> You successfully frobjugated the minlingator's snorbdralob.</message><br><message><strong>Hey!</strong> You've got four thousand new grabjalognibs!</message>
|
||||
<br><br>
|
||||
<pre><message class="warning"><br><strong>Watch out!</strong> <br>You don't have H9RBS.js installed.<br></message>
|
||||
<br><message class="great"><br><strong>Great!</strong> <br>You successfully frobjugated the minlingator's snorbdralob.<br></message>
|
||||
<br><message><br><strong>Hey!</strong> <br> You've got four thousand new grabjalognibs!<br></message></pre>
|
||||
</div>
|
||||
<hr class="mediumwidth">
|
||||
<div class="icons">
|
||||
<ico>✉ ✰ ☁ ⌚ ⌘ ☎ ✈ ☑ ☒</ico><br><br>
|
||||
<ico>♂ ♀ ⌛ ☀ ☮ ☢ ☠ ☣ ⌨</ico><br><br>
|
||||
<ico>ⓧ © § ® ⌂ ℗ ☺ ☻ ☼</ico><br><br>
|
||||
<ico>⇦ ⇧ ⇨ ⇩ ∡ ∿ ⊝ ⊘ ⌂</ico><br><br>
|
||||
<ico>⁂ ⚛ ☤ ♠ ♣ ♥ ♦ ♪ ♫</ico><br><br>
|
||||
<ico>♚ ♛ ♜ ♝ ♞ ♟ ☕ ⚰ ☄ </ico><br><br>
|
||||
<ico>☟ ☜ ☝ ☞ ♱ ⚑ ☹ ⚘ ☙ </ico><br><br>
|
||||
<ico>⚒ ☭ ☚ ☛ ⚥ ✌ 〠 ♨ ☃</ico><br><br>
|
||||
<ico>♭ ♮ ♯ ⚔ ⚢ ⚣ ⚜ ⚒ </ico><br><br>
|
||||
<ico>☂ ⚱ ⚡ ♰ ☸ ✍ ☯ ⍨ ✂</ico><br><br>
|
||||
<pre><ico>Copy and paste icons from above here!</ico></pre>
|
||||
</div>
|
||||
<hr class="mediumwidth"><div class="mediumwidth">
|
||||
<div class="row"><column class="dark c10">10</column></div><div class="row"><column class="dark c9">9</column><column class="light c1">1</column></div><div class="row"><column class="dark c8">8</column><column class="light c2">2</column></div><div class="row"><column class="dark c7">7</column><column class="light c3">3</column></div><div class="row"><column class="dark c6">6</column><column class="light c4">4</column></div><div class="row"><column class="dark c5">5</column><column class="light c5">5</column></div><div class="row"><column class="dark c4">4</column><column class="light c6">6</column></div><div class="row"><column class="dark c3">3</column><column class="light c7">7</column></div><div class="row"><column class="dark c2">2</column><column class="light c8">8</column></div><div class="row"><column class="dark c1">1</column><column class="light c9">9</column></div><div class="row"><column class="light c10">10</column></div>
|
||||
<br> <pre><div class="row"><br><column class="c10">10</column><br></div>
|
||||
<br><div class="row"><br><column class="c4">4</column><br><column class="c6">6</column><br></div>
|
||||
</pre>
|
||||
</div>
|
||||
<hr class="mediumwidth"><a href="download.html"><button class="smooth btn-a" style="margin: 0 0 .2em 0;">Download</button></a>
|
||||
<hr class="mediumwidth">
|
||||
<!--analytics-->
|
||||
|
||||
<h2><a href="bootstrapconverter.html">bootstrap to min converter</a></h2>
|
||||
|
||||
<h2>websites built using min:</h2><br><a href="http://goalcalendar.com">GoalCalendar</a> · <a href="http://openleap.org">OpenLeap</a><br><br>
|
||||
to encourage further development, you can tip me with <a href="https://www.gittip.com/OwenVersteeg/">gittip</a>, <a href="https://blockchain.info/address/1Na9Nuk8WNm59JjcFG1Nvgsg29GHJyT8pV">bitcoin</a>, or <a href="http://dogechain.info/address/DQowenvAUoF5rQrhq8s53Cesg9Y3nU857G">dogecoin</a>. thanks!<br><br>
|
||||
|
||||
<script type="text/javascript">
|
||||
function downloadJSAtOnload() {
|
||||
var element = document.createElement("script");
|
||||
element.src = "defer.js";
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
if (window.addEventListener)
|
||||
window.addEventListener("load", downloadJSAtOnload, false);
|
||||
else if (window.attachEvent)
|
||||
window.attachEvent("onload", downloadJSAtOnload);
|
||||
else window.onload = downloadJSAtOnload;
|
||||
</script>
|
||||
<!-- Quantcast Tag -->
|
||||
<script type="text/javascript">
|
||||
var _qevents = _qevents || [];
|
||||
|
||||
(function() {
|
||||
var elem = document.createElement('script');
|
||||
elem.src = (document.location.protocol == "https:" ? "https://secure" : "http://edge") + ".quantserve.com/quant.js";
|
||||
elem.async = true;
|
||||
elem.type = "text/javascript";
|
||||
var scpt = document.getElementsByTagName('script')[0];
|
||||
scpt.parentNode.insertBefore(elem, scpt);
|
||||
})();
|
||||
|
||||
_qevents.push({
|
||||
qacct:"p-4UQY7SYFeUHE_"
|
||||
});
|
||||
</script>
|
||||
|
||||
<noscript>
|
||||
<div style="display:none;">
|
||||
<img src="//pixel.quantserve.com/pixel/p-4UQY7SYFeUHE_.gif" border="0" height="1" width="1" alt="Quantcast"/>
|
||||
</div>
|
||||
</noscript>
|
||||
<!-- End Quantcast tag -->
|
||||
</body>
|
||||
</html>
|
||||
<!DOCTYPE html>
|
||||
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("ico"); document.createElement("button");
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script>
|
||||
document.createElement("col"); document.createElement("message"); document.createElement("nav"); document.createElement("ico"); document.createElement("button");
|
||||
|
||||
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>min</title>
|
||||
|
||||
<!--[if lt IE 7]>
|
||||
<script src="IE70.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<style type="text/css">
|
||||
/* Min+ plugin*/
|
||||
message {
|
||||
display: block;
|
||||
padding: 2em;
|
||||
background: #def;
|
||||
border-left: 5px solid #44e;
|
||||
}
|
||||
|
||||
.warning {
|
||||
border-color: #e44;
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.great {
|
||||
border-color: #2d2;
|
||||
background: #dfd;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style type="text/css">
|
||||
/* These styles are used on this page only to make the demo page look nicer. Don't use them in your project. */
|
||||
|
||||
/* Bootstrap stuff */
|
||||
.buttonsizes * {
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 0;
|
||||
margin-right: 10px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* code blocks */
|
||||
pre {
|
||||
font-size: .9em;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
/* formatting for grid system */
|
||||
.dark {
|
||||
background-color: rgb(172, 172, 172);
|
||||
}
|
||||
|
||||
.light {
|
||||
background-color: rgb(223, 223, 223);
|
||||
}
|
||||
|
||||
.col {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row {
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
/* pretty heading demo display (all headings on one line) */
|
||||
.headings *:not(first-of-type) {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
/* fancy page heading styles */
|
||||
h1:not(.exampleh1) {
|
||||
margin: 0.2em 0;
|
||||
border-bottom: 5px solid;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
/* normally, the button would extend past the page top and be invisible but when it's in the middle of the page it shows */
|
||||
button.btn-close.btn-sm {
|
||||
padding-top: 4px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
/* this fixes the display of the demo-navbar when the page is resized */
|
||||
.navbar .container {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
/* support tables */
|
||||
.support span.full, .support tr.full {
|
||||
background: #3c5;
|
||||
}
|
||||
|
||||
.support span.partial, .support tr.partial {
|
||||
background: #fd5;
|
||||
}
|
||||
|
||||
.support span.none, .support tr.none {
|
||||
background: #d55;
|
||||
}
|
||||
|
||||
.key {
|
||||
padding: 5px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.support th, .support td, .support table {
|
||||
border: 1px solid;
|
||||
}
|
||||
.support table, .support .key {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.browserdetails {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* End this-page-only styles, start beta styles */
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* IE styles */
|
||||
|
||||
/*
|
||||
.btn-sm {
|
||||
font-size:1em;
|
||||
margin-top: 0;
|
||||
padding-top: 1000px;
|
||||
}
|
||||
|
||||
button {
|
||||
line-height: .65em;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
margin-top: -84px;
|
||||
}
|
||||
|
||||
a.btn-sm, div.btn-sm {
|
||||
margin-top: -49px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
button.btn-sm {
|
||||
line-height: .7em;
|
||||
padding-top: 11px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: auto;
|
||||
display: inline;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
/* Changes to the main CSS:
|
||||
- move media query from max-width to min-width
|
||||
*/
|
||||
|
||||
/* new beta styles */
|
||||
h1.title {
|
||||
border-bottom: none;
|
||||
font-size: 90px;
|
||||
margin-top: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero em {
|
||||
color: #91D564;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
background: #72bf9e;
|
||||
background: #87aceb;
|
||||
background: #80B6FA;
|
||||
background-image: url('congruent_outline.png');
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 50px;
|
||||
box-sizing: border-box;
|
||||
color: #ddd;
|
||||
}
|
||||
.intro .c2 {
|
||||
height: 1px;
|
||||
}
|
||||
.intro .c4 {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.intro .c4:nth-child(2) {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.intro .c4:nth-child(3) {
|
||||
padding-left: 15px;
|
||||
}
|
||||
@media (max-width: 870px) {
|
||||
.intro .c2 {
|
||||
width: 16.66%;
|
||||
}
|
||||
.intro .c4 {
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
.intro .c2 {
|
||||
display: none;
|
||||
}
|
||||
.intro .c4 {
|
||||
width: 50%;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.intro .c4 p {
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--[if lte IE 6]>
|
||||
<style>
|
||||
.col {
|
||||
margin: 0.5%;
|
||||
}
|
||||
.c12 {
|
||||
margin: 0.5%;
|
||||
margin-left: 0.5%;
|
||||
width: 97%;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="index.html">Min</a>
|
||||
<a href="docs.html">Docs</a>
|
||||
<!--
|
||||
<a href="bootstrapconverter.html">Bootstrap Converter</a>
|
||||
<a href="examples.html">Examples</a>
|
||||
-->
|
||||
<a href="download.html">Download</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="hero">
|
||||
<h1 class="title">Min</h1>
|
||||
<h3>The <em>995 byte</em> CSS framework that supports <em>IE5.5+</em></h3>
|
||||
</div>
|
||||
<div class="row intro">
|
||||
<div class="col c2"> </div>
|
||||
<div class="col c4">
|
||||
<h3>Exceptional browser support</h3>
|
||||
<p>Min supports IE5.5+, FF3+, Opera 9+, and Safari 4+, the best browser support of any CSS framework by far. Unfortunately, IE5.5 does not support border-radius and as such does not have rounded button corners.That said, IE5.5 users will be so surprised to see a site load correctly they will overlook this.</p>
|
||||
</div>
|
||||
<div class="col c4">
|
||||
<h3>Ridiculously small</h3>
|
||||
<p>Min is only 995 bytes, so it will never slow down your website unlike bulky frameworks like Bootstrap. Min also does not require Javascript. Pages built with Min can faster than a blink of an eye. (Average loading times for three Min pages tested were 334ms; a human eye blink is 400ms.)</p>
|
||||
</div>
|
||||
<div class="col c2"> </div>
|
||||
</div>
|
||||
<div class="row intro">
|
||||
<div class="col c2"> </div>
|
||||
<div class="col c4">
|
||||
<h3>Unprescriptive</h3>
|
||||
<p>Min is extremely lightweight and doesn't prescribe a certain design for you, like Bootstrap. It's easy to override the default rules since there are so few of them and they are at low specificity levels. This customizability helps you avoid the Yet Another Bootstrap Site phenomenon.</p>
|
||||
</div>
|
||||
<div class="col c4">
|
||||
<h3>Semantic markup</h3>
|
||||
<p>Min uses the new HTML5 semantic elements liberally, has clear and short class names, and uses <div>s sparingly. Patients that switched from Bootstrap to Min reported up to a ninefold decrease in markup and drastic improvements in most cases of divitis. Ask your CSS-atrician if Min is right for you.</p>
|
||||
</div>
|
||||
<div class="col c2"> </div>
|
||||
</div>
|
||||
<div class="row intro">
|
||||
<div class="col c2"> </div>
|
||||
<div class="col c4">
|
||||
<a href="docs.html" class="btn btn-a">Docs</a>
|
||||
</div>
|
||||
<div class="col c4">
|
||||
<a href="download.html" class="btn btn-b">Download</a>
|
||||
</div>
|
||||
<div class="col c2"> </div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="container">
|
||||
|
||||
<script type="text/javascript">
|
||||
function downloadJSAtOnload() {
|
||||
var element = document.createElement("script");
|
||||
element.src = "defer.js";
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
if (window.addEventListener)
|
||||
window.addEventListener("load", downloadJSAtOnload, false);
|
||||
else if (window.attachEvent)
|
||||
window.attachEvent("onload", downloadJSAtOnload);
|
||||
else window.onload = downloadJSAtOnload;
|
||||
</script>
|
||||
</div>
|
||||
<script src="defer.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
.btn {
|
||||
background: #999;
|
||||
border-radius: 10px; /* rounded corners */
|
||||
border-radius: 6px; /* rounded corners */
|
||||
border: 0;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
display: inline-block; /* Enables non-inline-block elements like <div>s to be buttons */
|
||||
font-size: 2.5em;
|
||||
font-size: 2em;
|
||||
margin: .2em .3em .2em 0;
|
||||
padding: 15px 40px 16px;
|
||||
padding: 12px 30px 14px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
|
|
@ -51,6 +51,5 @@
|
|||
|
||||
.btn-sm {
|
||||
border-radius: 4px; /* rounded corners */
|
||||
font-size: .9em;
|
||||
padding: 10px 15px 11px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ body, textarea {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn, .nav {
|
||||
outline: 0; /* when the button or navbar is focused, don't show an outline */
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -26,3 +26,12 @@ body, textarea {
|
|||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
label > * {
|
||||
display:inline
|
||||
}
|
||||
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
float: left;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
.c12, .table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,10 @@
|
|||
textarea, input, .addon-front {
|
||||
font-size: .8em;
|
||||
textarea, input, .addon-front, .btn-sm, .nav a {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
textarea, input {
|
||||
border: 1px solid #ccc;
|
||||
outline: 0;
|
||||
padding: 6px;
|
||||
-webkit-appearance: none; /* make iOS inputs pretty */
|
||||
padding: 8px;
|
||||
&:focus {
|
||||
border-color: #5ab;
|
||||
}
|
||||
|
|
@ -14,9 +12,10 @@ textarea, input {
|
|||
|
||||
textarea, input[type='text'] {
|
||||
width: 13em;
|
||||
-webkit-appearance: none; /* make iOS inputs pretty */
|
||||
}
|
||||
|
||||
.addon-front {
|
||||
padding: 6px 11px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
padding-right: 1em;
|
||||
color: #aaa;
|
||||
top: -1px;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
table {
|
||||
width: 100%;
|
||||
.table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
th, td {
|
||||
.table th, .table td {
|
||||
padding: .5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2n-1) {
|
||||
.table tbody>*:nth-child(2n-1) {
|
||||
/* We use tbody to ensure that we don't shade the heading - this preserves the order of the shading */
|
||||
background: #ccc; /* Shade every other table row */
|
||||
background: #ddd; /* Shade every other table row */
|
||||
}
|
||||
|
|
|
|||
BIN
yuicompressor-2.4.8.jar
Normal file
BIN
yuicompressor-2.4.8.jar
Normal file
Binary file not shown.
Loading…
Add table
Reference in a new issue