146 lines
4.4 KiB
HTML
146 lines
4.4 KiB
HTML
<!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>
|