Permalink
Browse files

styling, screwy javascript

  • Loading branch information...
garann committed Mar 3, 2012
1 parent c8eafab commit 97e283801849ac80b6800ba22c0b83bf18dde1db
View
Binary file not shown.
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
Binary file not shown.
View
Binary file not shown.
@@ -0,0 +1,9 @@
+Free font by Tup Wanders
+http://www.tupwanders.nl
+
+Licensed with a Creative Commons attribution license.
+
+If you add to the font, please send me a copy! If you've made fun stuff with the font that you would like to show me, please send me that as well. I like that.
+
+Have fun,
+Tuppus
View
@@ -3,44 +3,45 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>So you need a template engine..</title>
+ <link rel="stylesheet" href="style.css" />
</head>
<body>
- <a href="https://github.com/garann/template-chooser"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <a href="https://github.com/garann/template-chooser" class="forkme"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<h1>Amazing Template-Engine-Chooser!</h1>
<div class="criteria">
- <fieldset>
+ <fieldset class="off">
<legend>Is this for use on the client or the server?</legend>
<label>client <input type="radio" name="radSide" value="client-side" /></label>
<label>server <input type="radio" name="radSide" value="server-side" /></label>
<label>both <input type="radio" name="radSide" value="both-sides" /></label>
</fieldset>
- <fieldset>
+ <fieldset class="off">
<legend>How much logic should it have?</legend>
<label>the entirety of JS <input type="radio" name="radLogic" value="logicful" /></label>
- <label>just the basics (conditions, loops, etc.) <input type="radio" name="radLogic" value="logicish" /></label>
+ <label>just the basics <input type="radio" name="radLogic" value="logicish" /></label>
<label>none at all <input type="radio" name="radLogic" value="logicless" /></label>
</fieldset>
- <fieldset>
+ <fieldset class="off">
<legend>Does it need to be one of the very fastest?</legend>
<label>yes <input type="radio" name="radSpeed" value="speedy" /></label>
<label>no <input type="radio" name="radSpeed" value="slowy" /></label>
</fieldset>
- <fieldset>
+ <fieldset class="off">
<legend>Do you need to pre-compile templates?</legend>
<label>yes <input type="radio" name="radSide" value="pre-compile" /></label>
<label>no <input type="radio" name="radSide" value="jit-compile" /></label>
</fieldset>
- <fieldset>
+ <fieldset class="off">
<legend>Do you need partials?</legend>
<label>yes <input type="radio" name="radParts" value="parts" /></label>
<label>no <input type="radio" name="radParts" value="no-parts" /></label>
</fieldset>
- <fieldset>
+ <fieldset class="off">
<legend>Do you want a DOM structure, or just a string?</legend>
<label>DOM <input type="radio" name="radDom" value="dom" /></label>
<label>string <input type="radio" name="radDom" value="string" /></label>
</fieldset>
- <fieldset>
+ <fieldset class="off">
<legend>Aside from template tags, should it look the same before and after rendering?</legend>
<label>yes <input type="radio" name="radHtml" value="format" /></label>
<label>no <input type="radio" name="radHtml" value="not-format" /></label>
@@ -97,4 +98,6 @@ <h2>Underscore templates</h2>
</div>
</div>
</body>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script src="script.js"></script>
</html>
View
@@ -0,0 +1,16 @@
+$( function () {
+ $( "div.criteria" ).on( "click", "fieldset", function() {
+ var $t = $( this );
+ if ( $t.hasClass( "off" ) ) {
+ $t.removeClass( "off" ).addClass( "on" );
+ } else {
+ $t.addClass( "off" ).removeClass( "on" );
+ }
+ });
+ $( "div.criteria" ).on( "click", "label", function( e ) {
+ e.stopPropagation();
+ var cname = $( this ).find( "input" ).val();
+ $( "div.engines div:not(." + cname + ")" ).removeClass( "add" ).addClass( "remove" );
+ $( "div.engines div." + cname ).addClass( "add" ).removeClass( "remove" );
+ });
+});
View
@@ -0,0 +1,61 @@
+/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 2, 2012 06:05:09 PM America/New_York */
+@font-face {
+ font-family: 'forque';
+ src: url('fonts/Forque-webfont.eot');
+ src: url('fonts/Forque-webfont.eot?#iefix') format('embedded-opentype'),
+ url('fonts/Forque-webfont.woff') format('woff'),
+ url('fonts/Forque-webfont.ttf') format('truetype'),
+ url('fonts/Forque-webfont.svg#firsttestRegular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+html { position: relative; height: 100%; width: 100%; padding: 0px; margin: 0px; }
+body { padding: 0px; margin: 0px; font-size: 24px; font-family: forque, sans-serif; color: #eee; }
+body { background-attachment: fixed;
+ background-image: linear-gradient(bottom, rgb(46,46,46) 0%, rgb(140,140,137) 100%);
+ background-image: -o-linear-gradient(bottom, rgb(46,46,46) 0%, rgb(140,140,137) 100%);
+ background-image: -moz-linear-gradient(bottom, rgb(46,46,46) 0%, rgb(140,140,137) 100%);
+ background-image: -webkit-linear-gradient(bottom, rgb(46,46,46) 0%, rgb(140,140,137) 100%);
+ background-image: -ms-linear-gradient(bottom, rgb(46,46,46) 0%, rgb(140,140,137) 100%);
+ background-image: -webkit-gradient(
+ linear,
+ left bottom,
+ left top,
+ color-stop(0, rgb(46,46,46)),
+ color-stop(1, rgb(140,140,137))
+ );
+}
+h1 { padding: 10px; text-align: center; font-size: 72px; color: rgba(255,255,255,.4); text-shadow: 1px 4px 6px #7f7f7f, 0 0 0 #000, 1px 4px 6px #7f7f7f;}
+h2 { margin: 5px 0px; text-shadow: 2px 2px 2px rgba(50,50,50,.3); }
+fieldset { margin: 0px; padding: 0px; overflow: hidden; border: none; padding: 0px 10px 10px; text-shadow: 2px 2px 2px #444; }
+legend { background-color: #eee; color: #666; padding: 5px; width: 100%; text-shadow: 2px 2px 2px #999; cursor: pointer; }
+.on legend:before { content: ""; }
+.off legend:before { content: ""; }
+.on label { display: block; overflow: hidden; }
+.off label { display: none; }
+input { float: left; margin-top: 15px; font-size: 40px; }
+
+.forkme { display: block; position: absolute; top: 0; right: 0; border: 0; }
+.criteria { width: 450px; margin: 10px; float: left; overflow: hidden; }
+.engines { padding-top: 5px; overflow: hidden; }
+.engines div { background-color: #f80; padding: 10px; margin: 5px; float: left; }
+.remove { -webkit-animation: laterz 1s 0s 1 forwards; -moz-animation: laterz 1s 0s 1 forwards; }
+.add { -webkit-animation: helloz 1s 0s 1 forwards; -moz-animation: helloz 1s 0s 1 forwards; }
+
+@-webkit-keyframes laterz {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+@-webkit-keyframes helloz {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+@-moz-keyframes laterz {
+ from { opacity: 1; }
+ to { opacity: 0; }
+}
+@-moz-keyframes helloz {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}

0 comments on commit 97e2838

Please sign in to comment.