rails-boilerplate 0.1.0

data/html5-boilerplate/demo/hack.css

@@ -0,0 +1,84 @@
+/*
+  style.css contains a reset, font normalization and some base styles.
+
+  credit is left where credit is due.
+  additionally, much inspiration was taken from these projects:
+    yui.yahooapis.com/2.8.1/build/base/base.css
+    camendesign.com/design/
+    praegnanz.de/weblog/htmlcssjs-kickstart
+*/
+
+/*
+  html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+  v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
+  html5doctor.com/html-5-reset-stylesheet/
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin:0;
+  padding:0;
+  border:0;
+  outline:0;
+  font-size:100%;
+  vertical-align:baseline;
+  background:transparent;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display:block;
+}
+
+nav ul { list-style:none; }
+
+blockquote, q { quotes:none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content:""; content:none; }
+
+a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
+
+ins { background-color:#ff9; color:#000; text-decoration:none; }
+
+mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
+
+/* tables still need cellspacing="0" in the markup */
+table { border-collapse:collapse; border-spacing:0; }
+
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+
+input, select { vertical-align:middle; }
+/* END RESET CSS */
+
+
+/* fonts.css from the YUI Library: developer.yahoo.com/yui/
+   Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
+
+   There are three custom edits:
+    * remove arial, helvetica from explicit font stack
+    * we normalize monospace styles ourselves
+    * table font-size is reset in the HTML5 reset above so there is no need to repeat
+*/
+body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
+
+select, input, textarea, button { font:99% sans-serif; }
+
+/* normalize monospace sizing
+ * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
+ */
+pre, code, kbd, samp { font-family: monospace, sans-serif; }

data/html5-boilerplate/demo/hack2.css

@@ -0,0 +1,41 @@
+body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
+body, select, input, textarea {
+  /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
+  color: #444;
+  /* set your base font here, to apply evenly */
+  /* font-family: Georgia, serif; */
+}
+
+/* Headers (h1,h2,etc) have no default font-size or margin,
+   you'll want to define those yourself. */
+h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+h1 { font-size: 2em; }
+select, input, textarea, button { font:99% sans-serif; }
+
+/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
+a:hover, a:active { outline: none; }
+
+.current { background: #ccc; }
+header span { padding: 0.2em 0.5em; display: inline-block; }
+dd, h1, body, html { margin: 0;}
+
+
+a, a:active, a:visited { color: #607890; }
+a:hover { color: #036; }
+.wrapper {width:200px; border:1px solid red;}
+
+dl {margin:0 auto; width:900px;}
+dt {background-color:#ccc; margin-bottom:20px; cursor:pointer; cursor:hand; padding:5px; font-weight:bold; }
+dd {margin-bottom:30px;}
+
+#clear-demo {width:500px; border:1px solid black;}
+#clear-demo-l {width:200px; border:1px solid black; float:left;}
+#clear-demo-r {width:200px; border:1px solid black; float:right;}
+#clear-demo-b {width:200px; border:1px solid black;}
+
+header {text-align:center;}
+.show, .hide {color: #607890; cursor:pointer; cursor:hand;}
+
+body {
+  padding-bottom: 200px;
+}

data/html5-boilerplate/demo/tests.html

@@ -0,0 +1,300 @@
+<!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
+<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
+<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
+<head>
+  <meta charset="utf-8">
+
+  <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+       Remove this if you use the .htaccess -->
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+  <title>Boilerplate Test Suite</title>
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+
+  <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
+
+  <!-- CSS: implied media=all -->
+  <link rel="stylesheet" href="../css/style.css">
+  <link rel="stylesheet" href="hack2.css">
+
+<!-- All JavaScript at the bottom, except for Modernizr / Respond.
+     Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
+     For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
+  <script src="../js/libs/modernizr-2.0.6.min.js"></script>
+</head>
+
+<body>
+
+  <div id="container">
+    <header>
+        <br /><br /><h1>HTML5 Boilerplate CSS Hack Sheet</h1><br /><br />
+    </header>
+
+
+    <div id="main" style="display:block;">
+      <dl>
+        <dt>Hack 01 - Set default color</dt>
+          <dd>
+            HTML5 Boilerplate suggests the default color looks better when set to #444 instead of #000.<br />
+            <span style="color:black;">Web font default color</span>
+          </dd>
+
+        <dt>Hack 02 - Vertical Scroll Bar</dt>
+          <dd>
+            Click <a href="#" id="shorten">contract</a> | <a href="#" id="expand">expand</a> to see how Boilerplate forces a scrollbar in non-IE.
+          </dd>
+
+        <dt>Hack 03 - Accessible focus style</dt>
+          <dd>
+            Remove dotted outline around 'a' element on hover and on focus in certain browsers
+            <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <a href="#" class="preventDefault">Click me</a>
+          </dd>
+
+        <dt>Hack 04 - Pre Wrapping</dt>
+          <dd>
+            Default <code>pre</code> doesn't wrap text. Boilerplate forces <code>pre</code> to wrap text.
+            <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            with wrapping:<br /><br />
+            <div style="height:115px;">
+              <div class="wrapper">
+                <pre>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</pre>
+              </div>
+            </div><br />
+            without wrapping:<br /><br />
+            <div class="wrapper">
+              aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
+            </div>
+          </dd>
+
+        <dt>Hack 05 - Remove default textarea scrollbar in IE</dt>
+          <dd>
+            IE shows a disabled scrollbar on empty <code>textarea</code>.<br><br>
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <form>
+              <textarea></textarea>
+            </form>
+          </dd>
+
+        <dt>Hack 06 - IE6,7 legend margin</dt>
+          <dd>
+            Left align form legend to the inner text in IE 6,7.<br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <form>
+              <fieldset>
+                <legend>Information:</legend><br />
+                Name: <input type="text" size="30" /><br />
+                Email: <input type="text" size="30" /><br />
+                Date of birth: <input type="text" size="10" />
+              </fieldset>
+            </form>
+          </dd>
+
+        <dt>Hack 07 - Vertically align checkboxes, radios, text inputs with their label</dt>
+          <dd>
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <input type="radio" /> Option A <br /><br />
+            <input type="checkbox" /> Item B <br /><br />
+            Name: <input type="text" />
+          </dd>
+
+        <dt>Hack 08 - Hand cursor on clickable input elements</dt>
+          <dd>
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            Input with type submit <input type="submit" value="submit" />
+          </dd>
+
+
+        <dt>Hack 09 - Webkit browsers form elements margin</dt>
+          <dd>
+            Webkit browsers add a 2px margin outside the chrome of form elements.<br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <form>
+            <input type="submit" value="submit" /><br /><br />
+            <button type="button">Click Me!</button><br /><br />
+            <select><option>Default</option></select>
+            </form>
+          </dd>
+
+        <dt>Hack 10 - Make buttons width rendered correctly</dt>
+          <dd>
+            IE adds extra padding to <code>button</code>. This fixes the issue. <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <form>
+              <button type="button">Click Me!</button>
+              <button type="button">This is a really long button</button>
+            </form>
+          </dd>
+
+        <dt>Hack 11 - Bicubic resizing for non-native sized IMG</dt>
+          <dd>
+            IE7 hack to reduce distortion caused by image resizing <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <img src="../apple-touch-icon.png" width="27" /><br />
+            <img src="../apple-touch-icon.png" width="57" /><br />
+            <img src="../apple-touch-icon.png" width="157" /><br />
+          </dd>
+
+        <dt>Hack 12 - Hide visually</dt>
+          <dd>
+            Hide elements visually, but have it available for screen readers.
+            <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <div class="visuallyhidden">showing</div>
+          </dd>
+
+        <dt>Hack 13 - Image text replacement</dt>
+          <dd>
+            Replace text with images.
+            <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+
+            <div class="ir" style="background:url('../apple-touch-icon.png'); width:57px; height:57px;">Apple Touch Icon</div>
+
+          </dd>
+
+        <dt>Hack 14 - Clear Floats</dt>
+          <dd>
+            Clear Floated elements without extra markup.
+            <br /><br />
+            <span href="#" class="show">With Boilerplate CSS</span> | <span href="#" class="hide">Without Boilerplate CSS</span>
+            <br /><br />
+            <div id="clear-demo" class="clearfix">
+              <div id="clear-demo-l">text floated left</div><div id="clear-demo-r">text floated right</div>
+            </div>
+            <div id="clear-demo-b">unfloated text</div>
+          </dd>
+
+
+          <dt>Hack 15 - PNG fix</dt>
+          <dd>fix pngs for correct display in IE6
+            <br /> <br />
+
+          <div style="position:relative">
+
+            <!-- wassup gradient. -->
+            <div style="
+              position:absolute; height: 40px; background-color: #444444; background-image: -moz-linear-gradient(top, #444444, #999999);
+              background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999));
+              filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
+            ">
+
+              <div class="png_bg" style="
+                border:1px solid #ddd; width:100px; padding:10px 10px 10px 50px;
+                display:inline-block; background:url(test_tubes.png) no-repeat 5px center;
+              ">
+                <img src="internet_explorer.png" alt="IE is so awesome" />
+              </div>
+            </div>
+          </div>
+        </dd>
+      </dl>
+    </div>
+    <footer>
+
+    </footer>
+  </div> <!--! end of #container -->
+
+
+  <!-- Javascript at the bottom for fast page loading -->
+
+  <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
+  <script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.3.min.js"><\/script>')</script>
+
+
+  <script>
+    $("#expand").click(function() {
+      $("#container").css("height","auto").css("overflow","");
+      return false;
+    });
+
+    $("#shorten").click(function() {
+      $("#container").css("height","300px").css("overflow","hidden");
+      return false;
+    });
+
+    $("#atag").click(function() {
+      return false;
+    });
+
+    $(".show").click(function(){
+      $(".show").addClass("current")
+      $(".hide").removeClass("current");
+      showStyle();
+      return false;
+    });
+    $(".hide").click(function(){
+      $(".hide").addClass("current")
+      $(".show").removeClass("current");
+      // freeze the size of each tests so the page doesnt jump.
+      $("dd").each(function(){
+        $(this).height( $(this).height() );
+      });
+
+      hideStyle();
+      return false;
+    });
+
+    var linkTags = $("link");
+    function hideStyle() {
+      // tee hee
+      $("link[href*='style.css']").attr("media","braille");
+    }
+    function showStyle() {
+      $("link[href*='style.css']").attr("media","all");
+    }
+
+    $(".preventDefault").click(function() {
+      return false;
+    });
+
+    $(function(){
+      $(".show").addClass("current");
+    })
+  </script>
+
+
+  <!-- scripts concatenated and minified via ant build script-->
+  <script defer src="../js/plugins.js"></script>
+  <script defer src="../js/script.js"></script>
+  <!-- end scripts-->
+
+  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
+       mathiasbynens.be/notes/async-analytics-snippet -->
+  <script>
+    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview'],['_trackPageLoadTime']];
+    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+    s.parentNode.insertBefore(g,s)}(document,'script'));
+  </script>
+
+  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
+       chromium.org/developers/how-tos/chrome-frame-getting-started -->
+  <!--[if lt IE 7 ]>
+    <script defer src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
+    <script defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
+  <![endif]-->
+
+</body>
+</html>

data/html5-boilerplate/humans.txt

@@ -0,0 +1,43 @@
+/* the humans responsible & colophon */
+/* humanstxt.org */
+
+
+/* TEAM */
+  <your title>: <your name>
+  Site:
+  Twitter:
+  Location:
+
+/* THANKS */
+  Names (& URL):
+
+/* SITE */
+  Standards: HTML5, CSS3
+  Components: Modernizr, jQuery
+  Software:
+
+
+
+                               -o/-
+                               +oo//-
+                              :ooo+//:
+                             -ooooo///-
+                             /oooooo//:
+                            :ooooooo+//-
+                           -+oooooooo///-
+           -://////////////+oooooooooo++////////////::
+            :+ooooooooooooooooooooooooooooooooooooo+:::-
+              -/+ooooooooooooooooooooooooooooooo+/::////:-
+                -:+oooooooooooooooooooooooooooo/::///////:-
+                  --/+ooooooooooooooooooooo+::://////:-
+                     -:+ooooooooooooooooo+:://////:--
+                       /ooooooooooooooooo+//////:-
+                      -ooooooooooooooooooo////-
+                      /ooooooooo+oooooooooo//:
+                     :ooooooo+/::/+oooooooo+//-
+                    -oooooo/::///////+oooooo///-
+                    /ooo+::://////:---:/+oooo//:
+                   -o+/::///////:-      -:/+o+//-
+                   :-:///////:-            -:/://
+                     -////:-                 --//:
+                       --                       -: