Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

617 lines (593 sloc) 27.419 kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Microjs: Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!</title>
<meta name="viewport" content="width=device-width; initial-scale=0.45">
<link href="http://fonts.googleapis.com/css?family=Maiden+Orange" rel="stylesheet">
<style>
html {
min-height: 100%;
}
body {
-webkit-text-size-adjust: none;
text-align: center;
margin: 0;
background: #333;
background: -webkit-gradient(radial, center top, 0, center top, 600, color-stop(0, #2A2E30), color-stop(1, #111414));
background: -webkit-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
background: -moz-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
background: -ms-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
background: -o-radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
background: radial-gradient(center top, circle closest-corner, #2A2E30, #111414);
color: #fff;
font: 15px/19px Helvetica, Arial;
min-height: 100%;
}
ul {
width: 650px;
margin: 20px auto;
list-style-type: none;
padding: 0;
}
h1, h2, h3, p.footer strong, .clue strong {
font-family: 'Maiden Orange', arial, sans-serif;
font-weight: normal;
}
#header {
position: relative;
}
h1 {
padding-top: 50px;
color: #fff;
margin: 0;
font-size: 136px;
line-height: 130px;
font-weight: normal;
text-shadow: 0px -1px 9px rgba(0,0,0,0.4);
}
h1.overlay {
position: absolute;
top: 0;
width: 100%;
-webkit-mask-image: -webkit-gradient(linear, left top,
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
text-shadow: none;
}
h1.overlay span {
color: #fff !important;
}
h1 span:nth-child(6n+1) { color: #A839B2; }
h1 span:nth-child(6n+2) { color: #FF0071; }
h1 span:nth-child(6n+3) { color: #ACD030; }
h1 span:nth-child(6n+4) { color: #58AA00; }
h1 span:nth-child(6n+5) { color: #00AA78; }
h1 span:nth-child(6n+6) { color: #0074AE; }
h2 {
color: #fff;
margin: 0;
font-size: 26px;
line-height: 30px;
font-weight: normal;
text-shadow: 0px -1px 5px rgba(0,0,0,0.4);
}
#ineed {
font-size: 25px;
}
select {
font-size: 25px;
background: #000;
color: #fff;
padding: 3px;
}
option {
background: #000;
}
li a {
height: 60px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
margin: 0 0 10px 0;
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
overflow: hidden;
padding-bottom: 10px;
text-overflow: ellipsis;
color: #fff;
text-decoration: none;
display: block;
padding: 20px;
}
li:nth-child(6n+1) a {
background: #791982;
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
-webkit-gradient(linear, left top, left bottom, from(#A839B2), to(#6c1075));
background:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-webkit-linear-gradient(#a839b2, #6c1075);
background:
-moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-moz-linear-gradient(#a839b2, #6c1075);
background:
-ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-ms-linear-gradient(#a839b2, #6c1075);
background:
-o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-o-linear-gradient(#a839b2, #6c1075);
background:
linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
linear-gradient(#a839b2, #6c1075);
}
li:nth-child(6n+2) a {
background: #C4004D;
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
-webkit-gradient(linear, left top, left bottom, from(#ff0071), to(#bb0047));
background:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-webkit-linear-gradient(#ff0071, #bb0047);
background:
-moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-moz-linear-gradient(#ff0071, #bb0047);
background:
-ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-ms-linear-gradient(#ff0071, #bb0047);
background:
-o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-o-linear-gradient(#ff0071, #bb0047);
background:
linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
linear-gradient(#ff0071, #bb0047);
}
li:nth-child(6n+3) a {
background: #81A02C;
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
-webkit-gradient(linear, left top, left bottom, from(#acd030), to(#6f9113));
background:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-webkit-linear-gradient(#acd030, #6f9113);
background:
-moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-moz-linear-gradient(#acd030, #6f9113);
background:
-ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-ms-linear-gradient(#acd030, #6f9113);
background:
-o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-o-linear-gradient(#acd030, #6f9113);
background:
linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
linear-gradient(#acd030, #6f9113);
}
li:nth-child(6n+4) a {
background: #4A8419;
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
-webkit-gradient(linear, left top, left bottom, from(#58aa00), to(#337100));
background:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-webkit-linear-gradient(#58aa00, #337100);
background:
-moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-moz-linear-gradient(#58aa00, #337100);
background:
-ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-ms-linear-gradient(#58aa00, #337100);
background:
-o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-o-linear-gradient(#58aa00, #337100);
background:
linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
linear-gradient(#58aa00, #337100);
}
li:nth-child(6n+5) a {
background: #18946D;
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
-webkit-gradient(linear, left top, left bottom, from(#00aa78), to(#05603e));
background:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-webkit-linear-gradient(#00aa78, #05603e);
background:
-moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-moz-linear-gradient(#00aa78, #05603e);
background:
-ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-ms-linear-gradient(#00aa78, #05603e);
background:
-o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-o-linear-gradient(#00aa78, #05603e);
background:
linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
linear-gradient(#00aa78, #05603e);
}
li:nth-child(6n+6) a {
background: #1E577F;
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.2)), color-stop(0.5, rgba(255,255,255,0.1)), color-stop(0.501, rgba(255,255,255,0.0)), to(rgba(255,255,255,0.0))),
-webkit-gradient(linear, left top, left bottom, from(#0074ae), to(#073c66));
background:
-webkit-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-webkit-linear-gradient(#0074ae, #073c66);
background:
-moz-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-moz-linear-gradient(#0074ae, #073c66);
background:
-ms-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-ms-linear-gradient(#0074ae, #073c66);
background:
-o-linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
-o-linear-gradient(#0074ae, #073c66);
background:
linear-gradient(rgba(0,0,0,0.2), rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.01%, rgba(255,255,255,0)),
linear-gradient(#0074ae, #073c66);
}
li a:hover, li a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#3a3e40), to(#2a2e30));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#3a3e40, #2a2e30);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#3a3e40, #2a2e30);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#3a3e40, #2a2e30);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#3a3e40, #2a2e30);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#3a3e40, #2a2e30);
text-shadow:0 0 15px rgba(255,255,255,0.4);
-moz-box-shadow:0 0 50px rgba(255,255,255,0.15);
-webkit-box-shadow:0 0 100px rgba(255,255,255,0.15);
}
li:nth-child(6n+1) a:hover, li:nth-child(6n+1) a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#A839B2), to(#6c1075));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#A839B2, #6c1075);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#A839B2, #6c1075);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#A839B2, #6c1075);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#A839B2, #6c1075);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#A839B2, #6c1075);
}
li:nth-child(6n+2) a:hover, li:nth-child(6n+2) a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#ff0071), to(#bb0047));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#ff0071, #bb0047);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#ff0071, #bb0047);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#ff0071, #bb0047);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#ff0071, #bb0047);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#ff0071, #bb0047);
}
li:nth-child(6n+3) a:hover, li:nth-child(6n+3) a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#acd030), to(#6f9113));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#acd030, #6f9113);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#acd030, #6f9113);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#acd030, #6f9113);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#acd030, #6f9113);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#acd030, #6f9113);
}
li:nth-child(6n+4) a:hover, li:nth-child(6n+4) a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#58aa00), to(#337100));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#58aa00, #337100);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#58aa00, #337100);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#58aa00, #337100);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#58aa00, #337100);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#58aa00, #337100);
}
li:nth-child(6n+5) a:hover, li:hover:nth-child(6n+5) a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#00aa78), to(#05603e));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#00aa78, #05603e);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#00aa78, #05603e);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#00aa78, #05603e);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#00aa78, #05603e);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#00aa78, #05603e);
}
li:nth-child(6n+6) a:hover, li:nth-child(6n+6) a:focus {
background:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), color-stop(0.5, rgba(255,255,255,0.2)), color-stop(0.501, rgba(255,255,255,0.1)), to(rgba(255,255,255,0.1))),
-webkit-gradient(linear, left top, left bottom, from(#0074ae), to(#073c66));
background:
-webkit-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-webkit-linear-gradient(#0074ae, #073c66);
background:
-moz-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-moz-linear-gradient(#0074ae, #073c66);
background:
-ms-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-ms-linear-gradient(#0074ae, #073c66);
background:
-o-linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
-o-linear-gradient(#0074ae, #073c66);
background:
linear-gradient(rgba(0,0,0,0.1), rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 50.01%, rgba(255,255,255,0.1)),
linear-gradient(#0074ae, #073c66);
}
li h3 {
float: left;
margin: 0 30px 0 0;
border-right: 1px solid rgba(255,255,255,1.0);
padding: 0 20px 0 0;
height: 60px;
line-height: 66px;
font-size: 40px;
}
li div.size {
float: right;
margin: 0 0 0 30px;
padding: 0 0 0 20px;
line-height: 66px;
height: 60px;
font-size: 40px;
font-weight: normal;
border-left: 1px solid rgba(255,255,255,1.0);
font-family: 'Maiden Orange', arial, serif;
width: 100px;
white-space: nowrap;
}
/* li h3 a {
display: inline-block;
-webkit-transition: all 0.3s;
-webkit-transform: scale(0.9) translate3d(0,0,0);
}
li h3 a:hover {
-webkit-transition: all 0.3s;
-webkit-transform: scale(1.0) translate3d(0,0,0);
}*/
p.footer {
width: 450px;
padding: 20px 0 40px 0;
border-top: 1px solid #58AA00;
color: #fff;
margin: 0 auto;
line-height: 20px;
}
p.footer strong {
font-size: 21px;
}
p.footer a {
color: #fff;
}
p.footer span.asterisk {
color: #00AA78;
padding: 0 10px;
}
p.footer span.links {
display: block;
color: #fff;
margin-top: 8px;
font-size: 12px;
}
.clue {
margin-top: 40px;
border-top: 1px solid #A839B2;
padding: 30px 0;
width: 450px;
margin: 40px auto;
}
div.clue p {
width: 450px;
color: rgb(255,255,255);
margin: 10px auto 0 auto;
line-height: 20px;
}
div.clue p strong {
font-size: 30px;
line-height: 32px;
display: block;
color: #0074AE;
}
.clue strong span:nth-child(6n+1) { color: #A839B2; }
.clue strong span:nth-child(6n+2) { color: #FF0071; }
.clue strong span:nth-child(6n+3) { color: #ACD030; }
.clue strong span:nth-child(6n+4) { color: #58AA00; }
.clue strong span:nth-child(6n+5) { color: #00AA78; }
.clue strong span:nth-child(6n+6) { color: #0074AE; }
.clue a {
color: #FF0071;
}
#ineed {
margin: 10px 0 10px 0;
}
p {
-webkit-font-smoothing: antialiased;
text-rendering:optimizeLegibility;
}
p.promotejs {
margin: 0 auto 40px auto;
}
</style>
</head>
<body>
<div id="header">
<h1>
<span>m</span><span>i</span><span>c</span><span>r</span><span>o</span><span>j</span><span>s</span>
</h1>
<h1 class="overlay">
<span>m</span><span>i</span><span>c</span><span>r</span><span>o</span><span>j</span><span>s</span>
</h1>
</div>
<div id="ineed">
I need … <select id="ineed_select">
<option></option>
<option value="base">a base framework.</option>
<option value="dom">a DOM utility.</option>
<option value="templating">templating.</option>
<option value="animation">CSS animation.</option>
<option value="jsanimation">JavaScript animation.</option>
<option value="css">a CSS selector engine.</option>
<option value="data">data manipulation.</option>
<option value="class">a Class system.</option>
<option value="functional">functional programming.</option>
<option value="loader">a JavaScript loader.</option>
<option value="json">JSON.</option>
<option value="ajax">AJAX.</option>
<option value="testing">to test stuff (e.g. unit testing).</option>
<option value="benchmark">to run benchmarks / performance tests.</option>
<option value="games">to write a game.</option>
<option value="canvas">to do CANVAS/2D graphics!</option>
<option value="color">to convert colors.</option>
<option value="spa">single page apps.</option>
<option value="storage">persistent storage.</option>
<option value="mvc">client-side MVC.</option>
<option value="feature">feature/browser detection.</option>
<option value="events">events!</option>
<option value="webkit">WebKit-specific libraries.</option>
<option value="mobile">mobile-specific libraries.</option>
<option value="responsive">libraries for responsive designs.</option>
<option value="polyfill">polyfills.</option>
<option value="analytics">analytics.</option>
<option value="hyphenation">hyphenation.</option>
<option value="async">asynchronous programming</option>
<option value="compose">to compose my own framework!</option>
<option value="micro">to code a site listing micro-frameworks!</option>
</select>
</div>
<p>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://microjs.com/" data-count="horizontal" data-via="thomasfuchs">Tweet</a><script src="http://platform.twitter.com/widgets.js"></script>
</p>
<ul id="results">
</ul>
<div class="clue">
<p><strong><span>Fantastic</span><span> Micro</span><span>-</span><span>Frameworks</span><span> and</span><br>
<span>Micro</span><span>-</span><span>Libraries</span><span> for</span><span> Fun</span>
<span>and</span><span> Profit</span><span>!</span></strong>
</p>
<p>How much library code do you really need — 50K? 100K? 150K? More? How
much of that do you really use?</p>
<p>Sure, we all love our favorite monolithic frameworks, and sometimes we
even use them fully. But how often do we reach for the ride-on John
Deere tractor with air conditioning and six-speaker sound system, when
a judiciously applied pocketknife would do the trick better, faster,
slicker?</p>
<p>Micro-frameworks are definitely the pocketknives of the JavaScript
library world: short, sweet, to the point. And at 5k and under,
micro-frameworks are very very portable. A micro-framework does one
thing and one thing only — and does it well. No cruft, no featuritis,
no feature creep, no excess anywhere.</p>
<p>Microjs.com helps you discover the most compact-but-powerful
microframeworks, and makes it easy for you to pick one that’ll work
for you.</p>
<p>Want to add your own?
<a href="https://github.com/madrobby/microjs.com">Fork this site on GitHub</a>,
add your framework to data.js and submit a pull request.</p>
<p style="margin-top:30px">
<strong><span>Can't</span> <span>get</span> <span>enough</span><span>?</span></strong>
</p>
<p>
<a href="http://140byt.es/">140byt.es</a> provides
tweet-sized JavaScript goodness!
</p>
</div>
<p class="footer">
<strong>microjs</strong> — a micro-site for micro-frameworks
<span class="links">
© 2011 <a href="//mir.aculo.us/">Thomas Fuchs</a> <span class="asterisk">✻</span>
<a href="https://github.com/madrobby/microjs.com">source on GitHub</a> <span class="asterisk">✻</span>
sizes minified &amp; gzipped
</span>
</p>
<p class="promotejs">
<a href='https://developer.mozilla.org/en/JavaScript' title='JavaScript'><img src='http://static.jsconf.us/promotejsh.gif' height='150' width='180' alt='JavaScript'/></a>
</p>
<script src="data-min.js"></script>
<script id="micro">
(function(){
var hash = location.href.split('#');
function $(id){return document.getElementById(id)}
function t(s,d){for(var p in d)s=s.replace(new RegExp('{'+p+'}','g'),d[p]);return s}
MicroJS.sort(function(){return .5-Math.random()});
function find(tag){
if(!tag) return MicroJS;
var results=[], i=MicroJS.length;
while(i--) if(MicroJS[i].tags.indexOf(tag)>-1) results.push(MicroJS[i]);
return results;
}
function render(results){
var html=[], i=results.length;
while(i--) html.push(t('<li><a href="{url}"><div class="size">{size}</div><h3>{name}</h3>{description}</a></li>',results[i]))
$('results').innerHTML = html.join('');
}
function select(tag){
var options = $('ineed_select').options, i=options.length;
while(i--) if(options[i].value==tag) $('ineed_select').selectedIndex = i;
}
$('ineed_select').onchange = function(){
var value = $('ineed_select').options[$('ineed_select').selectedIndex].value;
if(value=="micro") return(alert($('micro').innerHTML));
render(find(value));
if(value) location.href=location.href.replace(/(#.*$)|($)/,'#'+value);
}
render(hash.length ? (select(hash[1]), find(hash[1])) : MicroJS);
})();
</script>
<script src="//static.getclicky.com/js"></script>
<script>try{ clicky.init(66418235); }catch(e){}</script>
<noscript><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/66418235ns.gif"></noscript>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.