Tabs basic demo added

content/documentation/dateinput/meta.yaml

@@ -0,0 +1 @@
+group: dateinput

content/documentation/meta.yaml

@@ -0,0 +1,3 @@
+group: user guide
+extends: doc.j2
+hero: usersguide

content/documentation/overlay/meta.yaml

@@ -0,0 +1 @@
+group: overlay

content/documentation/rangeinput/meta.yaml

@@ -0,0 +1 @@
+group: rangeinput

content/documentation/scrollable/meta.yaml

@@ -0,0 +1 @@
+group: scrollable

content/documentation/tabs/index.html

@@ -1,12 +1,16 @@
-{% extends "userguide.j2" %}
+---
+index: 0
+title: Tab tool basics
+---
 
-{% block css %}
+{% block extra_css %}
+{{ super() }}
 <style>
 div.panes div {
 	margin-top:10px;
 	display:none;
 	height:80px;
-	width:700px;
+	width:650px;
 	font-size:18px;
 }
 
@@ -17,27 +21,24 @@
 </style>
 {% endblock %}
 
-{% block script %}
+{% block extra_script %}
 <script>
 $(function() {
   $(".tabs").tabs(".panes > div");
 });
 </script>
 {% endblock %}
 
-{% block content %}
-<h1 style="background-image:url({{ media_url('img/hero/tabs.jpg') }})">
-  jQuery TOOLS / Tabs - Tabs done right
-</h1>
-
-<ul class="tabs" style="position:relative;top:-46px;margin-top:0px">
+{% block blurb %}
+<div class="box">
+<ul class="tabs">
   <li><a href="#">First tab</a></li>
   <li><a href="#">Second tab</a></li>
   <li><a href="#">Third tab</a></li>
 </ul>
 <br clear="all" />
 
-<div class="panes" style="height:110px;position:relative;top:-40px">
+<div class="panes">
   <div>
     <img src="{{ media_url('img/logo-medium.png') }}"
          style="position:relative;top:-75px;margin-bottom:-80px"/>
@@ -65,10 +66,10 @@ <h1 style="background-image:url({{ media_url('img/hero/tabs.jpg') }})">
     orci luctus et ultrices posuere cubilia Curae.
   </div>
 </div>
+</div>
 <br clear="all" />
 
-
-<div class="feat">
+<div class="col">
   <h3 class="first">Simple</h3>
 
   <p>
@@ -87,7 +88,7 @@ <h3>Fading, sliding, ajaxed, horizontal ...</h3>
   </p>
 </div>
 
-<div class="feat last">
+<div class="col last">
   <h3 class="first">Respects browsers' back button</h3>
   <p>
     You can enable <samp>history</samp> support for tabs so that end
@@ -106,17 +107,20 @@ <h3>File size: 0.9 Kb</h3>
     size is 2.9 Kb.
   </p>
 </div>
-<br clear="all" />
 
 
+{% endblock %}
+
+{% block content %}
+
 
-<h3>Quick Start</h3>
+<h2>Quick Start</h2>
 
 <p>
   Here is the minimal HTML code to get tabs working:
 </p>
 
-<pii:code lang="html">
+~~~html~~~
   <!-- the tabs -->
   <ul class="tabs">
     <li><a href="#">Tab 1</a></li>
@@ -130,9 +134,9 @@ <h3>Quick Start</h3>
     <div>pane 2 content</div>
     <div>pane 3 content</div>
   </div>
-</pii:code>
+~~~~~~~~
 
-<h4>JavaScript setup</h4>
+<h3>JavaScript setup</h3>
 
 <p>
   This JavaScript snippet activates those tabs:
@@ -158,7 +162,7 @@ <h4>JavaScript setup</h4>
 
 
 <a name="demos"></a>
-<h2>demos</h2>
+<h2>Demos</h2>
 
 <p>
   It's important to <strong>study the first demo</strong>, "Minimal
@@ -167,22 +171,12 @@ <h2>demos</h2>
 </p>
 
 <ul>
-  <c:forEach items="${f:getDemo(context.toolDemos, 'tabs/index.html').category.demos}" var="demo">
-    <li> <a href="{{ content_url('demos/${demo.path}') }}">${demo.title}</a> </li>
-  </c:forEach>
+  {% set tabDemoNode = site.content.node_from_relative_path('demos/tabs') %}
+  {% for demo in tabDemoNode.walk_resources_grouped_by_group() %}
+    <li> <a href="{{ content_url(demo.relative_path) }}">{{ demo.meta.title }}</a> </li>
+  {% endfor %}
 </ul>
 
-<c:set var="description">
-  <p>
-    These graphics are being used in the following CSS
-    files: <a href="{{ media_url('css/tabs.css') }}">default tabs</a>
-    and <a href="{{ media_url('css/validator/form-flowplayer.css') }}">tabs
-    with panes</a> and they are using a technique
-    called <a href="http://www.alistapart.com/articles/sprites/"
-    class="external">CSS sprites</a> which is a very important
-    technology in tab design.
-  </p>
-</c:set>
 
 {% include "graphics.j2" %}
 
@@ -202,6 +196,17 @@ <h2>demos</h2>
   <img src="{{ media_url('img/tabs/thumb/blue_panes.jpg') }}" />
 </p>
 
+<p>
+  These graphics are being used in the following CSS files:
+  <ul>
+    <li><a href="{{ media_url('css/tabs.css') }}">default tabs</a></li>
+    <li><a href="{{ media_url('css/validator/form-flowplayer.css') }}">tabs with panes</a></li>
+  </ul>
+
+  They are using a technique called <a href="http://www.alistapart.com/articles/sprites/"
+  class="external">CSS sprites</a> which is a very important
+  technology in tab design.
+</p>
 
 <a name="configuration"></a>
 <h2>Configuration</h2>
@@ -211,7 +216,7 @@ <h2>Configuration</h2>
   above. Here is a generic form for constructing tabs:
 </p>
 
-<pii:code>
+~~~js~~~
   $("<tabs_selector>").tabs("<pane_selector>", {
       /* tabs configuration goes here */
 
@@ -223,7 +228,7 @@ <h2>Configuration</h2>
 
       // ... the rest of the configuration properties
       });
-</pii:code>
+~~~
 
 
 <h4>tabs_selector</h4>
@@ -275,6 +280,7 @@ <h4><em>2<sup>nd</sup> argument:</em> configuration</h4>
   the same call then you should <a href="#multiple">read this</a>.
 </p>
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -407,6 +413,7 @@ <h4><em>2<sup>nd</sup> argument:</em> configuration</h4>
   </tr>
 
 </table>
+</div>
 
 <a name="multiple"></a>
 <h3>Initializing multiple Tabs</h3>
@@ -490,6 +497,7 @@ <h2>Events</h2>
   Object</a> as the first argument.
 </p>
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -512,6 +520,7 @@ <h2>Events</h2>
     </td>
   </tr>
 </table>
+</div>
 
 <a name="api"></a>
 <h2>Scripting <em>API</em></h2>
@@ -542,6 +551,7 @@ <h2>Scripting <em>API</em></h2>
   Here is a list of all API methods:
 </p>
 
+<div class="table">
 <table class="listing">
   <thead>
     <tr>
@@ -629,6 +639,7 @@ <h2>Scripting <em>API</em></h2>
     </td>
   </tr>
 </table>
+</div>
 
 <a name="effects"></a>
 <h2>Making custom effects</h2>

content/documentation/tabs/meta.yaml

@@ -0,0 +1,2 @@
+group: tabs
+hero: tabs

content/documentation/toolbox/meta.yaml

@@ -0,0 +1 @@
+group: toolbox

content/documentation/tooltip/meta.yaml

@@ -0,0 +1 @@
+group: tooltip

content/documentation/validator/meta.yaml

@@ -0,0 +1 @@
+group: validator

content/media/css/docs.styl

@@ -4,4 +4,32 @@
 @import "include/gradients"
 @import "include/code"
 @import "include/jqtabs.css"
-@import "include/tabs"
+
+.blurb
+    clearfix()
+
+.col
+    width 48%
+    float left
+    margin 0 1%
+
+    h3
+        font-size 14px
+        margin 16px 0
+
+    p
+        font-size 12px
+
+        &.more
+            font-size 14px
+            color textgray
+            margin-bottom 16px
+
+
+    &.last
+        margin 0
+        float right
+
+    img
+        float left
+        margin 10px 8px

content/media/css/include/content.styl

@@ -1,5 +1,12 @@
 .box
     margin 12px 0 12px
+p
+        margin 12px 0
+
+ul, ol
+        margin 2px 16px 6px
+        line-height 20px
+
 
 .blurb
     margin 12px 0 24px
@@ -62,13 +69,6 @@ body
     .tease.first
         margin-top 12px
 
-    p
-        margin 12px 0
-
-    ul, ol
-        margin 2px 16px 6px
-        line-height 20px
-
     .box
         background-color clear - 3
         clearfix()

content/media/css/include/sidebar.styl

@@ -19,6 +19,10 @@ nav
         letter-spacing 1px
         text-align left
 
+    ol, ul
+        margin 0
+        padding 0
+
     ol.cat
         display none
 

layout/doc.j2

@@ -0,0 +1,26 @@
+{% extends "root.j2" %}
+
+{% block extra_css %}
+<link rel="stylesheet" type="text/css" href="{{ media_url('css/docs.css') }}">
+<link rel="stylesheet" type="text/css" href="{{ media_url('css/syntax.css') }}">
+{% endblock %}
+
+{% block main %}
+<img id="hero" src="{{ media_url('img/hero/' ~ resource.meta.hero ~ '.jpg') }}">
+<div class="blurb">
+<h1 class="teaser title">{{ resource.meta.title|typogrify }}</h1>
+{% block blurb %}
+{% endblock %}
+</div>
+
+{% block content %}
+{% endblock %}
+
+{% endblock %}
+
+
+{% block right_navigation %}
+<nav class="sidebar">
+{% include "group_nav.j2" %}
+</nav>
+{% endblock %}