-
Notifications
You must be signed in to change notification settings - Fork 107
/
Copy pathdownload.html
145 lines (133 loc) · 4.41 KB
/
download.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
document.createElement("nav"); document.createElement("button");
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>min - download</title>
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<style>
html {
overflow-x: hidden;
}
</style>
<![endif]-->
<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;
}
/* Fun h1s */
h1:not(.exampleh1) {
margin: 0.2em 0;
border-bottom: 5px solid;
margin-bottom: 15px;
padding-bottom: 5px;
}
.fourways {
color: #666;
margin-bottom: 0;
}
small {
color: #6b6;
font-size: 0.6em;
}
</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 class="current" href="#">Download</a>
<a href="examples.html">Examples</a>
<a href="https://github.com/owenversteeg/min">Github</a>
</div>
</nav>
<button class="btn btn-sm btn-close">×</button>
<div class="container">
<h2 class="fourways">There are four ways to use Min:</h2>
<h1>CDN <small>(Recommended)</small></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>
<h1>Download</h1>
<p>
Some developers prefer to serve Min from their own servers. Make sure that your server automatically gzips Min (and other CSS files) to ensure that your users get the fastest page times possible.
</p>
<a class="btn btn-sm btn-a" href="entireframework.min.css" download>Download Min</a>
<h1>Customized download</h1>
<p>
For some developers, every byte counts, so it makes sense to pick and choose each component of Min. 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="forms" type="checkbox" checked/>Forms</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>
<label><input name="messages" type="checkbox"/>Messages</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>
<h1>Bower</h1>
<p>
If you prefer to use Bower, just run <code>bower install min</code>. This will give you Min as well as the LESS files it's built from.
</p>
</div>
<script src="compiledcss.js" type="text/javascript"></script>
<script src="download.js" type="text/javascript"></script>
<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>
<script src="defer.js"></script>
</body>
</html>