working demo

demo/demo.html

@@ -5,7 +5,9 @@
 <title>jComponent Demo</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
-<script src="https://github.com/jphaas/jComponent/raw/master/jComponent.0.1.js"></script>
+<script src="../jComponent.0.1.js"></script>
+<link rel="stylesheet" type="text/css" href="jCom_theme_default.css" />
+
 <script language="javascript">
 
 //our list of kittens
@@ -19,9 +21,9 @@
 }
 
 //the body of the webpage
-j.Root(j.Layout({width: "960px", chunks: 13, gap: "15px"}, 
-    j.Column({span: 5},
-        j.ContentBox({"class": "bordered"},
+j.Root(j.Layout({width: 960, chunks: 13, gap: 50}, 
+    j.Column({span: 8},
+        j.ContentBox(
             j.H2("About This Page"),
             j.P("This is a demonstration of jComponent.  Instead of HTML combined with " + 
             "javascript, this page is pure javascript, laid out in a declarative " +
@@ -33,23 +35,25 @@
             j.P("As well as demonstrating jComponent, this page is meant to be useful for " +
             "anyone who needs help keeping track of their kittens")
         ),
-        j.H2("Add New Kitten"),
-        j.Form({action: newItem},
-            j.Line("Name: ", j.Input({name: "name"})),
-            j.Line("Description:"),
-            j.Line(j.Input({name: "desc", type: "textarea"})),
-            j.Line("Sex: ", j.Input({name: "sex", type: "dropdown", choices: ["Male", "Female"]})),
-            j.Line(j.Submit("I BOUGHT A KITTEN!!!"))
-        )
+        j.Img({src: "http://placekitten.com/300/200"})
     ),
 
-    j.Column({span: 8},
+    j.Column({span: 5},
+        j.H2("Add New Kitten"),
+        j.Form({action: newKitten},
+            j.P("Name: ", j.Input({name: "name"})),
+            j.P(
+                j.Line("Description:"),
+                j.Line(j.Input({name: "desc", type: "textarea"}))
+            ),
+            j.P("Sex: ", j.Input({name: "sex", type: "dropdown", choices: ["Male", "Female"]})),
+            j.P(j.Submit("I BOUGHT A KITTEN!!!"))
+        ),
         j.H2("My Kittens"),
-        j.Img({href: "http://placekitten.com/300/200"}),
-        j.Set({bind: kitten}, 
-            j.H3(j.Ref("name"), " ", j.RemoveButton("(x)")),
+        j.Set({bind: kittens}, j.P(
+            j.Line(j.Ref("name"), " ", j.RemoveButton("(x)")),
             j.Line(j.Ref("sex"), ': ', j.Ref("desc"))
-        )
+        ))
     )
 ));
 

demo/jCom_theme_default.css

@@ -0,0 +1,92 @@
+/* Start with Eric Meyer's css reset: */
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+
+/* Then, customize the various elements */
+
+body>.j_layout {
+    margin-top: 20px;
+}
+
+body {
+    font-size: 16px;
+    line-height: 1.5em;
+    font-family: Arial, Verdana, sans-serif;
+}
+p {
+    margin-top: 1.5em;
+    margin-bottom: 1.5em;
+}
+h1 {
+    font-size: 24px;
+    line-height: 1em;
+    margin-bottom: 1em;
+    margin-top: 1em;
+}
+h2 {
+    font-size: 20px;
+    margin-top: 1.2em;
+    margin-bottom: 1.2em; 
+    line-height: 1.2em;
+}
+h3 {
+    font-size: 18px;
+    margin-top: 1.33333333em;
+    margin-bottom: 1.33333333em; 
+    line-height: 1.33333333em;
+}
+textarea {
+    height: 72px;
+}
+
+.j_remove-button {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+}