0ct0pu5/min
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

re-made downloads page

Browse source
This commit is contained in:
Owen Versteeg 2014-09-21 19:02:12 -04:00
parent c223f9d083
commit f1a38c50cc
2 changed files with 47 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
download.html
View file

@ -39,6 +39,23 @@
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]>
@ -72,29 +89,36 @@
</nav>
<button class="btn btn-sm btn-close">×</button>
<div class="container">
<div>
<h1>Download</h1>
<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>
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="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>
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>
</div>
</div>
<script src="compiledcss.js" type="text/javascript"></script>

2
download.js
View file

@ -58,7 +58,7 @@ function calculateCSS() {
};
http.send(params);
document.getElementById('details').innerHTML = "Your download of min is " + mincss.length + " bytes minified and un-gzipped."
document.getElementById('details').innerHTML = "Your customized Min is about " + Math.round(-1*(((mincss.length/2274)-1)*100)) + "% smaller, or about "+ Math.round(((mincss.length/2274)*995)) +" bytes minified and gzipped."
console.log(details);
return mincss;