rangeinput complete

content/documentation/rangeinput/index.html

@@ -1,39 +1,37 @@
-{% extends "userguide.j2" %}
+---
+index: 0
+title: HTML5 range input
+---
+
 {% refer to 'demos/rangeinput/index.htm' as standalone %}
 
 {% block css %}
 {{ standalone.css }}
 {% endblock %}
 
-{% block content %}
-<h1 style="background:url({{ media_url('img/hero/rangeinput.jpg') }}) no-repeat -14px 5px">
-  jQuery Rangeinput @ jQuery Tools
-  <em>HTML5 range input for humans</em>
-</h1>
+{% block blurb %}
 
-<p class="more" style="margin-top:0">
+<p>
   This tool brings <strong>HTML5</strong> range input to all browsers
   in such a way that you can make it look and behave like you
   want. This small candy weights only <strong>2.2 Kb</strong>.
 </p>
 
-<div style="margin:20px 0">
-{{ standalone.body }}
-</div>
+{{ demo(standalone, style="padding-left:14px") }}
+
+<p>
 
-<p class="less" style="margin-bottom:30px">
-  <small>
     Change the value of the above range either by dragging the handle,
     clicking on the slider or changing the value of the input
     field. When you have the focus on the input field you can change
     the value with your <samp>Arrow Keys</samp> or
     with <strong>VIM</strong> keyboard
     shortcuts <samp>HJKL</samp>. <samp>PageUp</samp>
     and <samp>PageDown</samp> go 10 steps forward and backward.
-  </small>
+
 </p>
 
-<div class="feat">
+<div class="col">
   <h3 class="first">HTML5 range input</h3>
   <p>
     This tool brings HTML5 <samp>&lt;input type="range" /&gt;</samp>
@@ -44,8 +42,8 @@ <h3 class="first">HTML5 range input</h3>
     JavaScript is disabled.
   </p>
 </div>
-<div class="feat last">
-  <h3 class="first">For nerds and humans</h3>
+<div class="col last">
+  <h3>For nerds and humans</h3>
   <p>
     Call <samp>$(":range").rangeinput();</samp> and all your HTML5
     range inputs are working. End users can pick values by dragging a
@@ -54,7 +52,8 @@ <h3 class="first">For nerds and humans</h3>
     and forth.
   </p>
 </div>
-<div class="feat">
+<br class="clear" clear="all">
+<div class="col">
   <h3>Styleable</h3>
   <p>
     You can design ranges to fit the overall feel of your site. Use
@@ -65,7 +64,7 @@ <h3>Styleable</h3>
     them for free.
   </p>
 </div>
-<div class="feat last">
+<div class="col last">
   <h3>File size: <strong>2.20 Kb!</strong></h3>
   <p>
     It contains everything you need: configurability, skinning,
@@ -77,6 +76,8 @@ <h3>File size: <strong>2.20 Kb!</strong></h3>
 </div>
 <br clear="all" />
 
+{% endblock %}
+{% block content %}
 
 <a name="usage"></a>
 <h2>Usage</h2>
@@ -115,16 +116,17 @@ <h2>Usage</h2>
 <h2>Demos</h2>
 
 <ul>
-  <c:forEach items="${f:getDemo(context.toolDemos2, 'rangeinput/index.html').category.demos}" var="demo">
-    <li> <a href="{{ content_url('demos/${demo.path}') }}">${demo.title}</a> </li>
-  </c:forEach>
+  {% set demoNode = site.content.node_from_relative_path('demos/rangeinput') %}
+  {% for demo in demoNode.walk_resources_grouped_by_group() %}
+    <li> <a href="{{ content_url(demo.relative_path) }}">{{ demo.meta.title }}</a> </li>
+  {% endfor %}
 </ul>
 
 
-
 <a name="configuration"></a>
 <h2>Configuration</h2>
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -233,7 +235,7 @@ <h2>Configuration</h2>
     </td>
   </tr>
 </table>
-
+</div>
 
 
 <a name="attributes"></a>
@@ -248,6 +250,7 @@ <h3>Input attributes</h3>
   <input type="range" value="40" min="20" max="400" step="20" />
 {% endfilter %}
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -294,7 +297,7 @@ <h3>Input attributes</h3>
     <td>Initial value.</td>
   </tr>
 </table>
-
+</div>
 
 
 <a name="skinning"></a>
@@ -336,6 +339,7 @@ <h2>Scripting API</h2>
   scripting</a>.
 </p>
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -427,7 +431,7 @@ <h2>Scripting API</h2>
     </td>
   </tr>
 </table>
-
+</div>
 
 
 <h3>DOM API</h3>
@@ -439,6 +443,7 @@ <h3>DOM API</h3>
   enabled by this tool.
 </p>
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -466,7 +471,7 @@ <h3>DOM API</h3>
     </td>
   </tr>
 </table>
-
+</div>
 
 
 <a name="events"></a>
@@ -487,6 +492,7 @@ <h2>Events</h2>
   });
 {% endfilter %}
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -517,5 +523,6 @@ <h2>Events</h2>
     </td>
   </tr>
 </table>
+</div>
 
 {% endblock %}

content/documentation/rangeinput/meta.yaml

@@ -1 +1,3 @@
-group: rangeinput
+group: rangeinput
+hero: rangeinput
+img: rangeinput