Merge lp:~daker/ubuntu-html5-theme/fix.docs-theme into lp:~ubuntu-html5-theme-devs/ubuntu-html5-theme/ambiance

[Adnane Belmadiaf]

Updated the theme to match the Ubuntu theme

[Kyle Nitzsche (knitzsche)]

Adnane, thanks for the nice theme work!

One issue is how we support headings in the intro text for each class. YUIDOC supports Markdown, and in the previous theme, I had used six leading hash characters for the heading text. These were converted to <h5>s, which were quite visible, being bold and larger, as you can see here:
http://people.canonical.com/~knitzsche/yuidoc-ubuntu-html5-theme/latest/classes/UbuntuUI.Pagestack.html

(Search for "Default application wide footer")

In this proposed theme, such headers are no longer different from normal text and therefore can't be seen well:
http://people.ubuntu.com/~daker/ubuntu-html5-theme/docs/classes/UbuntuUI.Pagestack.html

And I also notice that you changed the number of hash marks in popover.js from six to three: see "Popover Position" header on this page of yours: http://people.ubuntu.com/~daker/ubuntu-html5-theme/docs/classes/UbuntuUI.Popover.html

So, two things:
1) I prefer three hash marks to six, but: Can you modify the style so that the heading is bold? I find that in your theme is does not stand out enough.
3) Can you modify all other instances of the six hash marks to the new three hash marks so that we don't visually lose existing headers?

review: Needs Fixing

[Kyle Nitzsche (knitzsche)]

Another possible issue: There needs to be an obvious way to get back to the true index.html/starting page.

In my (previous) theme, if you click the Ubuntu logo at the top, it takes you to this page: file:///home/knitzsche/touch-sdk/ubuntu-html5-theme-yuidoc/0.1/ambiance/js/build/index.html

That page contains introductory text that should not be lost to a user navigating the API docs.

I don't see how to navigate back to that page from this proposed theme.

[Kyle Nitzsche (knitzsche)]

One more possible issue: this theme is built to contain the dev.u.com banner. But that banner should probably not be a part of build docs but should be part of the larger website, I would think. (We don't want to introduce a requirement that when the main banner changes, we also have to change it in our theme dir in order to stay synchronized). Probably mhall and dplanella have important input here.

[Kyle Nitzsche (knitzsche)]

Probably my last point is not quite right, just consider it Adnane.

Also, if it will make your life easier, I'll be glad to fix the markdown to three leading hash chars throughout. Just let me know.

Unmerged revisions

92. By Adnane Belmadiaf on 2013-11-03

Updated the theme to match the Ubuntu theme

=== modified file '0.1/ambiance/js/popovers.js'
--- 0.1/ambiance/js/popovers.js	2013-11-01 15:40:10 +0000
+++ 0.1/ambiance/js/popovers.js	2013-11-03 22:06:55 +0000
@@ -26,7 +26,7 @@
 A Popoves often contain a List whose items are connected to useful JavaScript functions.
 
 
-######Popover Position
+###Popover Position
 The Popover's position is set relative to a specified base element with the <em>data-gravity="LETTER"</em> attribute. LETTER values:
 
  - 'n': the base element is above the Popover
@@ -63,7 +63,7 @@
 };
 
 Popover.prototype = {
-    /** 
+    /**
      * Display a Popover
      * @method show
      */
 
=== added file '0.1/ambiance/js/yuidoc-theme/assets/css/base.css'
--- 0.1/ambiance/js/yuidoc-theme/assets/css/base.css	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/js/yuidoc-theme/assets/css/base.css	2013-11-03 22:06:55 +0000
@@ -0,0 +1,643 @@
+/**
+* Ubuntu Developer base stylesheet
+*
+* A base stylesheet containing site-wide styles
+*
+* @project Ubuntu Developer
+* @version 1.0
+* @author Canonical Web Team: Steve Edwards
+* @copyright 2011 Canonical Ltd.
+*/
+
+/**
+* @section Global
+*/
+
+body {
+	font-family: 'Ubuntu', 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif;
+	font-size: 13px;
+	line-height: 1.4;
+	color: #333;
+}
+a {
+	color: #dd4814;
+	text-decoration: none;
+	outline: 0;
+}
+p, dl {
+	margin-bottom: 10px;
+}
+strong {
+	font-weight: bold;
+}
+em {
+	font-style: italic;
+}
+code{
+	padding: 0;
+	font-family: 'Ubuntu Mono', 'Consolas', 'Monaco', 'DejaVu Sans Mono', Courier, monospace;
+}
+
+/* Fix */
+pre.code {
+	background-color: #F6F6F6!important;
+	border: 1px solid #E6E6E6!important;
+	border-collapse: separate!important;
+	margin-bottom: 2.5em;
+	padding: 10px!important;
+}
+/* ENDFIX */
+
+h1 {
+	font-size: 36px;
+	line-height: 1.1;
+	margin-bottom: 20px;
+}
+article h1,
+h2 {
+	font-size: 24px;
+	line-height: 1.2;
+	margin-bottom: 14px;
+}
+h3 {
+	font-size: 16px;
+	line-height: 1.3;
+	margin-bottom: 8px;
+}
+h4 {
+	font-weight: bold;
+}
+
+time {
+	color:#999;
+}
+
+/**
+* @section Structure
+*/
+
+.header-login,
+.header-navigation div,
+.header-content div {
+	margin: 0 auto;
+	width: 940px;
+}
+
+.header-content h1{
+	background-color:#ffffff;
+	display:inline-block;
+}
+
+.header-content h2{
+	background-color:#ffffff;
+	display:table;
+}
+
+.header-login ul {
+	margin: 4px 0;
+	float: right;
+}
+.header-login li {
+	margin-right: 10px;
+	float: left;
+}
+.header-login a {
+	color: #333;
+}
+.header-navigation {
+	border-top: 2px solid #dd4814;
+	border-bottom: 2px solid #dd4814;
+	background-color: #fff;
+	height: 54px;
+	clear: right;
+	overflow: hidden;
+}
+.header-navigation nav ul {
+	border-right: 1px solid #dd4814;
+	float: right;
+}
+.header-navigation nav li {
+	border-left: 1px solid #dd4814;
+	float: left;
+	height: 54px;
+}
+.header-navigation nav a {
+	padding: 18px 14px 0;
+	font-size: 14px;
+	display: block;
+	height: 36px;
+}
+.header-navigation nav a:hover {
+	background-color: #fcece7;
+}
+.header-navigation nav .current_page_item a,
+.header-navigation nav .current_page_parent a,
+.header-navigation nav .current_page_ancestor a {
+	background-color: #dd4814;
+	color: #fff;
+}
+.header-navigation input {
+	margin: 12px 10px 0 10px;
+	padding: 5px;
+	border-top: 1px solid #a1a1a1;
+	border-right: 1px solid #e0e0e0;
+	border-bottom: 1px solid #fff;
+	border-left: 1px solid #e0e0e0;
+	width: 90px;
+	font-style: italic;
+	color: #ccc;
+		-moz-border-radius: 3px;
+		-webkit-border-radius: 3px;
+	border-radius: 3px;
+		-moz-box-shadow: inset 0 1px 1px #e0e0e0;
+	   -webkit-box-shadow: inset 0 1px 1px #e0e0e0;
+   box-shadow: inset 0 1px 1px #e0e0e0;
+}
+.header-navigation h2 {
+	margin: 18px 0 0 6px;
+	text-transform: lowercase;
+	font-size: 22px;
+	color: #dd4814;
+	float: left;
+}
+.header-navigation .logo-ubuntu {
+	margin-top: 12px;
+	float: left;
+}
+.header-content .header-navigation-secondary {
+	margin-bottom: 40px;
+	padding: 0;
+	position: relative;
+	z-index: 2;
+}
+.header-navigation-secondary div {
+	padding: 0;
+	border: 2px solid #dd4814;
+		-moz-border-radius: 0px 0px 4px 4px;
+		-webkit-border-radius: 0px 0px 4px 4px;
+	border-radius: 0px 0px 4px 4px;
+	background: #fff;
+	border-top: 0px;
+	width: 936px;
+}
+.header-navigation-secondary nav li {
+	float: left;
+}
+.header-navigation-secondary nav li a {
+	color: #333;
+	display: block;
+	height: 25px;
+	padding: 8px 8px 0;
+}
+.header-navigation-secondary nav li:hover,
+.header-navigation-secondary nav .current_page_item a {
+	background: url("../img/sec-nav-hover.gif");
+}
+.header-content {
+	padding-bottom: 30px;
+	border-bottom: 1px solid #e0e0e0;
+		-moz-box-shadow: 0 1px 3px #e0e0e0;
+		-webkit-box-shadow: 0 1px 3px #e0e0e0;
+	box-shadow: 0 1px 3px #e0e0e0;
+	margin-bottom: 3px;
+	position: relative;
+	overflow: hidden;
+}
+footer {
+	padding: 10px 10px 40px 10px;
+	position: relative;
+		-moz-border-radius: 0 0 4px 4px;
+		-webkit-border-radius: 0 0 4px 4px;
+	border-radius: 0 0 4px 4px;
+	font-size: 12px;
+	background: url("../img/background-footer.png") repeat scroll 0 0 #f7f6f5;
+}
+footer div {
+	margin: 0 auto;
+    padding: 0 10px;
+    width: 940px;
+}
+footer a {
+	color: #000;
+}
+footer nav ul {
+	margin: 10px 17px 30px 0;
+	width: 172px;
+	display: inline-block;
+	vertical-align: top;
+	height: auto;
+	zoom: 1;
+	*display: inline;
+}
+footer nav ul.last {
+	margin-right: 0;
+}
+footer nav li {
+	margin-bottom: 8px;
+}
+footer nav li:first-child {
+	font-weight: bold;
+}
+footer p {
+	margin-bottom: 0;
+}
+#content {
+	padding-top: 35px;
+}
+.arrow-nav {
+	display: none;
+	position: absolute;
+	top: -1px;
+	z-index: 3;
+}
+.shadow {
+	margin: 30px 0 3px 0;
+	border-bottom: 1px solid #e0e0e0;
+		-moz-box-shadow: 0 2px 3px #e0e0e0;
+		-webkit-box-shadow: 0 2px 3px #e0e0e0;
+	box-shadow: 0 2px 3px #e0e0e0;
+	height: 3px;
+}
+
+/**
+* @section Site-wide
+*/
+
+#content h2{
+	font-size:24px;
+}
+
+.box-orange {
+	padding: 10px;
+	border: 3px solid #dd4814;
+		-moz-border-radius: 4px;
+		-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.box-orange .link-action-small {
+	float: right;
+	margin: 0 0 0 20px;
+}
+.link-bug {
+	margin-left: 10px;
+	color: #999;
+}
+.link-action {
+	float: left;
+	margin-bottom: 20px;
+	padding: 8px 12px;
+	display: block;
+	background-color: #dd4814;
+	color: #fff;
+		-moz-border-radius: 20px;
+		-webkit-border-radius: 20px;
+	border-radius: 20px;
+	font-size: 16px;
+	line-height: 1.3;
+	border-top: 3px solid #e6633a;
+	border-bottom: 3px solid #c03d14;
+}
+.link-action2 {
+	float: left;
+	display: block;
+	color: #fff;
+	font-size: 16px;
+	line-height: 1.3;
+}
+.link-action2 span{
+	display:block;
+	float:left;
+}
+.link-action2 .cta-left{
+	background:url(../img/button-cta-left.png) no-repeat;
+	width:22px;
+	height:48px;
+}
+.link-action2 .cta-center{
+	background:url(../img/button-cta-slice.png) repeat-x;
+	line-height:45px;
+	height:48px;
+}
+.link-action2 .cta-right{
+	background:url(../img/button-cta-right.png) no-repeat;
+	width:22px;
+	height:48px;
+}
+
+.link-action-small {
+	float: left;
+	display: block;
+	color: #fff;
+	font-size: 16px;
+}
+.link-action-small span{
+	display:block;
+	float:left;
+	height:42px;
+}
+.link-action-small .cta-left{
+	background:url(../img/button-cta-left-small.png) no-repeat;
+	width:19px;
+}
+.link-action-small .cta-center{
+	background:url(../img/button-cta-slice-small.png) repeat-x;
+	line-height:42px;
+}
+.link-action-small .cta-right{
+	background:url(../img/button-cta-right-small.png) no-repeat;
+	width:19px;
+}
+
+.link-action:active {
+	position: relative;
+	top: 1px;
+}
+.link-action2:active {
+	position: relative;
+	top: 1px;
+}
+.link-action-small:active {
+	position: relative;
+	top: 1px;
+}
+.list-bullets li {
+	margin-bottom: 10px;
+	list-style: disc;
+	list-style-position: inside;
+}
+.box {
+	margin-bottom: 30px;
+	padding: 15px;
+	border: 1px solid #aea79f;
+		-moz-border-radius: 4px;
+		-webkit-border-radius: 4px;
+	border-radius: 4px;
+}
+.box-padded {
+	margin-bottom: 30px;
+	padding: 5px;
+	border: 2px solid #aea79f;
+		-moz-border-radius: 4px;
+		-webkit-border-radius: 4px;
+	border-radius: 4px;
+	background: url("../img/pattern-featured.gif") repeat scroll 0 0 #ebe9e7;
+	overflow: hidden;
+}
+.box-padded h3 {
+	 margin: 5px 0 10px 5px;
+}
+.box-padded div {
+	padding: 10px;
+	border: 1px solid #aea79f;
+		-moz-border-radius: 4px;
+		-webkit-border-radius: 4px;
+	border-radius: 4px;
+	background-color: #fff;
+	overflow: hidden;
+}
+.box-padded li {
+	padding: 0 10px;
+	float: left;
+	width: 211px;
+	border-right: 1px dotted #aea79f;
+}
+.box-padded li.first {
+	padding: 0;
+	margin-bottom: 0;
+}
+.box-padded li.last {
+	border: 0;
+	width: 217px;
+}
+.box-padded img {
+	margin: 0 10px 50px 0;
+	float: left;
+		-moz-border-radius: 8px;
+		-webkit-border-radius: 8px;
+	border-radius: 8px;
+}
+.box-clear {
+	margin-bottom: 40px;
+}
+.box-clear .grid-4.first {
+	margin-right: 15px;
+	padding-right: 15px;
+}
+.box-clear .grid-4 {
+	margin-left: 0;
+	margin-right: 10px;
+	padding-right: 10px;
+	width: 298px;
+}
+.box-clear time {
+	display: block;
+	border-bottom: 1px dotted #aea79f;
+	padding-bottom: 10px;
+	margin-bottom: 10px;
+}
+.box-clear div.first {
+	border-right: 1px dotted #aea79f;
+}
+.box-clear a {
+	display: block;
+}
+.box-clear .rss {
+	background: url("../img/rss.jpg") no-repeat scroll 0 center;
+	padding-left: 20px;
+}
+.box-clear .location {
+	display: block;
+	margin-bottom: 1px;
+}
+.box-clear .last {
+	margin: 0;
+	padding-right: 0;
+		-moz-border-radius: 4px;
+		-webkit-border-radius: 4px;
+	border-radius: 4px;
+	width: 293px;
+}
+
+/* Widgets */
+
+.ui-state-focus {
+	outline: none;
+}
+.ui-accordion {
+	border-bottom: 1px dotted #aea79f;
+}
+.ui-accordion a {
+	display: block;
+}
+.ui-accordion h3 {
+	margin-bottom: 0;
+	border-top: 1px dotted #aea79f;
+	position: relative;
+	font-size: 13px;
+	font-weight: bold;
+}
+.ui-accordion h3 a {
+	padding: 10px 0;
+	color: #333;
+}
+.ui-accordion h4 {
+	margin-bottom: 5px;
+}
+.ui-accordion div fieldset {
+	padding-bottom: 5px;
+}
+.ui-accordion div li,
+.ui-accordion div input {
+	margin-bottom: 10px;
+}
+.ui-accordion .ui-icon {
+	position: absolute;
+	top: 15px;
+	right: 0;
+	display: block;
+	width: 8px;
+	height: 8px;
+	background: url("../img/icon-accordion-inactive.png") 0 0 no-repeat transparent;
+}
+.ui-accordion .ui-state-active .ui-icon {
+	background-image: url("../img/icon-accordion-active.png");
+}
+.ui-accordion .current_page_item a {
+	color: #333;
+}
+.container-tweet {
+		-moz-border-radius: 4px 4px 4px 4px;
+		-webkit-border-radius: 4px 4px 4px 4px;
+	border-radius: 4px 4px 4px 4px;
+	padding: 10px 10px 10px;
+	background-color: #f7f7f7;
+}
+.container-tweet .tweet-follow {
+	margin-top: 10px;
+	margin-bottom: -10px;
+	padding-left: 55px;
+	padding-bottom: 6px;
+	background: url("../img/tweet-follow.png") 0 5px no-repeat;
+	display: block;
+}
+.container-tweet .tweet-follow span {
+	font-size: 16px;
+	font-weight: bold;
+	line-height: 1.2;
+	display: block;
+}
+.tweet a {
+	display: inline;
+}
+.tweet .tweet_text {
+	padding: 10px;
+	background-color: #fff;
+		-moz-border-radius: 4px 4px 4px 4px;
+		-webkit-border-radius: 4px 4px 4px 4px;
+	border-radius: 4px 4px 4px 4px;
+	border: 1px solid #dd4814;
+	font-size: 16px;
+	display: block;
+	clear: both;
+}
+.tweet.tweet-small .tweet_text {
+	font-size: inherit;
+}
+.tweet .tweet_text a {
+	color: #333;
+}
+.tweet .tweet_time,
+.tweet .tweet_user_and_time {
+	padding: 15px 0 10px 0;
+	position: relative;
+	top: -2px;
+	background: url("../img/tweet-arrow.png") no-repeat;
+	display: block;
+}
+.tweet .tweet_odd .tweet_time,
+.tweet .tweet_odd .tweet_user_and_time {
+	background-position: right 0;
+	float: right;
+}
+.tweet .tweet_even .tweet_time,
+.tweet .tweet_even .tweet_user_and_time {
+	background-position: left 0;
+	float: left;
+}
+
+/* Search */
+
+#content .list-search li {
+	list-style-type:none;
+	border:0px;
+	margin-bottom: 15px;
+	padding-top: 15px;
+}
+
+/* Blog */
+
+.blog-article #nav-single {
+	margin-top: 30px;
+	margin-bottom: 30px;
+}
+.blog-article #nav-single .nav-next {
+	float: right;
+}
+.blog-article article header .entry-meta {
+	margin-bottom: 20px;
+}
+.blog-article article .entry-meta {
+	color: #999;
+}
+.blog-article #respond form input[type="submit"] {
+	float: left;
+	cursor: pointer;
+	margin-bottom: 20px;
+	padding: 8px 12px;
+	display: block;
+	background-color: #dd4814;
+	color: #fff;
+		-moz-border-radius: 20px;
+		-webkit-border-radius: 20px;
+	border-radius: 20px;
+	font-size: 16px;
+	line-height: 1.3;
+	border-top: 3px solid #e6633a;
+	border-left: 3px solid #e6633a;
+	border-right: 3px solid #e6633a;
+	border-bottom: 3px solid #c03d14;
+}
+.blog-article #respond form input[type="submit"]:active {
+	position: relative;
+	top: 1px;
+}
+
+.alignnone{
+    float:left;
+    margin:10px 20px 10px 0;
+}
+.alignleft{
+    float:left;
+    margin:10px 20px 10px 0;
+}
+.alignright{
+    float:right;
+   margin:10px 0 10px 20px;
+}
+
+.aligncenter{
+	float:left;
+    margin:10px 20px 10px 0;
+}
+.entry-content h2, .entry-content h3{
+    margin-top:20px;
+}
+.entry-content ul li{
+    list-style-type: circle;
+    margin-left:16px;
+}
+
+.entry-content hr{
+	border:none;
+	border-top: 1px dotted #AEA79F;
+}
 
=== removed file '0.1/ambiance/js/yuidoc-theme/assets/css/external-small.png'
 Binary files 0.1/ambiance/js/yuidoc-theme/assets/css/external-small.png	2013-10-17 16:34:23 +0000 and 0.1/ambiance/js/yuidoc-theme/assets/css/external-small.png	1970-01-01 00:00:00 +0000 differ
=== added file '0.1/ambiance/js/yuidoc-theme/assets/css/html5.css'
--- 0.1/ambiance/js/yuidoc-theme/assets/css/html5.css	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/js/yuidoc-theme/assets/css/html5.css	2013-11-03 22:06:55 +0000
@@ -0,0 +1,828 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@media screen
+{
+
+/* basic elements */
+    html
+    {
+        color: #000000;
+        background: #FFFFFF;
+    }
+    table
+    {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    fieldset, img
+    {
+        border: 0;
+        max-width:100%;
+    }
+    address, caption, cite, code, dfn, em, strong, th, var, optgroup
+    {
+        font-style: inherit;
+        font-weight: inherit;
+    }
+    del, ins
+    {
+        text-decoration: none;
+    }
+    ol li
+    {
+        list-style: decimal;
+    }
+    ul li
+    {
+        list-style: none;
+    }
+    caption, th
+    {
+        text-align: left;
+    }
+    h1.title
+    {
+        font-weight: bold;
+        font-size: 150%;
+    }
+    h0
+    {
+        font-weight: bold;
+        font-size: 130%;
+    }
+    h1, h2, h3, h4, h5, h6
+    {
+        font-size: 100%;
+    }
+    q:before, q:after
+    {
+        content: '';
+    }
+    abbr, acronym
+    {
+        border: 0;
+        font-variant: normal;
+    }
+    sup, sub
+    {
+        vertical-align: baseline;
+    }
+    tt, .qmlreadonly span, .qmldefault span
+    {
+        word-spacing:0.5em;
+    }
+    legend
+    {
+        color: #000000;
+    }
+    strong
+    {
+        font-weight: bold;
+    }
+    em
+    {
+        font-style: italic;
+    }
+
+    body
+    {
+        margin: 0 1.5em 0 1.5em;
+        font-family: ubuntu;
+        line-height: normal
+    }
+    a
+    {
+        color: #00732F;
+        text-decoration: none;
+    }
+    hr
+    {
+        background-color: #E6E6E6;
+        border: 1px solid #E6E6E6;
+        height: 1px;
+        width: 100%;
+        text-align: left;
+        margin: 1.5em 0 1.5em 0;
+    }
+
+    pre
+    {
+        border: 1px solid #DDDDDD;
+        -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        border-radius: 0.7em 0.7em 0.7em 0.7em;
+        padding: 1em 1em 1em 1em;
+        overflow-x: auto;
+    }
+    table, pre
+    {
+        -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        border-radius: 0.7em 0.7em 0.7em 0.7em;
+        background-color: #F6F6F6;
+        border: 1px solid #E6E6E6;
+        border-collapse: separate;
+        margin-bottom: 2.5em;
+    }
+    pre {
+        font-size: 90%;
+        display: block;
+        overflow:hidden;
+    }
+    thead
+    {
+        margin-top: 0.5em;
+        font-weight: bold
+    }
+    th
+    {
+        padding: 0.5em 1.5em 0.5em 1em;
+        background-color: #E1E1E1;
+        border-left: 1px solid #E6E6E6;
+    }
+    td
+    {
+        padding: 0.25em 1.5em 0.25em 1em;
+    }
+
+    td.rightAlign
+    {
+        padding: 0.25em 0.5em 0.25em 1em;
+    }
+    table tr.odd
+    {
+        border-left: 1px solid #E6E6E6;
+        background-color: #F6F6F6;
+        color: black;
+    }
+    table tr.even
+    {
+        border-left: 1px solid #E6E6E6;
+        background-color: #ffffff;
+        color: #202020;
+    }
+
+    div.float-left
+    {
+        float: left; margin-right: 2em
+    }
+    div.float-right
+    {
+        float: right; margin-left: 2em
+    }
+
+    span.comment
+    {
+        color: #008B00;
+    }
+    span.string, span.char
+    {
+        color: #000084;
+    }
+    span.number
+    {
+        color: #a46200;
+    }
+    span.operator
+    {
+        color: #202020;
+    }
+    span.keyword
+    {
+        color: #840000;
+    }
+    span.name
+    {
+        color: black
+    }
+    span.type
+    {
+        font-weight: bold
+    }
+    span.type a:visited
+    {
+        color: #0F5300;
+    }
+    span.preprocessor
+    {
+        color: #404040
+    }
+/* end basic elements */
+
+/* font style elements */
+    .heading
+    {
+        font-weight: bold;
+        font-size: 125%;
+    }
+    .subtitle
+    {
+        font-size: 110%
+    }
+    .small-subtitle
+    {
+        font-size: 100%
+    }
+    .red
+    {
+        color:red;
+    }
+/* end font style elements */
+
+/* global settings*/
+    .header, .footer
+    {
+        display: block;
+        clear: both;
+        overflow: hidden;
+    }
+/* end global settings*/
+
+/* header elements */
+    .header .qtref
+    {
+        color: #00732F;
+        font-weight: bold;
+        font-size: 130%;
+    }
+
+    .header .content
+    {
+        margin-left: 5px;
+        margin-top: 5px;
+        margin-bottom: 0.5em;
+    }
+
+    .header .breadcrumb
+    {
+        font-size: 90%;
+        padding: 0.5em 0 0.5em 1em;
+        margin: 0;
+        background-color: #fafafa;
+        height: 1.35em;
+        border-bottom: 1px solid #d1d1d1;
+    }
+
+    .header .breadcrumb ul
+    {
+        margin: 0;
+        padding: 0;
+    }
+
+    .header .content
+    {
+        word-wrap: break-word;
+    }
+
+    .header .breadcrumb ul li
+    {
+        float: left;
+        background: url(../images/breadcrumb.png) no-repeat 0 3px;
+        padding-left: 1.5em;
+        margin-left: 1.5em;
+    }
+
+    .header .breadcrumb ul li.last
+    {
+        font-weight: normal;
+    }
+
+    .header .breadcrumb ul li a
+    {
+        color: #00732F;
+    }
+
+    .header .breadcrumb ul li.first
+    {
+        background-image: none;
+        padding-left: 0;
+        margin-left: 0;
+    }
+
+    .header .content ol li {
+        background: none;
+        margin-bottom: 1.0em;
+        margin-left: 1.2em;
+        padding-left: 0
+    }
+
+    .header .content li
+    {
+        background: url(../images/bullet_sq.png) no-repeat 0 5px;
+        margin-bottom: 1em;
+        padding-left: 1.2em;
+    }
+
+/* end header elements */
+
+/* content elements */
+    .content h1
+    {
+        font-weight: bold;
+        font-size: 130%
+    }
+
+    .content h2
+    {
+        font-weight: bold;
+        font-size: 120%;
+        width: 100%;
+    }
+    .content h3
+    {
+        font-weight: bold;
+        font-size: 110%;
+        width: 100%;
+    }
+    .content table p
+    {
+        margin: 0
+    }
+    .content ul
+    {
+        padding-left: 2.5em;
+    }
+    .content li
+    {
+        padding-top: 0.25em;
+        padding-bottom: 0.25em;
+    }
+    .content ul img {
+        vertical-align: middle;
+    }
+
+    .content a:visited
+    {
+        color: #4c0033;
+        text-decoration: none;
+    }
+
+    .content a:visited:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+
+    a:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+    descr p a
+    {
+        text-decoration: underline;
+    }
+
+    .descr p a:visited
+    {
+        text-decoration: underline;
+    }
+
+    .alphaChar{
+        width:95%;
+        background-color:#F6F6F6;
+        border:1px solid #E6E6E6;
+        -moz-border-radius: 7px 7px 7px 7px;
+        border-radius: 7px 7px 7px 7px;
+        -webkit-border-radius: 7px 7px 7px 7px;
+        font-size:12pt;
+        padding-left:10px;
+        margin-top:10px;
+        margin-bottom:10px;
+    }
+    .flowList{
+        /*vertical-align:top;*/
+        /*margin:20px auto;*/
+
+        column-count:3;
+        -webkit-column-count:3;
+        -moz-column-count:3;
+/*
+        column-width:100%;
+        -webkit-column-width:200px;
+        -col-column-width:200px;
+*/
+        column-gap:41px;
+        -webkit-column-gap:41px;
+        -moz-column-gap:41px;
+
+        column-rule: 1px dashed #ccc;
+        -webkit-column-rule: 1px dashed #ccc;
+        -moz-column-rule: 1px dashed #ccc;
+    }
+
+    .flowList dl{
+    }
+    .flowList dd{
+        /*display:inline-block;*/
+        margin-left:10px;
+        min-width:250px;
+        line-height: 1.5;
+        min-width:100%;
+        min-height:15px;
+    }
+
+    .flowList dd a{
+    }
+
+    .mainContent
+    {
+        padding-left:5px;
+    }
+
+    .content .flowList p{
+        padding:0px;
+    }
+
+    .content .alignedsummary
+    {
+        margin: 15px;
+    }
+
+
+    .qmltype
+    {
+        text-align: center;
+        font-size: 120%;
+    }
+    .qmlreadonly
+    {
+        padding-left: 5px;
+        float: right;
+        color: #254117;
+    }
+
+    .qmldefault
+    {
+        padding-left: 5px;
+        float: right;
+        color: red;
+    }
+
+    .qmldoc
+    {
+    }
+
+    .generic .alphaChar{
+        margin-top:5px;
+    }
+
+    .generic .odd .alphaChar{
+        background-color: #F6F6F6;
+    }
+
+    .generic .even .alphaChar{
+        background-color: #FFFFFF;
+    }
+
+    .memItemRight{
+        padding: 0.25em 1.5em 0.25em 0;
+    }
+    .highlightedCode
+    {
+        margin: 1.0em;
+    }
+    .annotated td {
+        padding: 0.25em 0.5em 0.25em 0.5em;
+    }
+
+    .toc
+    {
+        font-size: 80%
+    }
+
+    .header .content .toc ul
+    {
+        padding-left: 0px;
+    }
+
+    .content .toc h3 {
+        border-bottom: 0px;
+        margin-top: 0px;
+    }
+
+    .content .toc h3 a:hover {
+        color: #00732F;
+        text-decoration: none;
+    }
+
+    .content .toc .level2
+    {
+        margin-left: 1.5em;
+    }
+
+    .content .toc .level3
+    {
+        margin-left: 3.0em;
+    }
+
+    .content ul li
+    {
+        background: url(../images/bullet_sq.png) no-repeat 0 0.7em;
+        padding-left: 1em
+    }
+
+    .content .toc li
+    {
+        background: url(../images/bullet_dn.png) no-repeat 0 5px;
+        padding-left: 1em
+    }
+
+    .relpage
+    {
+        -moz-border-radius: 7px 7px 7px 7px;
+        -webkit-border-radius: 7px 7px 7px 7px;
+        border-radius: 7px 7px 7px 7px;
+        border: 1px solid #DDDDDD;
+        padding: 25px 25px;
+        clear: both;
+    }
+    .relpage ul
+    {
+        float: none;
+        padding: 1.5em;
+    }
+
+    h3.fn, span.fn
+    {
+        -moz-border-radius:7px 7px 7px 7px;
+        -webkit-border-radius:7px 7px 7px 7px;
+        border-radius:7px 7px 7px 7px;
+        background-color: #F6F6F6;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #E6E6E6;
+        font-weight: bold;
+        word-spacing:3px;
+        padding:3px 5px;
+    }
+
+    .functionIndex {
+        font-size:12pt;
+        word-spacing:10px;
+        margin-bottom:10px;
+        background-color: #F6F6F6;
+        border-width: 1px;
+        border-style: solid;
+        border-color: #E6E6E6;
+        -moz-border-radius: 7px 7px 7px 7px;
+        -webkit-border-radius: 7px 7px 7px 7px;
+        border-radius: 7px 7px 7px 7px;
+        width:100%;
+    }
+
+    .centerAlign
+    {
+        text-align:center;
+    }
+
+    .rightAlign
+    {
+        text-align:right;
+    }
+
+    .leftAlign
+    {
+        text-align:left;
+    }
+
+    .topAlign{
+        vertical-align:top
+    }
+
+    .functionIndex a{
+        display:inline-block;
+    }
+
+/* end content elements */
+/* footer elements */
+
+    .footer
+    {
+        color: #393735;
+        font-size: 0.75em;
+        text-align: center;
+        padding-top: 1.5em;
+        padding-bottom: 1em;
+        background-color: #E6E7E8;
+        margin: 0;
+    }
+    .footer p
+    {
+        margin: 0.25em
+    }
+    .small
+    {
+        font-size: 0.5em;
+    }
+/* end footer elements */
+
+    .item {
+      float: left;
+      position: relative;
+      width: 100%;
+      overflow: hidden;
+    }
+
+
+    .item .primary {
+      margin-right: 220px;
+      position: relative;
+    }
+
+    .item hr {
+      margin-left: -220px;
+    }
+
+    .item .secondary {
+      float: right;
+      width: 200px;
+      position: relative;
+    }
+
+    .item .cols {
+      clear: both;
+      display: block;
+    }
+
+    .item .cols .col {
+      float: left;
+      margin-left: 1.5%;
+    }
+
+    .item .cols .col.first {
+      margin-left: 0;
+    }
+
+    .item .cols.two .col {
+      width: 45%;
+    }
+
+    .item .box {
+      margin: 0 0 10px 0;
+    }
+
+    .item .box h3 {
+      margin: 0 0 10px 0;
+    }
+
+    .cols.unclear {
+        clear:none;
+    }
+}
+
+/* end of screen media */
+
+/* start of print media */
+
+@media print
+{
+    input, textarea, .header, .footer, .toolbar, .feedback, .wrapper .hd, .wrapper .bd .sidebar, .wrapper .ft, #feedbackBox, #blurpage, .toc, .breadcrumb, .toolbar, .floatingResult
+    {
+        display: none;
+        background: none;
+    }
+    .content
+    {
+        background: none;
+        display: block;
+        width: 100%; margin: 0; float: none;
+    }
+}
+/* end of print media */
+
+
+/* modify the TOC layouts */
+div.toc ul {
+    padding-left: 20px;
+}
+div.toc li {
+    padding-left: 4px;
+}
+/* Remove the border around images*/
+a img
+{
+    border:none;
+}
+
+/*Add styling to the front pages*/
+
+.threecolumn_area
+{
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.threecolumn_piece
+{
+    display: inline-block;
+    margin-left: 78px;
+    margin-top: 8px;
+    padding: 0;
+    vertical-align: top;
+    width: 25.5%;
+}
+div.threecolumn_piece ul {
+    list-style-type: none;
+    padding-left: 0px;
+    margin-top: 2px;
+}
+div.threecolumn_piece p {
+    margin-bottom: 7px;
+    color: #5C626E;
+    text-decoration: none;
+    font-weight: bold;
+}
+div.threecolumn_piece li {
+    padding-left: 0px;
+    margin-bottom: 5px;
+}
+div.threecolumn_piece a {
+    font-weight: normal;
+}
+/* Add style to guide page*/
+.fourcolumn_area
+{
+    padding-top: 20px;
+    padding-bottom: 20px;
+}
+.fourcolumn_piece
+{
+    display: inline-block;
+    margin-left: 35px;
+    margin-top: 8px;
+    padding: 0;
+    vertical-align: top;
+    width: 21.3%;
+}
+div.fourcolumn_piece ul {
+    list-style-type: none;
+    padding-left: 0px;
+    margin-top: 2px;
+}
+div.fourcolumn_piece p {
+    margin-bottom: 7px;
+    color: #40444D;
+    text-decoration: none;
+    font-weight: bold;
+}
+div.fourcolumn_piece li {
+    padding-left: 0px;
+    margin-bottom: 5px;
+}
+div.fourcolumn_piece a {
+    font-weight: normal;
+}
+
+.foundat {
+    font-size: 12px;
+    margin-bottom: 10px;
+    font-style: italic;
+    display: block;
+    color: #AEA79F;
+}
+
+.intro {
+    margin-bottom: 10px;
+}
+
+.intro ul {
+    list-style-type: disc;
+    padding-left: 30px;
+}
+
+.intro ul li{
+    list-style-type: disc;
+}
+
+.params {
+    list-style-type: disc;
+    padding-left: 30px;
+}
+
+.params li{
+    list-style-type: disc;
+    line-height: 22px;
+}
+
+.params ul {
+    list-style-type: circle;
+    padding-left: 30px;
+}
+
+.params ul li{
+    list-style-type: circle;
+}
 \ No newline at end of file
 
=== removed file '0.1/ambiance/js/yuidoc-theme/assets/css/logo.png'
 Binary files 0.1/ambiance/js/yuidoc-theme/assets/css/logo.png	2013-10-17 16:38:17 +0000 and 0.1/ambiance/js/yuidoc-theme/assets/css/logo.png	1970-01-01 00:00:00 +0000 differ
=== added file '0.1/ambiance/js/yuidoc-theme/assets/css/reset.css'
--- 0.1/ambiance/js/yuidoc-theme/assets/css/reset.css	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/js/yuidoc-theme/assets/css/reset.css	2013-11-03 22:06:55 +0000
@@ -0,0 +1,8 @@
+/*
+Copyright (c) 2010, Yahoo! Inc. All rights reserved.
+Code licensed under the BSD License:
+http://developer.yahoo.com/yui/license.html
+version: 3.3.0
+build: 3167
+*/
+html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
 \ No newline at end of file
 
=== added file '0.1/ambiance/js/yuidoc-theme/assets/css/scratch.css'
--- 0.1/ambiance/js/yuidoc-theme/assets/css/scratch.css	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/js/yuidoc-theme/assets/css/scratch.css	2013-11-03 22:06:55 +0000
@@ -0,0 +1,104 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+body {
+	margin: 0;
+}
+div.toc ul {
+	padding: 0;
+}
+div.toc li {
+	margin-bottom: 3px;
+}
+h1.title {
+	font-size: 36px;
+	line-height: 1.1;
+	font-weight: normal;
+}
+h0, h2 {
+	font-size: 24px;
+	line-height: 1.2;
+	margin: 14px 0;
+	font-weight: normal;
+	display: block;
+}
+a:hover {
+	color: #dd4814;
+	text-decoration: underline;
+	outline: 0;
+}
+table, pre {
+	border-radius: 0;
+        white-space: pre-wrap;
+}
+.annotated td {
+	padding: 0.8em 1em 0.3em;
+}
+.wrapper {
+	width: 940px;
+	margin: 0 auto;
+}
+.main-content {
+	width: 668px;
+	position: relative;
+	left: 270px;
+}
+.title {
+	margin-left: -270px;
+	margin-top: 30px;
+	margin-bottom: 50px;
+}
+.toc {
+	margin-left: -270px;
+	font-size: 100%;
+	margin-bottom: 40px;
+    padding: 0;
+    z-index: 2;
+    position: absolute;
+    top: 100px;
+    width: 250px;
+}
+.breadcrumb {
+	position: relative;
+	left: -270px;
+	top: 30px;
+	width: auto;
+	padding-bottom: 30px;
+	margin-bottom: 30px;
+	float:left;
+}
+.breadcrumb li {
+	float: left;
+	margin-right: 8px;
+}
+.breadcrumb a:link,
+.breadcrumb a:visited {
+	color: #AEA79F;
+}
+.breadcrumb a:after {
+	content: '\0000a0\0000a0 >';
+}
+.title {
+	margin-top: 50px;
+	clear:both;
+}
+.breadcrumb + .toc {
+	top: 170px;
+}
+.breadcrumb p {
+    display: inline;
+}
+
 
=== added file '0.1/ambiance/js/yuidoc-theme/assets/js/breadcrumbs.js'
--- 0.1/ambiance/js/yuidoc-theme/assets/js/breadcrumbs.js	1970-01-01 00:00:00 +0000
+++ 0.1/ambiance/js/yuidoc-theme/assets/js/breadcrumbs.js	2013-11-03 22:06:55 +0000
@@ -0,0 +1,21 @@
+/*
+ * Copyright 2013 Canonical Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$(document).ready(function(){
+    var ul = $("ul.breadcrumb");
+    var li = ul.children("li:has(a)").remove();
+    ul.prepend(li);
+});
 
=== removed file '0.1/ambiance/js/yuidoc-theme/assets/js/tabs.js'
--- 0.1/ambiance/js/yuidoc-theme/assets/js/tabs.js	2013-11-01 20:11:24 +0000
+++ 0.1/ambiance/js/yuidoc-theme/assets/js/tabs.js	1970-01-01 00:00:00 +0000
@@ -1,67 +0,0 @@
-/*
- * Copyright 2011 Yahoo! Inc.
- * All rights reserved.
- * 
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *     * Redistributions of source code must retain the above copyright
- *       notice, this list of conditions and the following disclaimer.
- *     * Redistributions in binary form must reproduce the above copyright
- *       notice, this list of conditions and the following disclaimer in the
- *       documentation and/or other materials provided with the distribution.
- *     * Neither the name of the Yahoo! Inc. nor the
- *       names of its contributors may be used to endorse or promote products
- *       derived from this software without specific prior written permission.
- * 
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
- * ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL YAHOO! INC. BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
- * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
- * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-
-
-YUI({
-    insertBefore: 'site_styles'
-}).use('tabview', function(Y) {
-    var classdocs = Y.one('#classdocs'),
-        tabviewIndexTable = {};
-    if (classdocs) {
-        if (classdocs.all('li').size()) {
-            var tabview = new Y.TabView({ srcNode: classdocs });
-            tabview.render();
-			classdocs.all('li a').each(function (item, index) {
-				var hash = item.get(['hash']);
-					type = hash.substring(1);
-				if (!tabviewIndexTable[type]) {
-					tabviewIndexTable[type] = index;
-				}
-			})
-			Y.all('.sidebox.on-page').each(function (item, index) {
-				var children = item.all('li a');
-				children.each(function (cItem, cIndex) {
-					return function () {
-						var handleClick = function (e) {
-							var node      = Y.one(this),
-								hash      = node.get(['hash']),
-								hashValue = hash.substring(1).split('_'),
-								type      = hashValue.shift(),
-								ogKey     = hashValue.join('_'); // in case the hash had other underscores
-							if (tabviewIndexTable[type] > -1 && tabviewIndexTable[type] !== currentTab) {
-								currentTab = tabviewIndexTable[type];
-								tabview.selectChild(tabviewIndexTable[type]);
-							}
-						}
-						Y.on('click', handleClick, cItem)
-					}()
-				})
-			});
-        }
-    }
-});
 
=== modified file '0.1/ambiance/js/yuidoc-theme/layouts/main.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/layouts/main.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/layouts/main.handlebars	2013-11-03 22:06:55 +0000
@@ -1,38 +1,186 @@
-<!DOCTYPE html>
-<html lang="en">
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
-    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <!-- ComposerSheet.qml -->
     <title>{{htmlTitle}}</title>
-    <link rel="stylesheet" href="{{yuiGridsUrl}}">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+    <script type="text/javascript" src="{{projectAssets}}/js/breadcrumbs.js"></script>
+    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:400,400italic" />
+    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu+Mono:400" />
+    <link rel="stylesheet" type="text/css" href="{{projectAssets}}/css/reset.css" />
+    <link rel="stylesheet" type="text/css" href="{{projectAssets}}/css/html5.css" />
+    <link rel="stylesheet" type="text/css" href="{{projectAssets}}/css/base.css" />
+    <link rel="stylesheet" type="text/css" href="{{projectAssets}}/css/scratch.css" />
     <link rel="stylesheet" href="{{projectAssets}}/vendor/prettify/prettify-min.css">
-    <link rel="stylesheet" href="{{projectAssets}}/css/main.css" id="site_styles">
-    <script src="{{yuiSeedUrl}}"></script>
 </head>
-<body class="yui3-skin-sam">
-
-<div id="doc">
-    <div id="hd" class="yui3-g header">
-        <div class="yui3-u-3-4">
-            <h1><a href="{{projectRoot}}index.html"><img src="{{projectAssets}}/css/logo.png">{{title}}</a></h1>
-        </div>
-        <div class="yui3-u-1-4 version">
-            <em>API Docs for: {{projectVersion}}</em>
-        </div>
-    </div>
-    <div class="yui3-g">
-
-        <div id="sidebar" class="yui3-u">
+    <header>
+        <div class="header-login">
+            <ul>
+                <li>
+                    <a href="https://myapps.developer.ubuntu.com/openid/login/?next=/dev">Sign in or register</a>
+                </li>
+            </ul>
+        </div>
+        <div class="header-navigation">
+            <div>
+                <nav role="navigation">
+                    <ul>
+                        <li class="page_item page-item-5">
+                            <a href="http://developer.ubuntu.com/">Home</a>
+                        </li>
+                        <li class="page_item page-item-7">
+                            <a href="http://developer.ubuntu.com/get-started/">Get started</a>
+                        </li>
+                        <li class="page_item page-item-9">
+                            <a href="http://developer.ubuntu.com/resources/">Resources</a>
+                        </li>
+                        <li class="page_item page-item-11">
+                            <a href="http://developer.ubuntu.com/publish/">Publish</a>
+                        </li>
+                        <li class="page_item page-item-13">
+                            <a href="http://developer.ubuntu.com/community/">Community</a>
+                        </li>
+                        <li>
+                            <a href="https://myapps.developer.ubuntu.com/dev">My Apps</a>
+                        </li>
+                        <li>
+                            <form id="form-search" method="get" action="/">
+                                <fieldset>
+                                    <input id="input-search" type="text" name="s" value="Search" />
+                                </fieldset>
+                            </form>
+                        </li>
+                    </ul>
+                </nav>
+                <a class="logo-ubuntu" href="/">
+                    <img src="http://developer.ubuntu.com/wp-content/themes/wordpress-theme-ubuntudeveloper/img/logo-ubuntu.png" width="119" height="27" alt="Ubuntu logo" />
+                </a>
+                <h2>
+                    <a href="/">App Developer</a>
+                </h2>
+            </div>
+        </div>
+
+    </header>
+    <div class="wrapper">
+        <div class="main-content">
+            <ul class="breadcrumb">
+                <li><a href="index.html">Ubuntu HTML5 API</a></li>
+                <li>{{moduleName}}</li>
+            </ul>
             {{>sidebar}}
-        </div>
-
-        <div id="main" class="yui3-u">
-            <div class="content">{{>layout_content}}</div>
+            {{#if moduleName}}
+                <h1 class="title">{{moduleName}}</h1>
+            {{else}}
+                <h1 class="title">Ubuntu HTML5 API</h1>
+            {{/if}}
+            {{>layout_content}}
         </div>
     </div>
-</div>
-<script src="{{projectAssets}}/vendor/prettify/prettify-min.js"></script>
-<script>prettyPrint();</script>
-<script src="{{projectAssets}}/js/yui-prettify.js"></script>
-<script src="{{projectAssets}}/js/tabs.js"></script>
+    <div class="shadow"></div>
+    <footer>
+        <div>
+            <nav role="navigation" class="clearfix">
+                <ul>
+                    <li>
+                        <a href="/get-started">Get started</a>
+                    </li>
+                    <li class="page_item page-item-16">
+                        <a href="http://developer.ubuntu.com/get-started/quickly-workflow/">Quickly workflow</a>
+                    </li>
+                    <li class="page_item page-item-18">
+                        <a href="http://developer.ubuntu.com/get-started/qt-creator/">Qt Creator</a>
+                    </li>
+                    <li class="page_item page-item-20">
+                        <a href="http://developer.ubuntu.com/get-started/eclipse/">Eclipse</a>
+                    </li>
+                    <li class="page_item page-item-22">
+                        <a href="http://developer.ubuntu.com/get-started/monodevelop/">MonoDevelop</a>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <a href="/resources">Resources</a>
+                    </li>
+                    <li>
+                        <a href="/resources/tools/quickly">Quickly</a>
+                    </li>
+                    <li>
+                        <a href="/resources/platform/api">API</a>
+                    </li>
+                    <li>
+                        <a href="/resources/platform/documentation/platform-diagram">Platform overview</a>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <a href="/publish">Publish</a>
+                    </li>
+                    <li class="page_item page-item-24">
+                        <a href="http://developer.ubuntu.com/publish/commercial-software-faqs/">Commercial software FAQs</a>
+                    </li>
+                    <li class="page_item page-item-34">
+                        <a href="http://developer.ubuntu.com/publish/application-states/">Application states</a>
+                    </li>
+                    <li class="page_item page-item-577">
+                        <a href="http://developer.ubuntu.com/publish/my-apps-packages/">Uploading your app</a>
+                    </li>
+                    <li class="page_item page-item-404">
+                        <a href="http://developer.ubuntu.com/publish/ubuntu-software-centre/">Ubuntu Software Centre</a>
+                    </li>
+                    <li class="page_item page-item-427">
+                        <a href="http://developer.ubuntu.com/publish/licence-key-infrastructure/">Licence key infrastructure</a>
+                    </li>
+                    <li class="page_item page-item-1230">
+                        <a href="http://developer.ubuntu.com/publish/updating-your-app/">Updating your app</a>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <a href="/community">Community</a>
+                    </li>
+                    <li class="page_item page-item-28">
+                        <a href="http://developer.ubuntu.com/community/app-developer-blog/">App Developer Blog</a>
+                    </li>
+                    <li class="page_item page-item-30">
+                        <a href="http://developer.ubuntu.com/community/submit-a-tutorial/">Submit a tutorial</a>
+                    </li>
+                    <li class="page_item page-item-32">
+                        <a href="http://developer.ubuntu.com/community/app-review-board-charter/">App Review Board charter</a>
+                    </li>
+                    <li class="page_item page-item-2987">
+                        <a href="http://developer.ubuntu.com/community/on-air/">On air</a>
+                        <ul class='children'>
+                            <li class="page_item page-item-3066">
+                                <a href="http://developer.ubuntu.com/community/on-air/recordings/">Recordings</a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+                <ul class="last">
+                    <li>
+                        <a href="https://myapps.developer.ubuntu.com/dev">My Apps</a>
+                    </li>
+                    <li>
+                        <a href="https://myapps.developer.ubuntu.com/openid/login/?next=/dev">Sign in or register</a>
+                    </li>
+                    <li>
+                        <a href="https://myapps.developer.ubuntu.com/dev/account">My account</a>
+                    </li>
+                </ul>
+            </nav>
+            <p>
+                &copy; 2013 Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.
+                <a class="link-bug" href="https://bugs.launchpad.net/ubuntudeveloperportal/+filebug">Report a bug on this site</a>
+            </p>
+        </div>
+    </footer>
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
+    <script type="text/javascript" src="http://developer.ubuntu.com/wp-content/themes/wordpress-theme-ubuntudeveloper/js/base.js"></script>
+    <script src="{{projectAssets}}/vendor/prettify/prettify-min.js"></script>
+    <script>prettyPrint();</script>
+    <script src="{{projectAssets}}/js/yui-prettify.js"></script>
 </body>
 </html>
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/attrs.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/attrs.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/attrs.handlebars	2013-11-03 22:06:55 +0000
@@ -20,4 +20,4 @@
         </ul>
     </div>
     {{/if}}
-</div>
+</div>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/classes.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/classes.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/classes.handlebars	2013-11-03 22:06:55 +0000
@@ -1,4 +1,4 @@
-<h4>Class {{moduleName}}</h4>
+<h2>Class {{moduleName}}</h2>
 {{#if uses}}
     Uses:
     {{#each uses}}
@@ -26,23 +26,9 @@
 {{/if}}
 
 <div id="classdocs">
-    <ul>
-        {{#if methods}}
-        <li><a href="#methods">Methods</a></li>
-        {{/if}}
-        {{#if properties}}
-        <li><a href="#props">Properties</a></li>
-        {{/if}}
-        {{#if attrs}}
-        <li><a href="#attrs">Attributes</a></li>
-        {{/if}}
-        {{#if events}}
-        <li><a href="#events">Events</a></li>
-        {{/if}}
-    </ul>
-    <div>
         {{#if methods}}
             <div id="methods">
+            <h2>Methods</h2>
             {{#methods}}
                 {{>method}}
             {{/methods}}
@@ -50,6 +36,7 @@
         {{/if}}
         {{#if properties}}
             <div id="props">
+            <h2>Properties</h2>
             {{#properties}}
                 {{>props}}
             {{/properties}}
@@ -57,6 +44,7 @@
         {{/if}}
         {{#if attrs}}
             <div id="attrs">
+            <h2>Attributes</h2>
             {{#attrs}}
                 {{>attrs}}
             {{/attrs}}
@@ -64,10 +52,11 @@
         {{/if}}
         {{#if events}}
             <div id="events">
+            <h2>Events</h2>
             {{#events}}
                 {{>events}}
             {{/events}}
             </div>
         {{/if}}
     </div>
-</div>
+</div>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/events.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/events.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/events.handlebars	2013-11-03 22:06:55 +0000
@@ -31,5 +31,4 @@
     {{/params}}
     </ul>
     {{/if}}
-</div>
-
+</div>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/files.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/files.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/files.handlebars	2013-11-03 22:06:55 +0000
@@ -2,5 +2,4 @@
 
 <pre class="code prettyprint linenums">
 {{fileData}}
-</pre>
-
+</pre>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/index.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/index.handlebars	2013-10-31 21:09:16 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/index.handlebars	2013-11-03 22:06:55 +0000
@@ -1,43 +1,41 @@
-<h4>Welcome to Ubuntu HTML5 API Docs version 0.1</h4>
-
 <p>These pages provide reference docs for the Ubunbtu HTML5 framework.</p>
 
 <p>See <a href="http://developer.ubuntu.com">developer.ubuntu.com</a> for more information on writing Ubuntu HTML5 apps, including: using the Ubuntu SDK, creating HTML5 app projects, importing Ubuntu HTML5 CSS and JavaScript into your app, and more. </p>
 
-<h4>Ubuntu HTML5 widgets</h4>
+<h2>Ubuntu HTML5 widgets</h2>
 
 <p>The Ubuntun HTML5 framework provides a set of "widgets" you use to build an application in the Ubuntu style (see <a href="design.ubuntu.com">design.ubuntu.com</a> for descriptions of Ubuntu app "building blocks" with links to APIs for each supported implementation toolkit). For example, an Ubuntu HTML5 app has a dynamic Header with Tabs that together provide navigation through the app's Pages. Pages may contain Lists, Popovers, Buttons, Shapes, and a lot more. The app has a Footer (also called a Toolbar) to which you can add Buttons. There are many options and the list keeps growing!<p>
 <p>Each widget has its HTML part, a corresponding JavaScript object (many of which provide additional methods), and CSS styles.</p>
 
-<h4>What you need to know</h4>
+<h2>What you need to know</h2>
 
 <p>To write Ubuntu HTML5 apps, you need to know:</p>
 
-<ul>
+<ol>
   <li>How to <em>declare</em> each widget type in HTML</li>
   <li>How to acces the JavaScript widget objects and use their methods</li>
   <li>How to initialize the Ubuntu HTML5 framework at app load time</li>
-</ul>
+</ol>
 
 <p>These topics are introduced here and explained in the class documentation.</p>
 
-<h4>Elements and special attributes</h4>
+<h2>Elements and special attributes</h2>
 
 <p>Ubuntu HTML5 apps use normal HTML/HTML5 elements (like &lt;div&gt;, &lt;section&gt;, &lt;ul&gt;, and so on). However, special attributes are added to some key elements to declare them as Ubuntu HTML5 elements. This connects them with the Ubuntu HTML5 JavaScript framework. The <em>data-role</em> attribute is often used. Its value indicates the type of Ubuntu HTML5 element. For example, here's a button: &lt;div data-role="button"&gt;.</p>
 
 </p>Making correct HTML declarations is necessary to connect your DOM elements to the Ubuntu HTML5 JavaScript framework and to Ubuntu HTML CSS styles. See the JavaScript class docs for sample HTML declarations.</p>
 
-<h4><em>id</em> attributes</h4>
+<h2><em>id</em> attributes</h2>
 
 <p>You can declare most Ubuntu HTML5 elements without <em>id</em> attributes. They will pick up the CSS styles and look fine. But, you generally need an <em>id</em> attribute to access the corresponding JavaScript objects. So it's a good idea to add them.</p>
 
-<h4>JavaScript classes and methods</h4>
+<h2>JavaScript classes and methods</h2>
 
 <p>Almost every Ubuntu HTML5 DOM element has a corresponding Ubuntu HTML5 JavaScript object. These are created automatically when you create an UbuntuUI object and execute its init() method. (This is usually done at startup, for example in the <em>window.onload</em> function).</p>
 
 <p>Many of these classes/objects have additional methods. For example, the List class provides methods to add items to the list, remove an item, apply a function to all items, and more.</p>
 
-<h4>How these docs are organized</h4>
+<h2>How these docs are organized</h2>
 
 <p>These pages or organized by the Ubuntu HTML5 JavaScript classes. Each class has an example showing how the corresponding HTML is declared (as needed). And of course each class has API documentation explaining usage of all (public) methods.</p>
 
@@ -45,10 +43,10 @@
 
 <p>Then, an Ubuntu HTML5 app is structured as a PageStack of Pages, so be sure to visit those classes.</p>
 
-<h4>Ubuntu HTML5 CSS</h4>
+<h2>Ubuntu HTML5 CSS</h2>
 
 <p>Be sure to check out the Ubuntu HTML5 CSS files you import into your app. They provide a set of styles that theme the HTML5 widgets to the Ubuntu app design and style.</p>
 
-<h4>Let's grow this!</h4>
+<h2>Let's grow this!</h2>
 
-<p>Let's work together to keep HTML5 as a top-notch app development framework on Ubuntu. Everyone can help by filing bugs, triaging them, and of course, fixing them. So let's get to work writing apps!</p>
+<p>Let's work together to keep HTML5 as a top-notch app development framework on Ubuntu. Everyone can help by filing bugs, triaging them, and of course, fixing them. So let's get to work writing apps!</p>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/method.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/method.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/method.handlebars	2013-11-03 22:06:55 +0000
@@ -1,18 +1,26 @@
 <a name="methods_{{name}}"></a>
-<div class="method item{{#if access}} {{access}}{{/if}}">
-    {{#if final}}<code>final</code> {{/if}}{{#if returnType}}{{#crossLink returnType}}{{/crossLink}} {{/if}}<strong class="name">`{{name}}`</strong>( `{{paramsList}} ` ) {{#if access}}<em>`/* {{access}} method */`</em>{{/if}}
-    <br>
+
+<div class="method {{#if access}} {{access}}{{/if}}">
+    {{#if final}}
+        <code>final</code>
+    {{/if}}
+    {{#if returnType}}{{#crossLink returnType}}{{/crossLink}} {{/if}}
+
+    <h3>`{{name}}` ( `{{paramsList}} ` ) {{#if access}}<em>`/* {{access}} method */`</em>{{/if}}</h3>
+
     <span class="foundat">
     {{#if overwritten_from}}
-        Defined in <a href="{{overwritten_from/class}}.html#method_{{overwritten_from/name}}">{{overwritten_from/class}}</a> but overwritten locally: 
+        Defined in <a href="{{overwritten_from/class}}.html#method_{{overwritten_from/name}}">{{overwritten_from/class}}</a> but overwritten locally:
     {{else}}
         {{#if extended_from}} Defined in <a href="{{extended_from}}.html#method_{{name}}">{{extended_from}}</a>: {{/if}}
     {{/if}}
         <a href="../{{foundAt}}">`{{file}}:{{line}}`</a>
-    </span><br>
+    </span>
+
     {{{methodDescription}}}
+
     {{#if params}}
-    <strong>Parameters:</strong>
+    <h3>Parameters</h3>
     <ul class="params">
     {{#params}}
         <li>
@@ -46,11 +54,14 @@
     {{/if}}
     {{#if return}}
     {{#return}}
-    <br><div class="returns"><strong>Returns:</strong> {{#if type}}&lt;{{#crossLink type}}{{/crossLink}}&gt; {{/if}}{{{description}}}</div>
+    <br /><div class="returns"><strong>Returns:</strong> {{#if type}}&lt;{{#crossLink type}}{{/crossLink}}&gt; {{/if}}{{{description}}}</div>
     {{/return}}
     {{/if}}
+
+    <br />
     {{#if example}}
-        <h5>Example</h5>
+        <h3>Example</h3>
         {{{example}}}
     {{/if}}
-</div>
+
+</div>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/module.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/module.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/module.handlebars	2013-11-03 22:06:55 +0000
@@ -1,4 +1,3 @@
-
 <h2>{{moduleName}}</h2>
 <div class="intro">{{{moduleDescription}}}</div>
 
@@ -25,4 +24,4 @@
     </div>
 </div>
 <br><br>
-<span class="foundat">Module description found: <a href="../{{foundAt}}">`{{file}}:{{line}}`</a></span>
+<span class="foundat">Module description found: <a href="../{{foundAt}}">`{{file}}:{{line}}`</a></span>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/props.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/props.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/props.handlebars	2013-11-03 22:06:55 +0000
@@ -7,4 +7,4 @@
         <h5>Example</h5>
         {{{example}}}
     {{/if}}
-</div>
+</div>
 \ No newline at end of file
 
=== modified file '0.1/ambiance/js/yuidoc-theme/partials/sidebar.handlebars'
--- 0.1/ambiance/js/yuidoc-theme/partials/sidebar.handlebars	2013-10-17 16:34:23 +0000
+++ 0.1/ambiance/js/yuidoc-theme/partials/sidebar.handlebars	2013-11-03 22:06:55 +0000
@@ -1,105 +1,79 @@
-<div id="modules" class="sidebox">
-    <div class="hd">
-        <h2 class="no-toc">Modules</h2>
-    </div>
-    <div class="bd">
-        <ul>
-            {{#modules}}
-                <li><a href="{{../projectRoot}}modules/{{name}}.html">{{displayName}}</a>
-                {{#if submodules}}
-                    <ul>
-                        {{#submodules}}
-                            <li><a href="{{../../../projectRoot}}modules/{{../name}}.html#{{displayName}}">{{displayName}}</a></li>
-                        {{/submodules}}
-                    </ul>
-                {{/if}}
+<div class="toc">
+    <h3 class="no-toc">Modules</h3>
+    <ul>
+        {{#modules}}
+        <li>
+            <a href="{{../projectRoot}}modules/{{name}}.html">{{displayName}}</a>
+            {{#if submodules}}
+            <ul>
+                {{#submodules}}
+                <li>
+                    <a href="{{../../../projectRoot}}modules/{{../name}}.html#{{displayName}}">{{displayName}}</a>
                 </li>
-            {{/modules}}
-        </ul>
-    </div>
-</div>
-
-<div id="classes" class="sidebox">
-    <div class="hd">
-        <h2 class="no-toc">Classes</h2>
-    </div>
-    <div class="bd">
-        <ul>
-            {{#classes}}
-                <li><a href="{{../projectRoot}}classes/{{name}}.html">{{displayName}}</a></li>
-            {{/classes}}
-        </ul>
-    </div>
-</div>
-
-{{#if methods}}
-<div id="methods-on-page" class="sidebox on-page">
-    <div class="hd">
-        <h2 class="no-toc">Methods On Page</h2>
-    </div>
-    <div class="bd">
-        <ul>
-            {{#methods}}
-                <li><a href="#methods_{{name}}">{{name}}</a></li>
-            {{/methods}}
-        </ul>
-    </div>
-</div>
-{{/if}}
-
-{{#if events}}
-<div id="events-on-page" class="sidebox on-page">
-    <div class="hd">
-        <h2 class="no-toc">Events On Page</h2>
-    </div>
-    <div class="bd">
-        <ul>
-            {{#events}}
-                <li><a href="#events_{{name}}">{{name}}</a></li>
-            {{/events}}
-        </ul>
-    </div>
-</div>
-{{/if}}
-
-{{#if props}}
-<div id="props-on-page" class="sidebox">
-    <div class="hd">
-        <h2 class="no-toc">Props On Page</h2>
-    </div>
-    <div class="bd">
-        <ul>
-            {{#events}}
-                <li><a href="#props_{{name}}">{{name}}</a></li>
-            {{/events}}
-        </ul>
-    </div>
-</div>
-{{/if}}
-
-{{#if attributes}}
-<div id="attrs-on-page" class="sidebox on-page">
-    <div class="hd">
-        <h2 class="no-toc">Attributes On Page</h2>
-    </div>
-    <div class="bd">
-        <ul>
-            {{#events}}
-                <li><a href="#attrs_{{name}}">{{name}}</a></li>
-            {{/events}}
-        </ul>
-    </div>
-</div>
-{{/if}}
-
-{{#if fileTree}}
-<div id="fileTree" class="sidebox">
-    <div class="hd">
-        <h2 class="no-toc">Files</h2>
-    </div>
-    <div class="bd">
-        {{#buildFileTree fileTree}}{{/buildFileTree}}
-    </div>
-</div>
-{{/if}}
-
+                {{/submodules}}
+            </ul>
+            {{/if}}
+        </li>
+        {{/modules}}
+    </ul>
+    <br>
+
+    <h3 class="no-toc">Classes</h3>
+    <ul>
+        {{#classes}}
+        <li>
+            <a href="{{../projectRoot}}classes/{{name}}.html">{{displayName}}</a>
+        </li>
+        {{/classes}}
+    </ul>
+    <br>
+
+    {{#if methods}}
+    <h3 class="no-toc">Methods</h3>
+    <ul>
+        {{#methods}}
+        <li>
+            <a href="#methods_{{name}}">{{name}}</a>
+        </li>
+        {{/methods}}
+    </ul>
+    <br>
+    {{/if}}
+
+
+    {{#if events}}
+    <h3 class="no-toc">Events On Page</h3>
+    <ul>
+        {{#events}}
+        <li>
+            <a href="#events_{{name}}">{{name}}</a>
+        </li>
+        {{/events}}
+    </ul>
+    <br>
+    {{/if}}
+
+    {{#if props}}
+    <h3 class="no-toc">Props On Page</h3>
+    <ul>
+        {{#events}}
+        <li>
+            <a href="#props_{{name}}">{{name}}</a>
+        </li>
+        {{/events}}
+    </ul>
+    <br>
+    {{/if}}
+
+    {{#if attributes}}
+    <h3 class="no-toc">Attributes On Page</h3>
+    <ul>
+        {{#events}}
+        <li>
+            <a href="#attrs_{{name}}">{{name}}</a>
+        </li>
+        {{/events}}
+    </ul>
+    <br>
+    {{/if}}
+</div>
 \ No newline at end of file
 
=== modified file 'package.json'
--- package.json	2013-06-18 23:18:49 +0000
+++ package.json	2013-11-03 22:06:55 +0000
@@ -9,6 +9,7 @@
     "grunt-contrib-uglify": "~0.1.1",
     "grunt-contrib-cssmin": "~0.4.1",
     "grunt-contrib-jshint": "~0.1.0",
-    "grunt-contrib-compress": "~0.3.3"
+    "grunt-contrib-compress": "~0.3.3",
+    "yuidocjs": "~0.3.46"
   }
 }