Add a number of examples of Twitter Bootstrap

assets/js/ex7.coffee

@@ -0,0 +1,28 @@
+jQuery ($) ->
+  tabs = $("ul.nav.nav-tabs")
+  tabContent = $(".tab-content")
+
+  _.each ["Moe Howard", "Larry Fine", "Curly Howard"],
+    (name, index) ->
+      firstName = name.split(' ')[0]
+      uid = _.uniqueId "tab"
+
+      tab = $("""
+        <li>
+          <a href="##{uid}" data-toggle="tab">
+            #{firstName}
+          </a>
+        </li>
+      """)
+      content = $("""
+        <div class="tab-pane fade" id="#{uid}">
+          <h1>#{name}</h1>
+          <img src="images/#{firstName.toLowerCase()}.jpg">
+        </div>
+      """)
+
+      content.appendTo tabContent
+      tab.appendTo(tabs)
+
+  tabs.find("li:first").addClass "active"
+  tabContent.find(".tab-pane:first").addClass "active in"

views/ex-layout.jade

@@ -0,0 +1,11 @@
+!!! 5
+html
+  head
+    title Bootstrap Example
+    != css("/bootstrap/css/bootstrap")
+    != js("jquery-1.7.1")
+    != js("/bootstrap/js/bootstrap")
+    != js("underscore")
+    block head
+  body
+    block body

views/ex1.jade

@@ -0,0 +1,16 @@
+extends ex-layout
+block head
+  style
+    .span1, .span2, .span3, .span4, .span5,
+      .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
+       background: #7EA2E6; 
+    }
+block body
+  .container
+    .row
+      .span2 Span 2
+      .span8 Span 8
+      .span2 Span 2
+    .row
+      .span6.offset1 Span 6 / Offset 1
+      .span5 Span 5

views/ex2.jade

@@ -0,0 +1,14 @@
+extends ex-layout
+block head
+  style
+      .span8 { background: #7EA2E6; }
+      .span4 { background: #8AE67E; }
+block body
+  .container
+    .row
+      .span2 Span 2
+      .span8 Span 8 - Level 1
+        .row
+          .span4 Span 4 - Level 2
+          .span4 Span 4 - Level 2
+      .span2 Span 2

views/ex3.jade

@@ -0,0 +1,14 @@
+extends ex-layout
+block head
+  style
+      .span8 { background: #7EA2E6; }
+      .span6{ background: #8AE67E; }
+block body
+  .container-fluid
+    .row-fluid
+      .span2 Span 2
+      .span8 Span 8 - Level 1
+        .row-fluid
+          .span6 Span 6 - Level 2
+          .span6 Span 6 - Level 2
+      .span2 Span 2

views/ex4.jade

@@ -0,0 +1,17 @@
+extends ex-layout
+block body
+  .container
+    table.span12.table.table-bordered.table-condensed.table-striped
+      caption
+        | Table with class "table table-bordered
+        | table-condensed table-striped"
+      thead:tr
+        th.span8 Column A
+        th Column B
+        th.span2 Column C
+      tbody
+        each row in [1, 2, 3, 4]
+          tr
+            each cell in ["A", "B", "C"]
+              td Cell #{row}-#{cell}
+

views/ex5.jade

@@ -0,0 +1,15 @@
+extends ex-layout
+block body
+  .container
+    table.table.table-bordered.span6
+      thead:tr
+        th.span3 CSS Class
+        th
+      tbody
+        tr
+          td.span3 btn btn-primary
+          td: button.btn.btn-primary Primary
+        each cl in ["btn-large", "btn-small", "btn-mini", "disabled"]
+          tr
+            td btn btn-primary #{cl}
+            td: button(class="btn btn-primary #{cl}") Primary

views/ex6.jade

@@ -0,0 +1,17 @@
+extend ex-layout
+block body
+  .container
+    ul.nav.nav-tabs
+      li.active: a(href="#moe", data-toggle="tab") Moe
+      li: a(href="#larry", data-toggle="tab") Larry
+      li: a(href="#curly", data-toggle="tab") Curly
+    .tab-content
+      .tab-pane.active#moe
+        h1 Moe Howard
+        img(src="images/moe.jpg")
+      .tab-pane#larry
+        h1 Larry Fine
+        img(src="images/larry.jpg")
+      .tab-pane#curly
+        h1 Curly Howard
+        img(src="images/curly.jpg")

views/ex7.jade

@@ -0,0 +1,6 @@
+extend ex-layout
+block body
+  .container
+    ul.nav.nav-tabs
+    .tab-content
+  != js("ex7")