Compare commits
No commits in common. "gh-pages" and "v1.0" have entirely different histories.
75 changed files with 884 additions and 3587 deletions
5
.gitignore
vendored
5
.gitignore
vendored
|
|
@ -1,5 +0,0 @@
|
|||
/sass/.DS_Store
|
||||
|
||||
/.sass-cache
|
||||
|
||||
/sass/.sass-cache/
|
||||
2
CNAME
2
CNAME
|
|
@ -1 +1 @@
|
|||
mincss.com
|
||||
minfwk.com
|
||||
|
|
|
|||
54
README.md
54
README.md
|
|
@ -3,53 +3,15 @@ min
|
|||
|
||||
a tiny framework that makes websites pretty
|
||||
|
||||
Written in LESS and Sass, compiled to CSS.
|
||||
Written in LESS, compiled to CSS. Access the current beta (here) [http://minfwk.com/beta.html]
|
||||
|
||||
###Tiny
|
||||
964 bytes minified and gzipped.
|
||||
|
||||
### Tiny
|
||||
995 bytes minified and gzipped.
|
||||
###Compatible
|
||||
Works with IE5 and onward. Yes, min is even responsive in IE5.
|
||||
|
||||
### Compatible
|
||||
Works with IE5.5 and onward, as well as all other major browsers. Check out the [docs](http://mincss.com/docs.html) for exact support data.
|
||||
Of course, modern browsers give you pretty transitions.
|
||||
|
||||
Of course, modern browsers give you pretty transitions and rounded corners.
|
||||
|
||||
### Converter
|
||||
|
||||
Check out the (beta) Min -> Bootstrap converter. http://mincss.com/bootstrapconverter.html
|
||||
|
||||
### License
|
||||
MIT licensed.
|
||||
|
||||
### Contributing
|
||||
|
||||
We encourage you to contribute anything you can to Min. If you have an idea for a new feature, open a new issue with the Enhancement tag.
|
||||
|
||||
If you want to contribute code:
|
||||
|
||||
1. Fork Min
|
||||
2. You can edit either the Sass or LESS files.
|
||||
- DO NOT change any of the compiled files, either by using build.sh or by editing them manually.
|
||||
- Min uses tabs, all lowercase, and is liberal with spacing. Use this style.
|
||||
- Don't skimp on spaces to save space - the YUI compressor does this automatically.
|
||||
3. Submit a pull request. If you can (or if relevant), include the size of Min (minified and gzipped) before and after your changes, and take screenshots of what changed.
|
||||
|
||||
### Building the latest Min
|
||||
|
||||
WARNING! This will build the latest, pre-release version of Min. It may be broken. If you want to use an already-built Min, it's available in the file entireframework.min.css as well as through the [downloads page](http://mincss.com/download.html).
|
||||
|
||||
You must have lessc (to compile the LESS, obviously) and Java (to run YUI compressor) installed.
|
||||
|
||||
bash build.sh
|
||||
|
||||
### World's smallest? Really?
|
||||
TL;DR Min really is the world's smallest CSS framework, however you slice it.
|
||||
|
||||
We personally feel that the criteria for "world's smallest CSS framework" are buttons, inputs, navbars, tables, icons, grids, headings, and standardization of these elements across the "Big 5" browsers (Chrome, Firefox, Opera, Safari, and Internet Explorer.) Of course, your criteria for what a CSS framework is are likely to be different, and thus you are encouraged to (on the Downloads page) download whatever parts you feel to be relevant. No matter what you select (and what you compare Min to) Min will be smaller. Thus, Min really is the world's smallest CSS framework, no matter your criteria for what a CSS framework is.
|
||||
|
||||
|
||||
### Sponsors
|
||||
|
||||
Thanks to @browserstack and @saucelabs for providing free unlimited browser testing.
|
||||
|
||||
If you would like to sponsor Min, contact Owen Versteeg: me@owenversteeg.com
|
||||
###License
|
||||
MIT licensed.
|
||||
220
beta.html
Normal file
220
beta.html
Normal file
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>min</title>
|
||||
<link type="text/css" rel="stylesheet/less" href="min.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']);
|
||||
|
||||
(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>
|
||||
<!--[if lt IE 9]>
|
||||
<script> document.createElement("column"); document.createElement("message"); </script>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
.dark {
|
||||
background-color: rgb(172, 172, 172);
|
||||
}
|
||||
.light {
|
||||
background-color: rgb(223, 223, 223);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="title">min</h1>
|
||||
<h3>the tiny framework · <a href="https://github.com/owenversteeg/min"><u>on github</u></a></h3>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
|
||||
<div class="buttons">
|
||||
<a href="http://github.com/owenversteeg/min"><button class="smooth btn-a">btn-a</button></a>
|
||||
<a href="http://minfwk.com"><button class="smooth btn-b">btn-b</button></a>
|
||||
<a href="http://minframework.com"><button class="smooth btn-c">btn-c</button></a>
|
||||
<br><br>
|
||||
<a href="http://minframework.com"><button class="smooth btn-b btn-small">btn-small</button></a>
|
||||
</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>
|
||||
|
||||
<hr 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"">
|
||||
|
||||
<hr class="mediumwidth">
|
||||
|
||||
<div class="mediumwidth">
|
||||
<div class="navbar">
|
||||
<a class="pagename" href="#">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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
|
||||
<a href="download.html"><button class="smooth btn-a" style="margin: 0 0 1em 0;">Download</button></a>
|
||||
|
||||
<br>
|
||||
|
||||
<!--analytics-->
|
||||
|
||||
<!-- start 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><!-- end Mixpanel -->
|
||||
<script type="text/javascript">
|
||||
var GoSquared = {};
|
||||
GoSquared.acct = "GSN-336891-I";
|
||||
(function(w){
|
||||
function gs(){
|
||||
w._gstc_lt = +new Date;
|
||||
var d = document, g = d.createElement("script");
|
||||
g.type = "text/javascript";
|
||||
g.src = "//d1l6p2sc9645hc.cloudfront.net/tracker.js";
|
||||
var s = d.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(g, s);
|
||||
}
|
||||
w.addEventListener ?
|
||||
w.addEventListener("load", gs, false) :
|
||||
w.attachEvent("onload", gs);
|
||||
})(window);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,237 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Bootstrap to Min converter</title>
|
||||
<link rel="stylesheet" href="http://mincss.com/entireframework.min.css" type="text/css">
|
||||
<style type="text/css">
|
||||
iframe {
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
}
|
||||
#convertedHTMLDiv {
|
||||
max-width: 70%;
|
||||
margin-left: 15%;
|
||||
text-align: left;
|
||||
}
|
||||
body {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script>
|
||||
//jQuery plugin to change an element's tagname
|
||||
//http://stackoverflow.com/questions/8584098/how-to-change-an-element-type-using-jquery
|
||||
(function($) {
|
||||
$.fn.changeElementType = function(newType) {
|
||||
if (this[0]) {
|
||||
var attrs = {};
|
||||
|
||||
$.each(this[0].attributes, function(idx, attr) {
|
||||
attrs[attr.nodeName] = attr.nodeValue;
|
||||
});
|
||||
|
||||
this.replaceWith(function() {
|
||||
return $("<" + newType + "/>", attrs).append($(this).contents());
|
||||
});
|
||||
} else {
|
||||
console.log('Error - no such element')
|
||||
}
|
||||
};
|
||||
})(jQuery);
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Bootstrap to Min converter</h2>
|
||||
<textarea id="enteredHTML" placeholder="Enter the body of your HTML page here"></textarea>
|
||||
<br>
|
||||
<a onclick="convertHTML(document.getElementById('enteredHTML').value)"><button class="smooth btn btn-a dontconvert">Convert HTML</button></a>
|
||||
<br>
|
||||
<a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[0]"><button class="smooth btn btn-b btn-sm dontconvert">Load 1st Bootstrap example</button></a>
|
||||
<br>
|
||||
<a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[1]"><button class="smooth btn btn-c btn-sm dontconvert">Load 2nd Bootstrap example</button></a>
|
||||
<br>
|
||||
<a onclick="document.getElementById('enteredHTML').value=bootstrapExamples[2]"><button class="smooth btn btn-a btn-sm dontconvert">Load 3rd Bootstrap example</button></a>
|
||||
<br><br>
|
||||
<div id="messagesDiv" class="mediumwidth"></div>
|
||||
<br>
|
||||
<div id="convertedHTMLDiv">
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
bootstrapExamples = [
|
||||
'<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="navbar-collapse collapse"><form class="navbar-form navbar-right" role="form"><div class="form-group"> <input type="text" placeholder="Email" class="form-control"></div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"></div><button type="submit" class="btn btn-success">Sign in</button></form></div><!--/.navbar-collapse --></div></div><!-- Main jumbotron for a primary marketing message or call to action --><div class="jumbotron"><div class="container"><h1>Hello, world!</h1><p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p><p><a class="btn btn-primary btn-lg" role="button">Learn more »</a></p></div></div><div class="container"><!-- Example row of columns --><div class="row"><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><a class="btn btn-default" href="#" role="button">View details »</a></p></div><div class="col-md-4"><h2>Heading</h2><p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><p><a class="btn btn-default" href="#" role="button">View details »</a></p></div><div class="col-md-4"><h2>Heading</h2><p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p><p><a class="btn btn-default" href="#" role="button">View details »</a></p></div></div><hr><footer><p>© Company 2013</p></footer></div>',
|
||||
'<div class="navbar navbar-inverse navbar-fixed-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="collapse navbar-collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a> </li><li><a href="#about">About</a> </li><li><a href="#contact">Contact</a> </li></ul></div><!--/.nav-collapse --></div></div><div class="container"><div class="starter-template"><h1>Bootstrap starter template</h1><p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p></div></div><!-- /.container -->',
|
||||
'<div class="navbar navbar-default navbar-static-top" role="navigation"><div class="container"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Project name</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#about">About</a></li><li><a href="#contact">Contact</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else</a></li><li class="divider"></li><li class="dropdown-header">Nav header</li><li><a href="#">Separated link</a></li><li><a href="#">One more link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="../navbar/">Default</a></li><li class="active"><a href="./">Static top</a></li><li><a href="../navbar-fixed-top/">Fixed top</a></li></ul></div><!--/.nav-collapse --></div></div><div class="container"><!-- Main component for a primary marketing message or call to action --><div class="jumbotron"><h1>Navbar example</h1><p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p><p>To see the difference between static and fixed top navbars, just scroll.</p><p><a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a></p></div>',
|
||||
'<nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div></div></nav>'
|
||||
]
|
||||
|
||||
function moveFromAToB(a, b, which) {
|
||||
//Moves the inside of an element to the inside of another.
|
||||
//Takes two strings (for element selectors)
|
||||
//and an array, which, that says what nth element to select.
|
||||
if (!which) var which = [0,0]
|
||||
|
||||
if ($(a)[which[0]] && $(b)[which[1]]) {
|
||||
$(b)[which[1]].innerHTML += $(a)[which[0]].innerHTML;
|
||||
$(a)[which[0]].remove();
|
||||
}
|
||||
}
|
||||
|
||||
function printMessage(messageText, messageType) {
|
||||
$('#messagesDiv')[0].innerHTML += "<message class='"+messageType+"'>"+messageText+"</message><br>";
|
||||
}
|
||||
|
||||
function convertHTML(htmlToConvert) {
|
||||
//Erase previous messages
|
||||
$('#messagesDiv')[0].innerHTML = "";
|
||||
|
||||
convertedHTML = htmlToConvert;
|
||||
convertedHTMLDiv.innerHTML = convertedHTML;
|
||||
|
||||
//First, we convert from Bootstrap's columns to Min's columns.
|
||||
var columndivs = $('div[class^="col-"]');
|
||||
|
||||
for (var i=0; i<columndivs.length; i++) {
|
||||
columndivs[i].className = columndivs[i].className.replace('col-md-', 'c')
|
||||
columndivs[i].classList.add('col')
|
||||
}
|
||||
|
||||
//Oh no, we have some weird (not col-md) columns! They need the Bootstrap plugin.
|
||||
if ($('div[class^="col-"]:not([class^="col-md-"])')[0])
|
||||
printMessage('Because your page uses Bootstrap grid class prefixes other than col-md, your page requires the Min Bootstrap plugin, which has been included automatically.')
|
||||
|
||||
//Next, we convert the navbar
|
||||
/* Old navbar stuff
|
||||
if ($('.navbar-header')[0] && $('.navbar-collapse')[0]) moveFromAToB('.navbar-header', '.navbar-collapse')
|
||||
if ($('.navbar-collapse')[0] && $('.navbar .container')[0]) moveFromAToB('.navbar-collapse', '.navbar .container')
|
||||
if ($('.navbar .container')[0] && $('.navbar')[0]) moveFromAToB('.navbar .container', '.navbar')
|
||||
$('.navbar-toggle')[0]) $('.navbar-toggle')[0].remove()
|
||||
|
||||
//Dump the navbar forms stuff right into the navbar
|
||||
//form-group to navbar-form and navbar-form to navbar
|
||||
var navbarFormItems = $('.form-group');
|
||||
for (var i=0; i<navbarFormItems.length; i++) {
|
||||
moveFromAToB('div.form-group','.navbar-form');
|
||||
}
|
||||
if ($('.navbar-form')[0] && $('.navbar')[0]) moveFromAToB('.navbar-form', '.navbar');
|
||||
|
||||
//Of course, Bootstrap *has* to have two ways to make a navbar
|
||||
var lisToSquash = $('.nav.navbar-nav li').not('.dropdown').not('ul.dropdown-menu li').not('ul.navbar-right li');
|
||||
for (var i=0; i<lisToSquash.length; i++) {
|
||||
moveFromAToB('.navbar .nav.navbar-nav:not(.dropdown-menu) > li[class!="dropdown"]', '.nav.navbar-nav')
|
||||
}*/
|
||||
|
||||
//Convert navbars
|
||||
var navbars = $('.navbar');
|
||||
|
||||
for (var i=0; i<navbars.length; i++) {
|
||||
$(navbars[i]).addClass('nav').removeClass('navbar')
|
||||
//Wrap them in a container
|
||||
navbars[i].innerHTML = '<div class="container">'+navbars[i].innerHTML + '</div>'
|
||||
}
|
||||
|
||||
$('div.nav').changeElementType('nav')
|
||||
|
||||
//Delete elements that don't exist in Min
|
||||
$('.navbar-toggle').remove()
|
||||
$('.nav .nav > *').unwrap();
|
||||
$('.navbar-header > *, .container-fluid > *, .navbar-collapse > *').unwrap();
|
||||
|
||||
|
||||
var navbarPluginCSS = '<link rel="stylesheet" href="http://owenversteeg.com/min-navbar-plugin/navbar-plugin.css?200" type="text/css">'
|
||||
|
||||
if ($('li.dropdown')[0]) {
|
||||
//If we have any dropdowns here, we have to include the min-navbar-plugin
|
||||
convertedHTMLDiv.innerHTML += navbarPluginCSS;
|
||||
|
||||
//Let the user know that we've included it
|
||||
printMessage('Your page requires the navbar plugin, which has been automatically included.<br><br>It adds dropdowns and right-positioned link capabilities to the navbar.', 'warning');
|
||||
|
||||
//Now, we need to convert from Bootstrap's weird navbar dropdowns to Min's nice navbar dropdowns
|
||||
var x = $('li.dropdown > a').length;
|
||||
for (i=0; i<x; i++) {
|
||||
$('li.dropdown > a')[0].outerHTML = $('li.dropdown > a')[0].innerHTML;
|
||||
}
|
||||
|
||||
$('.caret').remove(); //we make carets automatically over here in min-land, unlike *some* frameworks I know
|
||||
|
||||
//now, we transmogrify all of Bootstrap's elements into Min elements.
|
||||
|
||||
$('li.dropdown').changeElementType('div');
|
||||
$('div.dropdown').addClass('wpd').removeClass('dropdown');
|
||||
$('ul.dropdown-menu').wrap('<div class="pulldown"></div>')
|
||||
/*
|
||||
var x = $('ul.dropdown-menu').length;
|
||||
for (var i=0; i<x; i++) {
|
||||
var pulldownDiv = document.createElement('div');
|
||||
$(pulldownDiv).addClass('pulldown');
|
||||
|
||||
var ulInsidePulldownDiv = document.createElement('ul');
|
||||
pulldownDiv.appendChild(ulInsidePulldownDiv);
|
||||
|
||||
$('ul.dropdown-menu')[0].parentElement.appendChild(pulldownDiv);
|
||||
|
||||
moveFromAToB('ul.dropdown-menu', 'div.pulldown ul', [i,i]);
|
||||
}*/
|
||||
|
||||
$('ul.dropdown-menu').removeClass('dropdown-menu');
|
||||
|
||||
//Of course, Bootstrap *has* to make dropdown headers the unstandard way.
|
||||
$('li.dropdown-header').removeClass('dropdown-header').changeElementType('h5');
|
||||
|
||||
//Given that, what do you think Bootstrap uses to make a divider?
|
||||
//Yes, that's right, folks: Bootstrap uses a fucking *li* element as a divider. No, not a <hr> or even a <div> - but a <li>. What the hell.
|
||||
//I'm pretty sure the only thing that could possibly be less semantically correct would be a <canvas>
|
||||
$('li.divider').removeClass('divider').changeElementType('hr');
|
||||
}
|
||||
|
||||
//Now, we need to check if we have any right-positioned elements
|
||||
if ($('.navbar-right')[0]) {
|
||||
//If we don't already have the navbar plugin CSS, include it and let the user know that we did so
|
||||
if (convertedHTMLDiv.innerHTML.indexOf(navbarPluginCSS) == -1) {
|
||||
convertedHTMLDiv.innerHTML += navbarPluginCSS;
|
||||
printMessage('Your page requires the navbar plugin, which has been automatically included.<br><br>It adds dropdowns and right-positioned link capabilities to the navbar.', 'warning');
|
||||
}
|
||||
|
||||
var lisToRighten = $('ul.navbar-right > li[class!="dropdown"]');
|
||||
|
||||
for (var i=0; i<lisToRighten.length; i++) {
|
||||
//Unwrap the <a>s from their oppressive <li> overlords.
|
||||
moveFromAToB('ul.navbar-right > li[class!="dropdown"]', 'ul.navbar-right');
|
||||
//Be free, my darlings!
|
||||
}
|
||||
|
||||
//Now, we convert the navbar right <ul> to a navbar right div
|
||||
$('ul.navbar-right').addClass('navlink-right').removeClass('nav').removeClass('navbar-nav').removeClass('navbar-right').changeElementType('div');
|
||||
}
|
||||
|
||||
//if we have the second way to make a navbar, we need to push the links into the main navbar
|
||||
if ($('.nav.navbar-nav')[0] && $('.navbar')[0]) moveFromAToB('.nav.navbar-nav', '.navbar')
|
||||
|
||||
//Now we make the page name nice and pretty
|
||||
if ($('.navbar-brand')[0]) $('.navbar-brand').removeClass('navbar-brand').addClass('pagename current')
|
||||
|
||||
//Unwrap links
|
||||
$('.container .container').unwrap()
|
||||
$('.nav > div > li > *').unwrap();
|
||||
|
||||
//Make sure to convert from Bootstrap's link-buttons to Min's normal buttons.
|
||||
/*
|
||||
var aButtons = $('a[class^="btn"]');
|
||||
for (var i=0; i<aButtons.length; i++) {
|
||||
var newButton = document.createElement('button');
|
||||
newButton.innerText = aButtons[i].innerText;
|
||||
aButtons[i].innerText = "";
|
||||
aButtons[i].appendChild(newButton);
|
||||
}*/
|
||||
|
||||
//Now we make the buttons reasonably sized.
|
||||
$('.btn').not('[class*="dontconvert"]').not('[class^="btn-lg"]').addClass('btn-sm');
|
||||
|
||||
$('.btn-default').removeClass('btn-default')
|
||||
$('.btn-primary').addClass('btn-a').removeClass('btn-primary')
|
||||
$('.btn-success').addClass('btn-b').removeClass('btn-success')
|
||||
$('.btn-danger').addClass('btn-c').removeClass('btn-danger')
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
bower.json
28
bower.json
|
|
@ -1,28 +0,0 @@
|
|||
{
|
||||
"name": "min",
|
||||
"version": "1.5",
|
||||
"authors": [
|
||||
"Owen Versteeg <me@owenversteeg.com>",
|
||||
"Scott O'Hara"
|
||||
],
|
||||
"description": "The world's smallest CSS framework - only 995 bytes.",
|
||||
"main": "entireframework.min.css",
|
||||
"ignore": [
|
||||
".gitignore",
|
||||
"CNAME",
|
||||
"**/*.md",
|
||||
"**/*.html",
|
||||
"**/*.sh",
|
||||
"**/*.js",
|
||||
"**/*.ico",
|
||||
"**/*.php",
|
||||
"download.less"
|
||||
],
|
||||
"keywords": [
|
||||
"min",
|
||||
"mincss",
|
||||
"minimal"
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "http://mincss.com"
|
||||
}
|
||||
48
build.sh
48
build.sh
|
|
@ -1,48 +0,0 @@
|
|||
#!/bin/bash
|
||||
|
||||
mkdir compiled -p
|
||||
#The compiled folder holds all the separate compiled CSS files.
|
||||
|
||||
subtypes=(general buttons grid headings icons forms navbar tables messages)
|
||||
#You can change the subtypes used by changing this.
|
||||
|
||||
rm -f compiledcss.js
|
||||
rm -f entireframework.min.css
|
||||
#Remove the old files.
|
||||
|
||||
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[*]}
|
||||
do
|
||||
lessc "less/"$item".less" > "compiled/"$item".css"
|
||||
#Compile all the LESS files.
|
||||
|
||||
java -jar yuicompressor-2.4.8.jar "compiled/"$item".css" -o "compiled/"$item".min.css"
|
||||
#Compress all the compiled CSS files.
|
||||
|
||||
echo -ne " \""$item"\": \"" >> compiledcss.js
|
||||
cat "compiled/"$item".min.css" >> compiledcss.js
|
||||
echo -ne "\"" >> compiledcss.js
|
||||
#Write lines of JSON to compiledcss.js
|
||||
|
||||
cat "compiled/"$item".min.css" >> entireframework.min.css
|
||||
#Write the compiled and minified CSS to entireframework.min.css
|
||||
|
||||
if [ $((i+1)) -ne ${#subtypes[*]} ]
|
||||
then
|
||||
#This is a bit kludgy but whatever, bash is not my specialty.
|
||||
#If this isn't the last subtype, add a comma
|
||||
echo "," >> compiledcss.js
|
||||
fi
|
||||
i=$i+1
|
||||
done
|
||||
#Put an ending to compiledcss.js
|
||||
echo "" >> compiledcss.js
|
||||
echo "};" >> compiledcss.js
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.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 */
|
||||
margin: 2px 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 14px 11px;
|
||||
}
|
||||
1
compiled/buttons.min.css
vendored
1
compiled/buttons.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 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 14px 11px}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
label > * {
|
||||
display: inline;
|
||||
}
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
textarea:focus,
|
||||
input:focus,
|
||||
select:focus {
|
||||
border-color: #5ab;
|
||||
}
|
||||
textarea,
|
||||
input[type=text] {
|
||||
-webkit-appearance: none;
|
||||
/* make iOS inputs pretty */
|
||||
width: 13em;
|
||||
outline: 0;
|
||||
}
|
||||
.addon {
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
1
compiled/forms.min.css
vendored
1
compiled/forms.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
body,
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
background: 0;
|
||||
border-radius: 0;
|
||||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
.addon,
|
||||
.btn-sm,
|
||||
.nav,
|
||||
textarea,
|
||||
input,
|
||||
select {
|
||||
outline: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
.smooth {
|
||||
transition: all .2s;
|
||||
}
|
||||
.btn,
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
}
|
||||
@media (min-width: 1310px) {
|
||||
.container {
|
||||
margin: auto;
|
||||
width: 1270px;
|
||||
}
|
||||
}
|
||||
.btn,
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
1
compiled/general.min.css
vendored
1
compiled/general.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}.btn,h2{font-size:2em}
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
.row {
|
||||
margin: 1% 0;
|
||||
overflow: auto;
|
||||
/* required - without this, the page layout is screwed up */
|
||||
}
|
||||
.col {
|
||||
float: left;
|
||||
}
|
||||
.table,
|
||||
.c12 {
|
||||
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
1
compiled/grid.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{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%}}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
/* Make the default heading style larger */
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
1
compiled/headings.min.css
vendored
1
compiled/headings.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
h1{font-size:3em}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.ico {
|
||||
font: 33px Arial Unicode MS, Lucida Sans Unicode;
|
||||
/*
|
||||
This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu.
|
||||
|
||||
We don't use ems because 33px is a great size cross-browser and OS for nice icons
|
||||
*/
|
||||
}
|
||||
1
compiled/icons.min.css
vendored
1
compiled/icons.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* There aren't any IE hacks needed as of now */
|
||||
0
compiled/iehacks.min.css
vendored
0
compiled/iehacks.min.css
vendored
|
|
@ -1,27 +0,0 @@
|
|||
textarea,
|
||||
input,
|
||||
.addon-front,
|
||||
.btn-sm,
|
||||
.nav a {
|
||||
font-size: 14px;
|
||||
}
|
||||
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
1
compiled/inputs.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
textarea,input,.addon-front,.btn-sm,.nav a{font-size:14px}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}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.msg {
|
||||
background: #def;
|
||||
border-left: 5px solid #59d;
|
||||
padding: 1.5em;
|
||||
}
|
||||
1
compiled/messages.min.css
vendored
1
compiled/messages.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.msg{background:#def;border-left:5px solid #59d;padding:1.5em}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
.nav,
|
||||
.nav .current,
|
||||
.nav a:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.nav {
|
||||
height: 24px;
|
||||
padding: 11px 0 15px;
|
||||
/* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
|
||||
/* Uncomment for animations
|
||||
max-height: 1.5em;
|
||||
*/
|
||||
}
|
||||
.nav a {
|
||||
color: #aaa;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
.nav .pagename {
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
.btn.btn-close {
|
||||
background: #000;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin: -54px 7px;
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.btn.btn-close {
|
||||
display: block;
|
||||
}
|
||||
.nav {
|
||||
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagename {
|
||||
margin-top: -11px;
|
||||
}
|
||||
.nav:active,
|
||||
.nav:focus {
|
||||
height: auto;
|
||||
/* Necesary for animations
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
*/
|
||||
}
|
||||
.nav div:before {
|
||||
background: #000;
|
||||
border-bottom: 10px double;
|
||||
border-top: 3px solid;
|
||||
content: '';
|
||||
float: right;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
1
compiled/navbar.min.css
vendored
1
compiled/navbar.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}
|
||||
|
|
@ -1,10 +0,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
1
compiled/tables.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
var css = {
|
||||
"general": "body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.container{margin:0 20px;width:auto}@media(min-width:1310px){.container{margin:auto;width:1270px}}.btn,h2{font-size:2em}",
|
||||
"buttons": ".btn{background:#999;border-radius:6px;border:0;color:#fff;cursor:pointer;display:inline-block;margin:2px 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 14px 11px}",
|
||||
"grid": ".row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{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:3em}",
|
||||
"icons": ".ico{font:33px Arial Unicode MS,Lucida Sans Unicode}",
|
||||
"forms": "label>*{display:inline}form>*{display:block;margin-bottom:10px}textarea,input,select{border:1px solid #ccc;padding:8px}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em;outline:0}.addon{box-shadow:0 0 0 1px #ccc;padding:8px 12px}",
|
||||
"navbar": ".nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{display:block;padding:.5em 0;width:50%}}",
|
||||
"tables": ".table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}",
|
||||
"messages": ".msg{background:#def;border-left:5px solid #59d;padding:1.5em}"
|
||||
};
|
||||
51
defer.js
51
defer.js
|
|
@ -1,51 +0,0 @@
|
|||
//Mixpanel
|
||||
|
||||
(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});
|
||||
|
||||
//Google Analytics
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-41177412-1', 'auto');
|
||||
ga('require', 'linkid', 'linkid.js');
|
||||
ga('send', 'pageview');
|
||||
|
||||
//Quantcast
|
||||
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_"
|
||||
});
|
||||
|
||||
//Instantclick
|
||||
/* InstantClick 3.0.1 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license.html */
|
||||
var InstantClick=function(e,g){function v(a){var c=a.indexOf("#");return 0>c?a:a.substr(0,c)}function y(a){for(;"A"!=a.nodeName;)a=a.parentNode;return a}function t(a,c){for(var b=0;b<D[a].length;b++)D[a][b](c)}function G(a,c,b,l){e.title=a;e.documentElement.replaceChild(c,e.body);if(b){history.pushState(null,null,b);a=b.indexOf("#");a=-1<a&&e.getElementById(b.substr(a+1));c=0;if(a)for(;a.offsetParent;)c+=a.offsetTop,a=a.offsetParent;scrollTo(0,c);m=v(b)}else scrollTo(0,l);H();z.done();t("change",
|
||||
!1)}function I(a){w(y(a.target).href)}function J(a){a=y(a.target);a.addEventListener("mouseout",Q);E?(K=a.href,r=setTimeout(w,E)):w(a.href)}function R(a){a=y(a.target);A?a.removeEventListener("mousedown",I):a.removeEventListener("mouseover",J);w(a.href)}function S(a){1<a.which||a.metaKey||a.ctrlKey||(a.preventDefault(),L(y(a.target).href))}function Q(){r?(clearTimeout(r),r=!1):u&&!h&&(p.abort(),h=u=!1)}function T(){if(!(4>p.readyState)&&0!=p.status){q.ready=+new Date-q.start;t("receive");if(p.getResponseHeader("Content-Type").match(/\/(x|ht|xht)ml/)){var a=
|
||||
e.implementation.createHTMLDocument("");a.documentElement.innerHTML=p.responseText;F=a.title;x=a.body;var c=v(s);f[c]={body:x,title:F,scrollY:c in f?f[c].scrollY:0};for(var a=a.head.children,c=0,b,l=a.length-1;0<=l;l--)if(b=a[l],b.hasAttribute("data-instant-track")){b=b.getAttribute("href")||b.getAttribute("src")||b.innerHTML;for(var n=B.length-1;0<=n;n--)B[n]==b&&c++}c!=B.length&&(C=!0)}else C=!0;h&&(h=!1,L(s))}}function H(a){for(var c=e.getElementsByTagName("a"),b,l=g.protocol+"//"+g.host,n=c.length-
|
||||
1;0<=n;n--){b=c[n];var d;if(!((d=b.target)||(d=b.hasAttribute("download"))||(d=0!=b.href.indexOf(l+"/"))||(d=-1<b.href.indexOf("#")&&v(b.href)==m)))if(M){a:{d=b;do{if(!d.hasAttribute)break;if(d.hasAttribute("data-no-instant"))break;if(d.hasAttribute("data-instant")){d=!0;break a}}while(d=d.parentNode);d=!1}d=!d}else a:{d=b;do{if(!d.hasAttribute)break;if(d.hasAttribute("data-instant"))break;if(d.hasAttribute("data-no-instant")){d=!0;break a}}while(d=d.parentNode);d=!1}d||(b.addEventListener("touchstart",
|
||||
R),A?b.addEventListener("mousedown",I):b.addEventListener("mouseover",J),b.addEventListener("click",S))}if(!a)for(a=e.body.getElementsByTagName("script"),n=0,j=a.length;n<j;n++)c=a[n],c.hasAttribute("data-no-instant")||(b=e.createElement("script"),c.src&&(b.src=c.src),c.innerHTML&&(b.innerHTML=c.innerHTML),l=c.parentNode,d=c.nextSibling,l.removeChild(c),l.insertBefore(b,d))}function w(a){if(A||!("display"in q&&100>+new Date-(q.start+q.display)))if(r&&(clearTimeout(r),r=!1),a||(a=K),!u||a!=s&&!h)u=
|
||||
!0,h=!1,s=a,C=x=!1,q={start:+new Date},t("fetch"),p.open("GET",a),p.send()}function L(a){"display"in q||(q.display=+new Date-q.start);r?s&&s!=a?g.href=a:(w(a),z.start(0,!0),t("wait"),h=!0):!u||h?g.href=a:C?g.href=s:x?(f[m].scrollY=pageYOffset,h=u=!1,G(F,x,s)):(z.start(0,!0),t("wait"),h=!0)}var N=navigator.userAgent,O="createTouch"in e,m,K,r,f={},p,s=!1,F=!1,C=!1,x=!1,q={},u=!1,h=!1,B=[],M,A,E,D={fetch:[],receive:[],wait:[],change:[]},z=function(){function a(a,d){f=a;e.getElementById(k.id)&&e.body.removeChild(k);
|
||||
k.style.opacity="1";e.getElementById(k.id)&&e.body.removeChild(k);l();d&&setTimeout(c,0);clearTimeout(m);m=setTimeout(b,500)}function c(){f=10;l()}function b(){f+=1+2*Math.random();98<=f?f=98:m=setTimeout(b,500);l()}function l(){g.style[h]="translate("+f+"%)";e.getElementById(k.id)||e.body.appendChild(k)}function n(){e.getElementById(k.id)?(clearTimeout(m),f=100,l(),k.style.opacity="0"):(a(100==f?0:f),setTimeout(n,0))}function d(){k.style.left=pageXOffset+"px";k.style.width=innerWidth+"px";k.style.top=
|
||||
pageYOffset+"px";var a="orientation"in window&&90==Math.abs(orientation);k.style[h]="scaleY("+innerWidth/screen[a?"height":"width"]*2+")"}var k,g,h,f,m;return{init:function(){k=e.createElement("div");k.id="instantclick";g=e.createElement("div");g.id="instantclick-bar";g.className="instantclick-bar";k.appendChild(g);var a=["Webkit","Moz","O"];h="transform";if(!(h in g.style))for(var b=0;3>b;b++)a[b]+"Transform"in g.style&&(h=a[b]+"Transform");var c="transition";if(!(c in g.style))for(b=0;3>b;b++)a[b]+
|
||||
"Transition"in g.style&&(c="-"+a[b].toLowerCase()+"-"+c);a=e.createElement("style");a.innerHTML="#instantclick{position:"+(O?"absolute":"fixed")+";top:0;left:0;width:100%;pointer-events:none;z-index:2147483647;"+c+":opacity .25s .1s}.instantclick-bar{background:#29d;width:100%;margin-left:-100%;height:2px;"+c+":all .25s}";e.head.appendChild(a);O&&(d(),addEventListener("resize",d),addEventListener("scroll",d))},start:a,done:n}}(),P="pushState"in history&&(!N.match("Android")||N.match("Chrome/"))&&
|
||||
"file:"!=g.protocol;return{supported:P,init:function(){if(!m)if(P){for(var a=arguments.length-1;0<=a;a--){var c=arguments[a];!0===c?M=!0:"mousedown"==c?A=!0:"number"==typeof c&&(E=c)}m=v(g.href);f[m]={body:e.body,title:e.title,scrollY:pageYOffset};for(var c=e.head.children,b,a=c.length-1;0<=a;a--)b=c[a],b.hasAttribute("data-instant-track")&&(b=b.getAttribute("href")||b.getAttribute("src")||b.innerHTML,B.push(b));p=new XMLHttpRequest;p.addEventListener("readystatechange",T);H(!0);z.init();t("change",
|
||||
!0);addEventListener("popstate",function(){var a=v(g.href);a!=m&&(a in f?(f[m].scrollY=pageYOffset,m=a,G(f[a].title,f[a].body,!1,f[a].scrollY)):g.href=g.href)})}else t("change",!0)},on:function(a,c){D[a].push(c)}}}(document,location);
|
||||
|
||||
InstantClick.on('change', function() {
|
||||
ga('send', 'pageview', location.pathname + location.search);
|
||||
});
|
||||
123
docs.css
123
docs.css
|
|
@ -1,123 +0,0 @@
|
|||
/* 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 */
|
||||
.navbar button.btn-close.btn-sm {
|
||||
padding-top: 4px;
|
||||
margin-top: -49px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c12{width:98%}.c11{width:89.66%}.c10{width:81.33%}.c9{width:73%}.c8{width:64.66%}.c7{width:56.33%}.c6{width:48%}.c5{width:39.66%}.c4{width:31.33%}.c3{width:23%}.c2{width:14.66%}.c1{width:6.33%}
|
||||
|
||||
.col { margin: 0 1%; }
|
||||
|
||||
@media (max-width: 870px) {
|
||||
.row .col {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.krakenholder {
|
||||
display: block;
|
||||
width: 150px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.krakenholder:hover .kraken {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.krakenholder:hover:before {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 150px;
|
||||
text-align: center;
|
||||
font-size: 40px;
|
||||
line-height: 150px;
|
||||
font-weight: bold;
|
||||
background: red;
|
||||
content: "ROAR";
|
||||
}
|
||||
336
docs.html
336
docs.html
|
|
@ -1,336 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||||
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("button");
|
||||
</script>
|
||||
|
||||
<!--[if IE 7]>
|
||||
<style>
|
||||
.col { margin: 0 0.9% !important; }
|
||||
</style>
|
||||
<![endif]-->
|
||||
|
||||
<title>min - docs</title>
|
||||
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
<link href="docs.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>
|
||||
|
||||
<!--[if lte IE 6]>
|
||||
<style>
|
||||
.col {
|
||||
margin: 0.5%;
|
||||
}
|
||||
.c12 {
|
||||
margin: 0.5%;
|
||||
margin-left: 0.5%;
|
||||
width: 97%;
|
||||
}
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
|
||||
<!--[if IE 5]>
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px Arial;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 50px;
|
||||
}
|
||||
</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>
|
||||
<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">
|
||||
<div>
|
||||
<h1>Basics & Browser Support</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. Secondly, there's less markup to type. Min requires fewer superfluous divs and classes than any other framework, allowing every part of your code to be readable and semantically correct.
|
||||
</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="http://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>
|
||||
<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.) 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. <b>Netscape support has ended</b> 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">btn-a</a>
|
||||
<a class="smooth btn-b btn">btn-b</a>
|
||||
<a class="smooth btn-c btn">btn-c</a>
|
||||
<a class="smooth btn">classless</a>
|
||||
|
||||
<br><br><pre><a class="btn btn-b smooth">btn-b</a></pre>
|
||||
<br>
|
||||
<a class="btn smooth btn-a btn-sm">btn-sm btn-a</a>
|
||||
<a class="btn smooth btn-b btn-sm">btn-sm btn-b</a>
|
||||
<a class="btn smooth btn-c btn-sm">btn-sm btn-c</a>
|
||||
<a class="btn smooth btn-sm">btn-sm classless</a>
|
||||
|
||||
<br><br><pre><a class="btn btn-b btn-sm smooth">btn-sm</a></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1>Forms</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">$</span><input type="text" class="smooth" placeholder="span class="addon"">
|
||||
<br><br>
|
||||
<pre><input type="text" class="smooth">
|
||||
<br><textarea rows="3" class="smooth">
|
||||
<br><span class="addon">$</span><input type="text" class="smooth"></pre>
|
||||
<div class="msg"><strong>Be careful with addons!</strong> If you do not want a space between the addon and the input make sure that there is no space between the <code></span></code> and <code><input></code> tags. Example: <pre>... </span> <input ...</pre><span class="addon">$</span> <input type="text" class="smooth"> <pre>... </span><input ...</pre><span class="addon">$</span><input type="text" class="smooth"></div>
|
||||
</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>
|
||||
|
||||
<h1>Messages</h1>
|
||||
<div class="messages">
|
||||
<div class="msg">
|
||||
<strong>Watch out!</strong> You almost scrolled off the page. There are reports of sea monsters past the end of the page and we do not advise you go there.
|
||||
</div>
|
||||
<pre><div class="msg">
|
||||
<strong>Alert headline!</strong>
|
||||
Message text
|
||||
</div>
|
||||
</pre>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="krakenholder">
|
||||
<img src="kraken.png" class="kraken" alt="a scary sea monster">
|
||||
</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>
|
||||
348
download.html
348
download.html
|
|
@ -1,145 +1,235 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--[if !IE]><html><![endif]--><!--[if lte IE 7]><html class="ie"><![endif]-->
|
||||
<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 type="text/css" rel="stylesheet/less" href="min.less"/>
|
||||
<link type="text/css" rel="stylesheet/less" href="download.less"/>
|
||||
<script src="less.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
<link href="entireframework.min.css" rel="stylesheet" type="text/css" />
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-41177412-1']);
|
||||
_gaq.push(['_setDomainName', 'minfwk.com']);
|
||||
_gaq.push(['_setAllowLinker', true]);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<style>
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
(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);
|
||||
})();
|
||||
|
||||
<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]-->
|
||||
</script>
|
||||
</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>
|
||||
<h1 class="title">min</h1>
|
||||
<h3>please select your components</h3>
|
||||
|
||||
<hr class="mediumwidth">
|
||||
|
||||
<label><input name="general" type="checkbox" checked disabled/>General (required) - 604 - 421 - 239</label>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<script src="compiledcss.js" type="text/javascript"></script>
|
||||
<script src="download.js" type="text/javascript"></script>
|
||||
<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>
|
||||
<script type="text/javascript">
|
||||
function downloadJSAtOnload() {
|
||||
var element = document.createElement("script");
|
||||
element.src = "defer.js";
|
||||
document.body.appendChild(element);
|
||||
function prettyOutput() {
|
||||
document.getElementById('result').style.display = "inline-block";
|
||||
document.getElementById('warning').style.display = "inline-block";
|
||||
document.getElementById('result').innerText = calculateCSS();
|
||||
}
|
||||
|
||||
function getNums (input) {
|
||||
input = input.split(' - ');
|
||||
input.shift();
|
||||
input.forEach(function(n, i) {
|
||||
input[i]=parseInt(n);
|
||||
});
|
||||
return input;
|
||||
}
|
||||
|
||||
function calculateCSS() {
|
||||
var mincss = "";
|
||||
var details = {
|
||||
general: false,
|
||||
headings: false,
|
||||
buttons: false,
|
||||
inputs: false,
|
||||
navbar: false,
|
||||
tables: false,
|
||||
messages: false,
|
||||
icons: false,
|
||||
iehacks: false,
|
||||
grid: false,
|
||||
total: 0,
|
||||
totalmin: 0,
|
||||
totalmingzip: 0
|
||||
};
|
||||
|
||||
if (document.getElementsByName('general')[0].checked === true) {
|
||||
mincss += "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}";
|
||||
details.general = true;
|
||||
var det = getNums(document.getElementsByName('general')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('headings')[0].checked === true) {
|
||||
mincss += "h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}";
|
||||
details.headings = true;
|
||||
var det = getNums(document.getElementsByName('headings')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('buttons')[0].checked === true) {
|
||||
mincss += "button{background:#afafaf;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;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;border:1px solid #000;cursor:pointer}button.smooth{transition:background-color .15s ease-in-out}button.btn-a{background:#345eb3;border:1px solid #1d3464}button.btn-a:hover{background:#29498b}button.btn-a:active{background:#1d3464}button.btn-b{background:#51a351;border:1px solid #2f5f2f}button.btn-b:hover{background:#408140}button.btn-b:active{background:#2f5f2f}button.btn-c{background:#da2727;border:1px solid #841717}button.btn-c:hover{background:#b01e1e}button.btn-c:active{background:#841717}button.btn-small{padding:7px 19px 10px;font-size:16px}";
|
||||
details.buttons = true;
|
||||
var det = getNums(document.getElementsByName('buttons')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('inputs')[0].checked === true) {
|
||||
mincss += "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}";
|
||||
details.inputs = true;
|
||||
var det = getNums(document.getElementsByName('inputs')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('navbar')[0].checked === true) {
|
||||
mincss += ".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}}";
|
||||
details.navbar = true;
|
||||
var det = getNums(document.getElementsByName('navbar')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('tables')[0].checked === true) {
|
||||
mincss += "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}";
|
||||
details.tables = true;
|
||||
var det = getNums(document.getElementsByName('tables')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('messages')[0].checked === true) {
|
||||
mincss += "message{width:100%;display:block;padding:2em 0;background:#a7d3e4}message.warning{background:#e4a7a7}message.great{background:#a7e4ae}";
|
||||
details.messages = true;
|
||||
var det = getNums(document.getElementsByName('messages')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('icons')[0].checked === true) {
|
||||
mincss += "ico{font-size:1.9375em;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}";
|
||||
details.icons = true;
|
||||
var det = getNums(document.getElementsByName('icons')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('iehacks')[0].checked === true) {
|
||||
mincss += ".ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}";
|
||||
details.iehacks = true;
|
||||
var det = getNums(document.getElementsByName('iehacks')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
if (document.getElementsByName('grid')[0].checked === true) {
|
||||
mincss += ".row{display:block;line-height:2em;margin-top:2%;height:2em}.ie column{margin:auto .7%}column{display:inline-block;float:left;margin:auto 1%}.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}}";
|
||||
details.grid = true;
|
||||
var det = getNums(document.getElementsByName('grid')[0].parentElement.innerText);
|
||||
details.total += det[0];
|
||||
details.totalmin += det[1];
|
||||
details.totalmingzip += det[2];
|
||||
}
|
||||
|
||||
oRequest = new XMLHttpRequest();
|
||||
var sURL = "http://8b51d1abd8.test-url.ws/gzipsize.php?encode="+mincss;
|
||||
|
||||
oRequest.open("GET",sURL,false);
|
||||
oRequest.send(null);
|
||||
|
||||
|
||||
|
||||
document.getElementById('details').innerHTML = "Your download of min is " + details.total + " bytes unminified, " + details.totalmin + " bytes minified (above), and " + details.totalmingzip + " bytes <a href='http://8b51d1abd8.test-url.ws/gzip.php?encode="+mincss+"'>minified and gzipped</a>."
|
||||
|
||||
//details.totalmingzip = parseInt(oRequest.responseText);
|
||||
|
||||
mixpanel.track('Calculate CSS', details);
|
||||
|
||||
console.log(details);
|
||||
return mincss;
|
||||
}
|
||||
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>
|
||||
<br>
|
||||
<!--analytics-->
|
||||
|
||||
<!-- start 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><!-- end Mixpanel -->
|
||||
<script type="text/javascript">
|
||||
var GoSquared = {};
|
||||
GoSquared.acct = "GSN-336891-I";
|
||||
(function(w){
|
||||
function gs(){
|
||||
w._gstc_lt = +new Date;
|
||||
var d = document, g = d.createElement("script");
|
||||
g.type = "text/javascript";
|
||||
g.src = "//d1l6p2sc9645hc.cloudfront.net/tracker.js";
|
||||
var s = d.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(g, s);
|
||||
}
|
||||
w.addEventListener ?
|
||||
w.addEventListener("load", gs, false) :
|
||||
w.attachEvent("onload", gs);
|
||||
})(window);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
65
download.js
65
download.js
|
|
@ -1,65 +0,0 @@
|
|||
function prettyOutput() {
|
||||
document.getElementById('result').style.display = "inline-block";
|
||||
document.getElementById('result').innerText = calculateCSS();
|
||||
}
|
||||
|
||||
function getNums (input) {
|
||||
input = input.split(' - ');
|
||||
input.shift();
|
||||
input.forEach(function(n, i) {
|
||||
input[i]=parseInt(n);
|
||||
});
|
||||
return input;
|
||||
}
|
||||
|
||||
function calculateCSS() {
|
||||
var mincss = "";
|
||||
var details = {
|
||||
general: false,
|
||||
headings: false,
|
||||
buttons: false,
|
||||
forms: false,
|
||||
navbar: false,
|
||||
tables: false,
|
||||
icons: false,
|
||||
grid: false,
|
||||
messages: false
|
||||
};
|
||||
|
||||
for (var i=0; i<document.getElementById('checkboxes').children.length; i++) {
|
||||
var currentTypeName = document.getElementById('checkboxes').children[i].children[0].name;
|
||||
var isChecked = document.getElementsByName(currentTypeName)[0].checked;
|
||||
|
||||
details[currentTypeName] = isChecked;
|
||||
|
||||
if (isChecked) {
|
||||
mincss += css[currentTypeName];
|
||||
}
|
||||
}
|
||||
|
||||
var http = new XMLHttpRequest();
|
||||
var url = "http://8b51d1abd8.test-url.ws/gzipsize.php";
|
||||
var params = "encode="+mincss;
|
||||
http.open("POST", url, true);
|
||||
|
||||
//Send the proper header information along with the request
|
||||
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
http.setRequestHeader("Content-length", params.length);
|
||||
http.setRequestHeader("Connection", "close");
|
||||
|
||||
http.onreadystatechange = function() {
|
||||
//Call a function when the state changes.
|
||||
if (http.readyState == 4 && http.status == 200) {
|
||||
details.totalmingzip = parseInt(http.responseText);
|
||||
document.getElementById('details').innerHTML = document.getElementById('details').innerHTML.replace(' and', ',');
|
||||
document.getElementById('details').innerHTML += ", and " + details.totalmingzip + " bytes minified and gzipped.";
|
||||
mixpanel.track('Calculate CSS', details);
|
||||
}
|
||||
};
|
||||
http.send(params);
|
||||
|
||||
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;
|
||||
}
|
||||
1
entireframework.min.css
vendored
1
entireframework.min.css
vendored
|
|
@ -1 +0,0 @@
|
|||
/* Copyright 2014 Owen Versteeg; MIT licensed */body,textarea,input,select{background:0;border-radius:0;font:16px sans-serif;margin:0}.smooth{transition:all .2s}.btn,.nav a{text-decoration:none}.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;margin:2px 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 14px 11px}.row{margin:1% 0;overflow:auto}.col{float:left}.table,.c12{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%}h1{font-size:3em}.btn,h2{font-size:2em}.ico{font:33px Arial Unicode MS,Lucida Sans Unicode}.addon,.btn-sm,.nav,textarea,input,select{outline:0;font-size:14px}textarea,input,select{padding:8px;border:1px solid #ccc}textarea:focus,input:focus,select:focus{border-color:#5ab}textarea,input[type=text]{-webkit-appearance:none;width:13em}.addon{padding:8px 12px;box-shadow:0 0 0 1px #ccc}.nav,.nav .current,.nav a:hover{background:#000;color:#fff}.nav{height:24px;padding:11px 0 15px}.nav a{color:#aaa;padding-right:1em;position:relative;top:-1px}.nav .pagename{font-size:22px;top:1px}.btn.btn-close{background:#000;float:right;font-size:25px;margin:-54px 7px;display:none}@media(min-width:1310px){.container{margin:auto;width:1270px}}@media(max-width:870px){.row .col{width:100%}}@media(max-width:500px){.btn.btn-close{display:block}.nav{overflow:hidden}.pagename{margin-top:-11px}.nav:active,.nav:focus{height:auto}.nav div:before{background:#000;border-bottom:10px double;border-top:3px solid;content:'';float:right;height:4px;position:relative;right:3px;top:14px;width:20px}.nav a{padding:.5em 0;display:block;width:50%}}.table th,.table td{padding:.5em;text-align:left}.table tbody>:nth-child(2n-1){background:#ddd}.msg{padding:1.5em;background:#def;border-left:5px solid #59d}
|
||||
BIN
example-1.jpg
BIN
example-1.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
BIN
example-2.jpg
BIN
example-2.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
BIN
example-3.jpg
BIN
example-3.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
26
example.html
26
example.html
|
|
@ -1,26 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Your Page Title</title>
|
||||
|
||||
<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">Your Site Name</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
<div class="container">
|
||||
<h1>Example</h1>
|
||||
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Your Page Title</title>
|
||||
|
||||
<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
background: #eee;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.c4 h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.c4 a {
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">Your Site Name</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
<div class="container">
|
||||
<div class="hero">
|
||||
<h1>Example</h1>
|
||||
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
<p>You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
<a class="btn btn-b" href="http://owenversteeg.com">Go places!</a>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-a">Do stuff!</a></div>
|
||||
<div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-b">Do stuff!</a></div> <div class="col c4"><h3>Yay headings!</h3>You can view the source of this page and copy it to get a quick start on a project with Min!<br><a href="http://owenversteeg.com" class="btn btn-sm btn-c">Do stuff!</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Your Page Title</title>
|
||||
|
||||
<link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0.2em 0;
|
||||
border-bottom: 5px solid;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="nav" tabindex="-1" onclick="this.focus()">
|
||||
<div class="container">
|
||||
<a class="pagename current" href="#">Your Site Name</a>
|
||||
<a href="#">One</a>
|
||||
<a href="#">Two</a>
|
||||
<a href="#">Three</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn-close btn btn-sm">×</button>
|
||||
<div class="container">
|
||||
<h1>Example</h1>
|
||||
<p>You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min! You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
<h1>Doing things!</h1>
|
||||
<p>Enter how many dollars you want! <span class="addon">$</span><input type="text" class="smooth"> You can view the source of this page and copy it to get a quick start on a project with Min!</p>
|
||||
<h1>Do we like numbers?</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>
|
||||
<h1>Conclusions ☺ ☻</h1>
|
||||
<i class="ico">We like chess. ♠ ♣ ♥ ♦ ♪ ♛ ♜ ♝ ♞ ♟</i>
|
||||
<br><i class="ico">We like phones! ☎</i>
|
||||
<br><i class="ico">We like arrows! ⇦ ⇧ ⇨ ⇩</i>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
132
examples.html
132
examples.html
|
|
@ -1,132 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>min - examples</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;
|
||||
}
|
||||
|
||||
/* New css */
|
||||
img {
|
||||
border: 1px solid;
|
||||
border-radius: 6px;
|
||||
align-self: center;
|
||||
vertical-align: middle;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #5583bb;
|
||||
}
|
||||
</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>
|
||||
<a class="current" href="#">Examples</a>
|
||||
<a href="https://github.com/owenversteeg/min">Github</a>
|
||||
</div>
|
||||
</nav>
|
||||
<button class="btn btn-sm btn-close">×</button>
|
||||
<div class="container">
|
||||
<h1>Examples</h1>
|
||||
<p>
|
||||
All of these examples are completely free to use, copy, and distribute however you like; they are all MIT licensed.
|
||||
<br><br>
|
||||
<a href="example.html"><img class="exampleimg" src="example-1.jpg">Basic Page w/Nav</a>
|
||||
<br><br>
|
||||
<a href="example2.html"><img class="exampleimg" src="example-2.jpg">Standard Page w/Hero</a>
|
||||
<br><br>
|
||||
<a href="example3.html"><img class="exampleimg" src="example-3.jpg">Page w/More Elements</a>
|
||||
</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>
|
||||
300
hireme.css
300
hireme.css
|
|
@ -1,300 +0,0 @@
|
|||
.pod {
|
||||
font-family: Helvetica, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1.name {
|
||||
margin: .5em .5em 0 1em;
|
||||
}
|
||||
|
||||
.pod h1 {
|
||||
font-size: 3.75em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pod {
|
||||
background: #ddd;
|
||||
border-radius: 5px;
|
||||
padding: 1.25em 1.9em;
|
||||
position: relative;
|
||||
margin: 1.88em 3.75em;
|
||||
}
|
||||
|
||||
.pod h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pod p {
|
||||
font-size: 1.2em;
|
||||
margin: 0 0 1.1em 0;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.pod {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 550px) {
|
||||
.pod {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
.pod {
|
||||
/*font-size: 8px;*/
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notinyfonts {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.pod p {
|
||||
font-size: 15px;
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 350px) {
|
||||
.pod {
|
||||
/*\ font-size: 6px;*/
|
||||
}
|
||||
}
|
||||
|
||||
.examples img {
|
||||
display: inline-block;
|
||||
height: 4.5em;
|
||||
position: relative;
|
||||
margin-left: 1.6em;
|
||||
}
|
||||
|
||||
.examples {
|
||||
float: right;
|
||||
height: 4.5em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo.twitter {
|
||||
background: #55acee
|
||||
}
|
||||
|
||||
.logo.keybase {
|
||||
background: #fc8558;
|
||||
}
|
||||
|
||||
.logo.mail {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.examples a:first-child img {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*.pod:hover {
|
||||
color: white;
|
||||
transition: 0.3s all;
|
||||
background: #333;
|
||||
}*/
|
||||
|
||||
/*
|
||||
.pod.code:hover {
|
||||
background: url('min-pretty-ultracropped.png');
|
||||
}
|
||||
|
||||
.pod.design:hover {
|
||||
background: url('goalcalendar.png');
|
||||
}
|
||||
|
||||
.pod.photos:hover {
|
||||
background: url('bismuth-cropped-2.jpg');
|
||||
background: url('shadows-cropped.jpg');
|
||||
}
|
||||
|
||||
.pod.contact:hover {
|
||||
background: url('publickey.png');
|
||||
}*/
|
||||
|
||||
/*.pod:hover .examples {
|
||||
background: rgba(255,255,255,0.7);
|
||||
box-shadow: 0 0 25px 16px rgba(255,255,255,0.7);
|
||||
transition: 0.3s all;
|
||||
}
|
||||
*/
|
||||
.pod:not(.hire):after {
|
||||
background: #ddd;
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 5px;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
|
||||
/*
|
||||
.pod:hover:after {
|
||||
background: #000;
|
||||
opacity: 0.2;
|
||||
}*/
|
||||
|
||||
.pod > * {
|
||||
position: relative;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/*.pod:hover * {
|
||||
color: white;
|
||||
}*/
|
||||
|
||||
.pod input, .pod h3, .pod .duration, .pod label {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.pod input[type=number], .pod textarea, .pod input[type=text], .pod input[type=email], .pod input[type=submit] {
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.pod input[type=email]:focus, .pod input[type=submit]:active, .pod input[type=submit]:focus {
|
||||
border-color: #5ab;
|
||||
}
|
||||
|
||||
.pod input[type=number] {
|
||||
width: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pod input[type=number]::-webkit-inner-spin-button, .pod input[type=number]::-webkit-outer-spin-button {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pod h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.duration {
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.pod > label {
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
z-index: 100 !important;
|
||||
width: 218px;
|
||||
}
|
||||
|
||||
form input[type=submit] {
|
||||
width: 100%;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
textarea {
|
||||
margin-top: -2px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
height: 118px;
|
||||
position: relative;
|
||||
z-index: 100 !important;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#email {
|
||||
display: block;
|
||||
position: relative;
|
||||
/*margin-top: 10px;*/
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
color: #000;
|
||||
}
|
||||
#email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
}
|
||||
#email::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
}
|
||||
#email:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
color: #000;
|
||||
}
|
||||
#email:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.hire:hover #email::-webkit-input-placeholder { /* WebKit, Blink, Edge */
|
||||
/*color: #fff;*/
|
||||
}
|
||||
.hire:hover #email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
|
||||
/*color: #fff;*/
|
||||
/*opacity: 1;*/
|
||||
}
|
||||
.hire:hover #email::-moz-placeholder { /* Mozilla Firefox 19+ */
|
||||
/*color: #fff;*/
|
||||
/*opacity: 1;*/
|
||||
}
|
||||
.hire:hover #email:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
||||
/*color: #fff;*/
|
||||
}
|
||||
.hire:hover #email:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
|
||||
/*color: #fff;*/
|
||||
}
|
||||
|
||||
/*#email, textarea {
|
||||
display: none;
|
||||
}*/
|
||||
|
||||
.timepicker * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hire h1 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
form {
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
.timepicker h3 {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.pod {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.timepicker div {
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hire label:first-of-type {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.pod form {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
43
hireme.js
43
hireme.js
|
|
@ -1,43 +0,0 @@
|
|||
var messageModified = false;
|
||||
|
||||
function calculateEstimate() {
|
||||
var time = +hourinput.value*60 + +minuteinput.value;
|
||||
rate = 3.5
|
||||
|
||||
var total = time*rate;
|
||||
|
||||
if (nonprofit.checked) total *= 0.7
|
||||
if (min.checked) total *= 0.5
|
||||
if (fullstack.checked) total *= 1.15
|
||||
if (hackhands.checked) total *= 1.2
|
||||
|
||||
totalestimate.innerHTML = '$' + Math.round(total)
|
||||
|
||||
var timeText = ''
|
||||
|
||||
if (+hourinput.value !== 0) timeText = hourinput.value + ' hours' + timeText
|
||||
if (+minuteinput.value !== 0 && +hourinput.value !== 0) timeText += ' and '
|
||||
if (+minuteinput.value !== 0) timeText += minuteinput.value + ' minutes'
|
||||
|
||||
if (+hourinput.value === 1) timeText = timeText.replace(/hours/g, 'hour')
|
||||
if (+minuteinput.value === 1) timeText = timeText.replace(/minutes/g, 'minute')
|
||||
|
||||
if (time === 0) timeText = 'no time at all'
|
||||
|
||||
if (!messageModified) {
|
||||
if (time >= 0) message.value = "Hi Owen,\n\nI'd like to hire you for " + timeText + ' to work on ______.'
|
||||
else message.value = "Hi Owen,\n\nI'd like you to pay me to work on something, entirely disregarding the purpose of this form."
|
||||
|
||||
message.value += "\n\nCheers, _____"
|
||||
}
|
||||
|
||||
if(window.mixpanel) mixpanel.track('Estimate', {'Total': total, 'Time': time, 'Min': min.checked, 'Nonprofit': nonprofit.checked, 'Fullstack': fullstack.checked, 'Hackhands': hackhands.checked, 'Modified': messageModified})
|
||||
}
|
||||
|
||||
calculateEstimate()
|
||||
|
||||
var inputs = document.querySelectorAll('.pod input');
|
||||
|
||||
for (var i=0; i<inputs.length; i++) {
|
||||
inputs[i].onchange = inputs[i].keyup = inputs[i].mouseup = inputs[i].oninput = calculateEstimate
|
||||
}
|
||||
541
index.html
541
index.html
File diff suppressed because one or more lines are too long
BIN
kraken.png
BIN
kraken.png
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -1,54 +0,0 @@
|
|||
.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 */
|
||||
margin: 2px 0;
|
||||
padding: 12px 30px 14px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #888;
|
||||
}
|
||||
|
||||
.btn:active,.btn:focus {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
.btn-a {
|
||||
background: #0ae;
|
||||
&:hover {
|
||||
background: #09d; /* darken(@btn-a-bg, 5%) */
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: #08b; /* darken(@btn-a-bg, 10%) */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
background: #3c5;
|
||||
&:hover {
|
||||
background: #2b4; /* darken(@btn-b-bg, 5%) */
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #2a4; /* darken(@btn-b-bg, 10%) */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
background: #d33;
|
||||
&:hover {
|
||||
background: #c22; /* darken(@btn-c-bg, 5%) */
|
||||
}
|
||||
&:active, &:focus {
|
||||
background: #b22; /* darken(@btn-c-bg, 10%) */
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
border-radius: 4px; /* rounded corners */
|
||||
padding: 10px 14px 11px;
|
||||
}
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
label > * {
|
||||
display:inline;
|
||||
}
|
||||
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
textarea, input, select {
|
||||
border: 1px solid #ccc;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
textarea:focus, input:focus, select:focus {
|
||||
border-color: #5ab;
|
||||
}
|
||||
|
||||
textarea, input[type=text] {
|
||||
-webkit-appearance: none; /* make iOS inputs pretty */
|
||||
width: 13em;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.addon {
|
||||
box-shadow: 0 0 0 1px #ccc;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
body, textarea, input, select {
|
||||
background: 0;
|
||||
border-radius: 0;
|
||||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.addon, .btn-sm, .nav, textarea, input, select {
|
||||
outline: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.smooth {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.btn, .nav a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@media(min-width:1310px) {
|
||||
.container {
|
||||
margin: auto;
|
||||
width: 1270px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn, h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
/* Grid system responsive code is in general.less */
|
||||
|
||||
.row {
|
||||
margin: 1% 0;
|
||||
overflow: auto; /* required - without this, the page layout is screwed up */
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.table, .c12 {
|
||||
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,5 +0,0 @@
|
|||
/* Make the default heading style larger */
|
||||
|
||||
h1 {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.ico {
|
||||
font: 33px Arial Unicode MS, Lucida Sans Unicode;
|
||||
/*
|
||||
This combo of Unicode fonts means Min's icons support OSX 10.5+, Windows 98+, and Ubuntu.
|
||||
|
||||
We don't use ems because 33px is a great size cross-browser and OS for nice icons
|
||||
*/
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
/* There aren't any IE hacks needed as of now */
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.msg {
|
||||
background: #def;
|
||||
border-left: 5px solid #59d;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
.nav, .nav .current, .nav a:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 24px;
|
||||
padding: 11px 0 15px;
|
||||
/* TODO: migrate to ems (currently we don't use them because of iOS compatibility problems (has to do with unicode icon for close)) */
|
||||
/* Uncomment for animations
|
||||
max-height: 1.5em;
|
||||
*/
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: #aaa;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.nav .pagename {
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.btn.btn-close {
|
||||
background: #000;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin: -54px 7px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width:500px) {
|
||||
.btn.btn-close {
|
||||
display: block;
|
||||
}
|
||||
.nav {
|
||||
/* transition: max-height .5s ease-in-out, height .5s ease-in-out; */
|
||||
overflow: hidden;
|
||||
}
|
||||
.pagename {
|
||||
margin-top: -11px;
|
||||
}
|
||||
.nav:active,.nav:focus {
|
||||
height: auto;
|
||||
/* Necesary for animations
|
||||
max-height: 500px;
|
||||
height: 100%;
|
||||
*/
|
||||
}
|
||||
.nav div:before {
|
||||
background: #000;
|
||||
border-bottom: 10px double;
|
||||
border-top: 3px solid;
|
||||
content: '';
|
||||
float: right;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.nav a {
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,9 +0,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 */
|
||||
}
|
||||
317
min.less
Normal file
317
min.less
Normal file
|
|
@ -0,0 +1,317 @@
|
|||
/*
|
||||
General
|
||||
*/
|
||||
|
||||
body {
|
||||
font-family: Helvetica, sans-serif;
|
||||
text-align: center;
|
||||
margin: 0px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 2.5em auto;
|
||||
&.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;
|
||||
}
|
||||
|
||||
/*
|
||||
Headings
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
margin: 0;
|
||||
&.title {
|
||||
font-size: 7em;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons
|
||||
*/
|
||||
|
||||
@btn-a-bg: rgb(52, 94, 179);
|
||||
@btn-b-bg: #51a351;
|
||||
@btn-c-bg: rgb(218, 39, 39);
|
||||
|
||||
button {
|
||||
background: rgb(175, 175, 175);
|
||||
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
|
||||
color: rgb(243, 243, 243) !important;
|
||||
display: inline-block;
|
||||
font-size: 2.5em;
|
||||
padding: 15px 40px 16px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
margin: .3em .7em .3em .7em;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
cursor: pointer;
|
||||
&.smooth {
|
||||
transition: background-color .15s ease-in-out;
|
||||
}
|
||||
&.btn-a {
|
||||
background: @btn-a-bg;
|
||||
border: 1px solid darken(@btn-a-bg, 20%);
|
||||
&:hover {
|
||||
background: darken(@btn-a-bg, 10%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@btn-a-bg, 20%);
|
||||
}
|
||||
}
|
||||
&.btn-b {
|
||||
background: @btn-b-bg;
|
||||
border: 1px solid darken(@btn-b-bg, 20%);
|
||||
&:hover {
|
||||
background: darken(@btn-b-bg, 10%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@btn-b-bg, 20%);
|
||||
}
|
||||
}
|
||||
&.btn-c {
|
||||
background: @btn-c-bg;
|
||||
border: 1px solid darken(@btn-c-bg, 20%);
|
||||
&:hover {
|
||||
background: darken(@btn-c-bg, 10%);
|
||||
}
|
||||
&:active {
|
||||
background: darken(@btn-c-bg, 20%);
|
||||
}
|
||||
}
|
||||
&.btn-small {
|
||||
padding: 7px 19px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Inputs
|
||||
*/
|
||||
|
||||
textarea, input {
|
||||
border: 1px solid lightgray;
|
||||
outline: none;
|
||||
padding: 6px;
|
||||
font-size: .8em;
|
||||
&.smooth {
|
||||
transition: border .15s ease-in-out;
|
||||
}
|
||||
font-family: Helvetica, sans-serif;
|
||||
&:focus {
|
||||
border: 1px solid rgb(87, 171, 179);
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
Navigation
|
||||
*/
|
||||
|
||||
.navbar {
|
||||
width: 100%;
|
||||
background: black;
|
||||
color: white;
|
||||
text-align: left;
|
||||
height: 1.5em;
|
||||
padding: 1em 0em .6em;
|
||||
}
|
||||
|
||||
.pagename {
|
||||
color: white;
|
||||
padding: 0px 1em 0em 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.navbar-link {
|
||||
padding: .5em;
|
||||
color: rgb(170, 170, 170);
|
||||
&:hover {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-top: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2n-1) {
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
/*
|
||||
Messages
|
||||
*/
|
||||
|
||||
message {
|
||||
width: 100%;
|
||||
display: block;
|
||||
padding: 2em 0;
|
||||
background: #A7D3E4;
|
||||
&.warning {
|
||||
background: rgb(228, 167, 167);
|
||||
}
|
||||
&.great {
|
||||
background: #A7E4AE;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Icons
|
||||
*/
|
||||
|
||||
ico {
|
||||
font-size: 1.9375em;
|
||||
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif; /* If you have to fall back to sans-serif you're screwed */
|
||||
}
|
||||
|
||||
/*
|
||||
Grid
|
||||
*/
|
||||
.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 hacks
|
||||
*/
|
||||
|
||||
.ie .mediumwidth {
|
||||
width: 70%;
|
||||
margin-left: 0;
|
||||
hr {
|
||||
margin:100px auto;
|
||||
padding-left: 200px;
|
||||
}
|
||||
}
|
||||
67
mingziphotlink.php
Normal file
67
mingziphotlink.php
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<?php
|
||||
|
||||
//This file can be used on CDNs so that users can pick and choose their downloads
|
||||
//e.x. http://8b51d1abd8.test-url.ws/mingziphotlink.php?general=1&icons=1
|
||||
|
||||
header("Access-Control-Allow-Origin: *");
|
||||
|
||||
$totalcss="";
|
||||
|
||||
if ($_GET['general']) {
|
||||
$totalcss .= "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}";
|
||||
}
|
||||
|
||||
if ($_GET['headings']) {
|
||||
$totalcss .= "h1{font-size:4em;margin:0}h1.title{font-size:7em}h2{font-size:2em}";
|
||||
}
|
||||
|
||||
if ($_GET['buttons']) {
|
||||
$totalcss .= "button{background:#afafaf;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;box-shadow:0 1px 0 rgba(255,255,255,0.5) inset;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;border:1px solid #000;cursor:pointer}button.smooth{transition:background-color .15s ease-in-out}button.btn-a{background:#345eb3;border:1px solid #1d3464}button.btn-a:hover{background:#29498b}button.btn-a:active{background:#1d3464}button.btn-b{background:#51a351;border:1px solid #2f5f2f}button.btn-b:hover{background:#408140}button.btn-b:active{background:#2f5f2f}button.btn-c{background:#da2727;border:1px solid #841717}button.btn-c:hover{background:#b01e1e}button.btn-c:active{background:#841717}button.btn-small{padding:7px 19px 10px;font-size:16px}";
|
||||
}
|
||||
|
||||
if ($_GET['inputs']) {
|
||||
$totalcss .= "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}";
|
||||
}
|
||||
|
||||
if ($_GET['navbar']) {
|
||||
$totalcss .= ".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}}";
|
||||
}
|
||||
|
||||
if ($_GET['tables']) {
|
||||
$totalcss .= "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}";
|
||||
}
|
||||
|
||||
if ($_GET['messages']) {
|
||||
$totalcss .= "message{width:100%;display:block;padding:2em 0;background:#a7d3e4}message.warning{background:#e4a7a7}message.great{background:#a7e4ae}";
|
||||
}
|
||||
|
||||
if ($_GET['icons']) {
|
||||
$totalcss .= "ico{font-size:1.9375em;font-family:Lucida Sans Unicode,Lucida Grande,sans-serif}";
|
||||
}
|
||||
|
||||
if ($_GET['grid']) {
|
||||
$totalcss .= ".row{display:block;line-height:2em;margin-top:2%;height:2em}.ie column{margin:auto .7%}column{display:inline-block;float:left;margin:auto 1%}.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}}";
|
||||
}
|
||||
|
||||
if ($_GET['iehacks']) {
|
||||
$totalcss .= ".ie .mediumwidth{width:70%;margin-left:0}.ie .mediumwidth hr{margin:100px auto;padding-left:200px}";
|
||||
}
|
||||
|
||||
// disable ZLIB ouput compression
|
||||
ini_set('zlib.output_compression','Off');
|
||||
|
||||
// compress data
|
||||
$gzipoutput = gzencode($totalcss,intval($_GET['loc']));
|
||||
|
||||
header("Access-Control-Allow-Origin: *");
|
||||
|
||||
header('Content-Encoding: gzip');
|
||||
|
||||
header('Content-Length: '.strlen($gzipoutput));
|
||||
header('Cache-Control: no-cache, no-store, max-age=0, must-revalidate');
|
||||
header('Pragma: no-cache');
|
||||
|
||||
// output data
|
||||
echo $gzipoutput;
|
||||
|
||||
?>
|
||||
284
oldindex.html
284
oldindex.html
|
|
@ -1,284 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="google-site-verification" content="6K0jyXHnCKUqFBgxR_CiAo7rvsfLNCXwHPt3zetR_wk" />
|
||||
<script>
|
||||
document.createElement("nav"); document.createElement("button");
|
||||
</script>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>min</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;
|
||||
}
|
||||
</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]-->
|
||||
|
||||
<!--[if IE 5]>
|
||||
<style>
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 16px Arial;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
height: 60px;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 8]>
|
||||
<style>
|
||||
.hero {
|
||||
margin-top: -10px !important;
|
||||
}
|
||||
</style>
|
||||
<![endif]-->
|
||||
<style type="text/css">
|
||||
/* Index only styles */
|
||||
.row {
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1.title {
|
||||
border-bottom: none;
|
||||
font-size: 90px;
|
||||
margin-top: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero em {
|
||||
color: #91D564;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.hero {
|
||||
text-align: center;
|
||||
background: #333;
|
||||
background-image: url('congruent_outline.png');
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
padding: 50px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.intro {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.btn.em {
|
||||
background: #91D564;
|
||||
}
|
||||
.btn.em:hover {
|
||||
background: #81c554;
|
||||
}
|
||||
.btn.em:active, .btn.em:focus {
|
||||
background: #71c544;
|
||||
}
|
||||
|
||||
/* Otherwise it spills over on iOS */
|
||||
.download-btn {
|
||||
font-size: 1.3em;
|
||||
padding: 8px 19px 9px;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 7px 9px 7px 0;
|
||||
}
|
||||
|
||||
.hireme {
|
||||
width: 50%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.hireme {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.hireme h1 {
|
||||
margin: 30px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
<a href="https://github.com/owenversteeg/min">Github</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>
|
||||
<!--[if IE 5]> <br><br><![endif]-->
|
||||
<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 load 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>
|
||||
<!--[if lt IE 7]> <br><br><br><![endif]-->
|
||||
<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>
|
||||
<!--[if lt IE 7]> <br><br><br><![endif]-->
|
||||
<div class="row intro">
|
||||
<div class="col c2"> </div>
|
||||
<div class="col c4">
|
||||
<a href="docs.html" class="btn em smooth">Docs</a>
|
||||
</div>
|
||||
<div class="col c4">
|
||||
<a href="download.html" class="btn smooth download-btn">Download</a>
|
||||
</div>
|
||||
<div class="col c2"> </div>
|
||||
</div>
|
||||
<div class="container intro hireme">
|
||||
<h1>Hire Owen</h1>
|
||||
<p>As the creator of Min, the smallest and fastest CSS framework in the world, I know CSS. My software is used by over 100,000 people in 185+ countries, and I have countless years of experience with front-end work. Nobody knows Min better than I do, and for this month only I am offering a <b>50% discount to anyone using Min in their project.</b> Use the link below to get a quote at my website.</p>
|
||||
<a href="http://owenversteeg.com" class="btn smooth download-btn btn-a">Hire Me</a>
|
||||
<br><br>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Quantcast Tag -->
|
||||
<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>
|
||||
BIN
pattern.png
BIN
pattern.png
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
|
|
@ -1,35 +0,0 @@
|
|||
min sass
|
||||
========
|
||||
|
||||
a tiny framework that makes websites pretty
|
||||
|
||||
To download Min, go [here](http://mincss.com/download.html).
|
||||
|
||||
|
||||
###Tiny
|
||||
995 bytes (or smaller) minified and gzipped.
|
||||
|
||||
|
||||
###Compatible
|
||||
Works with IE5 and onward. Yes, min is even responsive in IE5.
|
||||
|
||||
Of course, modern browsers give you pretty transitions.
|
||||
|
||||
|
||||
###Sass Specific Instructions
|
||||
For those that haven't used Sass before, you'll need to install it:
|
||||
|
||||
Install SASS: http://sass-lang.com/install
|
||||
|
||||
Then simply navigate to the min folder via the command line, and run
|
||||
|
||||
<code>sass --watch sass</code> (or whatever you've renamed the sass folder to)
|
||||
|
||||
|
||||
###License
|
||||
MIT licensed.
|
||||
|
||||
|
||||
###Contributing
|
||||
|
||||
See the main min ReadME on how you can contribute to min Sass or Less or Both!
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
//-------------------------------------------------------------------
|
||||
// Variable Library
|
||||
//
|
||||
// The purpose of the variable library is to have a centralized
|
||||
// location for various reusable values for the Min Framework.
|
||||
//
|
||||
// Instead of hunting through the different Sass files to update
|
||||
// values, simply change the variable in question to update all
|
||||
// instances of that value.
|
||||
//
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
|
||||
// Dark Colors
|
||||
$c-black: #000 !default;
|
||||
$c-off-black: #999 !default;
|
||||
$c-darker: #888 !default;
|
||||
$c-dark: #777 !default;
|
||||
|
||||
|
||||
// Medium Colors
|
||||
$c-grey-dark: #aaa !default;
|
||||
$c-grey: #ccc !default;
|
||||
$c-grey-light: #eee !default;
|
||||
|
||||
// Light Colors
|
||||
$c-white: #fff !default;
|
||||
|
||||
|
||||
// Inputs
|
||||
$c-focus: #5ab !default;
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
//-------------------------------------------------------------------
|
||||
// Button Colors
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
$a--bg: #0ae;
|
||||
$a--hover: #09d;
|
||||
$a--active: #08b;
|
||||
|
||||
$b--bg: #3c5;
|
||||
$b--hover: #2b4;
|
||||
$b--active: #2a4;
|
||||
|
||||
$c--bg: #d33;
|
||||
$c--hover: #c22;
|
||||
$c--active: #b22;
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// Mixin to set btn background for inactive, active & hover states
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// set default variables to be base button colors.
|
||||
@mixin btn-style ($bg: $c-off-black,
|
||||
$bg-hover: $c-darker,
|
||||
$bg-active: $c-dark) {
|
||||
background: $bg;
|
||||
|
||||
&:hover {
|
||||
background: $bg-hover;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background: $bg-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@if $import-buttons == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Button Styles & Classes
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// Set Generic <button> and .btn styling.
|
||||
// use .btn on any element to give it the styling of a button
|
||||
.btn {
|
||||
@extend %txt-large;
|
||||
@extend %no-underline;
|
||||
@include btn-style;
|
||||
border: 0;
|
||||
border-radius: 6px; // rounded corners
|
||||
color: $c-white;
|
||||
cursor: pointer;
|
||||
display: inline-block; // Enables non-inline-block elements like <a>s to be buttons
|
||||
margin: .2em .3em .2em 0;
|
||||
padding: 12px 30px 14px;
|
||||
}
|
||||
|
||||
|
||||
// Set colors for your buttons, see the button mixin at the top of this
|
||||
// file to see how the hex colors are allocated
|
||||
.btn-a {
|
||||
@include btn-style($a--bg, $a--hover, $a--active);
|
||||
}
|
||||
|
||||
.btn-b {
|
||||
@include btn-style($b--bg, $b--hover, $b--active);
|
||||
}
|
||||
|
||||
.btn-c {
|
||||
@include btn-style($c--bg, $c--hover, $c--active);
|
||||
}
|
||||
|
||||
|
||||
// Add this class to a <button> or element with a .btn class
|
||||
// to create a smaller sized button.
|
||||
.btn-sm {
|
||||
@extend %shared-font-size;
|
||||
border-radius: 4px; /* rounded corners */
|
||||
padding: 10px 15px 11px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
@if $import-forms == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Form Elements
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
form > * {
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label > * {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
@extend %shared-font-size;
|
||||
border: 1px solid $c-grey;
|
||||
padding: 8px;
|
||||
|
||||
&:focus {
|
||||
border-color: $c-focus;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input[type='text'], textarea {
|
||||
-webkit-appearance: none; // make iOS inputs pretty
|
||||
width: 13em;
|
||||
}
|
||||
|
||||
|
||||
.addon {
|
||||
@extend %shared-font-size;
|
||||
box-shadow: 0 0 0 1px $c-grey;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
//-------------------------------------------------------------------
|
||||
// General Min Styling
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
body,
|
||||
textarea, input {
|
||||
background: 0;
|
||||
border-radius: 0;
|
||||
font: 16px sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// apply a smooth transition effect to an element's state change
|
||||
.smooth {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 20px;
|
||||
width: auto;
|
||||
|
||||
@media(min-width:1310px) {
|
||||
margin: auto;
|
||||
width: 1270px;
|
||||
}
|
||||
}
|
||||
|
||||
// this extends into both nav a and .btn
|
||||
%no-underline {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// shared large text size
|
||||
%txt-large {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
// shared smaller text size
|
||||
%shared-font-size {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
@if $import-grid == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Grid system responsive code is in _general.scss
|
||||
//
|
||||
// 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%.
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
%w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 1% 0;
|
||||
overflow: auto; // needed for proper formed layout
|
||||
}
|
||||
|
||||
.col {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.c12 {
|
||||
@extend %w-100;
|
||||
}
|
||||
|
||||
$grid-list: (
|
||||
c1 8.33%,
|
||||
c2 16.66%,
|
||||
c3 25%,
|
||||
c4 33.33%,
|
||||
c5 41.66%,
|
||||
c6 50%,
|
||||
c7 58.33%,
|
||||
c8 66.66%,
|
||||
c9 75%,
|
||||
c10 83.33%,
|
||||
c11 91.66%
|
||||
);
|
||||
|
||||
@each $value in $grid-list {
|
||||
.#{nth($value, 1)} {
|
||||
width: nth($value, 2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:870px) {
|
||||
.row .col {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@if $import-headings == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Headings
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// Set style for <h1> -- larger than 'normal'
|
||||
h1 {
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
// Sets style for <h2>
|
||||
h2 {
|
||||
@extend %txt-large;
|
||||
}
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
@if $import-icons == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Icons
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
.ico {
|
||||
font: 33px Arial Unicode MS, Lucida Sans Unicode;
|
||||
|
||||
// This combo of Unicode fonts means Min's icons
|
||||
// support OSX 10.5+, Windows 98+, and Ubuntu.
|
||||
|
||||
// We don't use ems because 33px is a great size
|
||||
// cross-browser and OS for nice icons
|
||||
}
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
@if $import-ie-hacks == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Internet Explorer Hacks
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// no hacks (outside of the ie grid hack found in the grid.scss file)
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@if $import-messages == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Messages
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
.msg {
|
||||
background: #def;
|
||||
border-left: 5px solid #59d;
|
||||
padding: 1.5em;
|
||||
}
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
@if $import-navbar == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Navigation Bar
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
// CSS reused in multiple selectors
|
||||
%nav-global {
|
||||
background: $c-black;
|
||||
color: $c-white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav {
|
||||
@extend %nav-global;
|
||||
height: 24px;
|
||||
padding: 11px 0 15px;
|
||||
|
||||
// TODO: migrate to ems
|
||||
// (currently we don't use them because of iOS compatibility problems
|
||||
// -- has to do with unicode icon for close) */
|
||||
|
||||
// Uncomment for animations
|
||||
// max-height: 1.5em;
|
||||
|
||||
a {
|
||||
@extend %shared-font-size;
|
||||
@extend %no-underline;
|
||||
color: $c-grey-dark;
|
||||
padding-right: 1em;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
&:hover {
|
||||
@extend %nav-global;
|
||||
}
|
||||
}
|
||||
|
||||
.pagename {
|
||||
font-size: 22px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.current {
|
||||
@extend %nav-global;
|
||||
}
|
||||
}
|
||||
|
||||
.btn.btn-close {
|
||||
background: $c-black;
|
||||
display: none;
|
||||
float: right;
|
||||
font-size: 25px;
|
||||
margin-top: -54px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Update styling of .nav for small screens
|
||||
@media(max-width:500px) {
|
||||
.btn.btn-close {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav {
|
||||
overflow: hidden;
|
||||
// transition: max-height .5s ease-in-out, height .5s ease-in-out;
|
||||
|
||||
&:focus {
|
||||
height: auto;
|
||||
// -- Necessary for animations
|
||||
// height: 100%;
|
||||
// max-height: 500px;
|
||||
}
|
||||
|
||||
& div:before {
|
||||
background: $c-black;
|
||||
border-top: 3px solid;
|
||||
border-bottom: 10px double;
|
||||
content: '';
|
||||
float: right;
|
||||
height: 4px;
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .5em 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.pagename {
|
||||
margin-top: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@if $import-tables == true {
|
||||
//-------------------------------------------------------------------
|
||||
// Tables
|
||||
//-------------------------------------------------------------------
|
||||
|
||||
.table {
|
||||
@extend %w-100;
|
||||
|
||||
th, td {
|
||||
padding: .5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
tbody>*:nth-child(2n-1) {
|
||||
background: $c-grey;
|
||||
// We use tbody to ensure that we don't shade the heading
|
||||
// this preserves the order of the shading
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//-------------------------------------------------------------------
|
||||
// End @if
|
||||
}
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
// ------------------------------------------------------------------
|
||||
// Core Styles of Min
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@import '__var-lib.scss',
|
||||
'general.scss';
|
||||
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// Customize Optional Components
|
||||
//
|
||||
// Set undesired components to false to exclude them from
|
||||
// the final Min CSS output.
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
$import-headings: true !default;
|
||||
|
||||
$import-buttons: true !default;
|
||||
|
||||
$import-forms: true !default;
|
||||
|
||||
$import-navbar: true !default;
|
||||
|
||||
$import-tables: true !default;
|
||||
|
||||
$import-messages: true !default;
|
||||
|
||||
$import-icons: true !default;
|
||||
|
||||
$import-grid: true !default;
|
||||
|
||||
$import-messages: true !default;
|
||||
|
||||
$import-ie-hacks: false !default;
|
||||
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// Import Components based on above customization
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
@import 'button',
|
||||
'grid',
|
||||
'headings',
|
||||
'icons',
|
||||
'forms',
|
||||
'navbar',
|
||||
'table',
|
||||
'messages',
|
||||
'iehacks';
|
||||
Binary file not shown.
Loading…
Add table
Reference in a new issue