underoos 1.0.0

data/app/views/underoos/styleguides/components/_accordions.haml

@@ -0,0 +1,83 @@
+
+.sg-subsection
+  %h3.sg-subheading Accordions <span>accordions.sass</span>
+  %p(style="width:67%;") The accordion navigation system requires <a href="http://twitter.github.com/bootstrap/javascript.html#collapse">Bootstrap's Collapse plugin</a>. They're used typically in navigation systems to toggle and reveal sections of content.
+  %br
+  %p(style="width:67%;") Accordions support multiple open sections or just single sections based on the <code>data</code> attributes set within the links.
+
+.sg-subsection
+  %nav
+    %ul#accordion_example
+      %li.accordion-group
+        %a.accordion-toggle(href="#collapse_1" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 1
+        %section.collapse#collapse_1
+          %article.accordion-inner
+            %p=@lorem
+      %li.accordion-group
+        %a.accordion-toggle(href="#collapse_2" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 2
+        %section.collapse#collapse_2
+          %article.accordion-inner
+            %p=@lorem
+      %li.accordion-group
+        %a.accordion-toggle(href="#collapse_3" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 3
+        %section.collapse#collapse_3
+          %article.accordion-inner
+            %p=@lorem
+
+
+.sg-subsection
+  %pre.prettyprint.html
+    = preserve do
+      :escaped
+        <nav>
+          <ul id="accordion_example">
+            <li class="accordion-group">
+              <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_1">Accordion Group 1</a>
+              <section class="collapse" id="collapse_1"">
+                <article class="accordion-inner">
+                  <p>...</p>
+                </article>
+              </section>
+            </li>
+            <li class="accordion-group">
+              <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_2">Accordion Group 2</a>
+              <section class="collapse" id="collapse_2"">
+                <article class="accordion-inner">
+                  <p>...</p>
+                </article>
+              </section>
+            </li>
+            <li class="accordion-group">
+              <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_3">Accordion Group 3</a>
+              <section class="collapse" id="collapse_3"">
+                <article class="accordion-inner">
+                  <p>...</p>
+                </article>
+              </section>
+            </li>
+          </ul>
+        </nav>
+  %pre.prettyprint.haml.hidden
+    = preserve do
+      :escaped
+        %nav
+          %ul#accordion_example
+            %li.accordion-group
+              %a.accordion-toggle(href="#collapse_1" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 1
+              %section.collapse#collapse_1
+                %article.accordion-inner
+                  %p ...
+            %li.accordion-group
+              %a.accordion-toggle(href="#collapse_2" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 2
+              %section.collapse#collapse_2
+                %article.accordion-inner
+                  %p ...
+            %li.accordion-group
+              %a.accordion-toggle(href="#collapse_3" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 3
+              %section.collapse#collapse_3
+                %article.accordion-inner
+                  %p ...
+
+  .notification.important.fade.in
+    %p <strong>Note!</strong> Remove the <code>data-parent</code> attribute from the links to have multiple sections open at the same time
+

data/app/views/underoos/styleguides/components/_breadcrumbs.haml

@@ -0,0 +1,42 @@
+
+.sg-subsection
+  %h3.sg-subheading Breadcrumbs <span>breadcrumbs.sass</span>
+  .sg-onethird.pull
+    %p Apply the <code>.breadcrumb</code> class to the <code>ol</code> or <code>ul</code> element to provide linkable references to nested sections within the application.
+  .sg-twothird.push
+    .well
+      %nav
+        %ol.nav.breadcrumb
+          %li
+            %a(href="#") Level 1
+          %li
+            %a(href="#") Level 2
+          %li
+            %a(href="#") Level 3
+          %li.active
+            %a(href="#") Active Level
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ol class="nav breadcrumb">
+              <li><a href="#">Level 1</a></li>
+              <li><a href="#">Level 2</a></li>
+              <li><a href="#">Level 3</a></li>
+              <li class="active"><a href="#">Active</a></li>
+            </ol>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ol.nav.breadcrumb
+              %li
+                %a(href="#") Level 1
+              %li
+                %a(href="#") Level 2
+              %li
+                %a(href="#") Level 3
+              %li.active
+                %a(href="#") Active
+

data/app/views/underoos/styleguides/components/_button-groups.haml

@@ -0,0 +1,162 @@
+
+.sg-subsection
+  %h3.sg-subheading Button Groups <span>button-groups.sass</span>
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Button group
+    %p Button groups are used to join multiple buttons together as one composite component.
+  .sg-twothird.push
+    .well
+      %nav.button-group(data-toggle="buttons-checkbox")
+        %a.btn.primary(href="#") Left
+        %a.btn.primary.active(href="#") Middle 1
+        %a.btn.primary(href="#") Middle 2
+        %a.btn.primary(href="#") Right
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav class="button-group">
+            <a class="btn" href="#">Left</a>
+            <a class="btn active" href="#">Middle 1</a>
+            <a class="btn" href="#">Middle 2</a>
+            <a class="btn" href="#">Right</a>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav.button-group
+            %a.btn(href="#") Left
+            %a.btn.active(href="#") Middle 1
+            %a.btn(href="#") Middle 2
+            %a.btn(href="#") Right
+
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Button toolbar
+    %p Combine multiple <code>.button-group</code> elements under a <code>.button-toolbar</code> container to form navigation system.
+  .sg-twothird.push
+    .well
+      %section.button-toolbar
+        %nav.button-group
+          %a.btn(href="#") 1
+          %a.btn(href="#") 2
+          %a.btn(href="#") 3
+        %nav.button-group
+          %a.btn(href="#") 4
+          %a.btn.active(href="#") 5
+          %a.btn(href="#") 6
+        %nav.button-group
+          %a.btn(href="#") 7
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <section class="button-toolbar">
+            <nav class="button-group">
+              ...
+            </nav>
+            <nav class="button-group">
+              ...
+            </nav>
+            <nav class="button-group">
+              ...
+            </nav>
+          </section>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %section.button-toolbar
+            %nav.button-group
+              ...
+            %nav.button-group
+              ...
+            %nav.button-group
+              ...
+    .notification.important.fade.in
+      %p <strong>Note!</strong> When creating custom buttons, add the necessary overrides within <code>_button-groups.sass</code>
+
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Button states
+    %p Control a button state or entire button groups state using Bootstrap's <a href="http://twitter.github.com/bootstrap/javascript.html#buttons">button plugin</a>.
+    %br
+    %p A stateful button can be used for tasks like submitting a form. It disables a button and waits for a callback to either <code>reset</code> or populate the button's text with the value found in the attribute for <code>data-complete-text</code>.
+    %br
+    %pre.prettyprint
+      = preserve do
+        :escaped
+          $('#btn').on('click', function(e) {
+            var btn = $(this)
+            btn.button('loading')
+            setTimeout(function() {
+            // set text to data-complete-text
+             btn.button('complete')
+            // reset text to original value
+            // btn.button('reset')
+            }, 3000)
+          })
+  .sg-twothird.push
+    %table.box.banded.thead-decorate
+      %thead
+        %tr
+          %th State
+          %th Usage
+      %tbody
+        %tr
+          %td
+            %button.btn.primary(data-toggle="button") Toggle
+          %td Toggles active state on a single button
+        %tr
+          %td
+            %nav.button-group(data-toggle="buttons-checkbox")
+              %a.btn.primary(href="#") 1
+              %a.btn.primary(href="#") 2
+              %a.btn.primary(href="#") 3
+          %td Treats button group states similar to checkboxes
+        %tr
+          %td
+            %nav.button-group(data-toggle="buttons-radio")
+              %a.btn.primary(href="#") 4
+              %a.btn.primary(href="#") 5
+              %a.btn.primary(href="#") 6
+          %td Treats button group states similar to radio buttons
+        %tr
+          %td
+            %button#loader_btn.btn.primary(data-loading-text="sending..." data-complete-text="Sent") Send
+          %td Disables a button as information is being sent, resets on callback
+
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <!-- Toggle -->
+          <button class="btn" data-toggle="button">Toggle</button>
+
+          <!-- Checkbox type button group -->
+          <nav class="button-group" data-toggle="buttons-checkbox">
+            ...
+          </nav>
+
+          <!-- Radio type button group -->
+          <nav class="button-group" data-toggle="buttons-radio">
+            ...
+          </nav>
+
+          <!-- Stateful -->
+          <button data-loading-text="sending..." data-complete-text="Sent">Send</button>
+
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          <!-- Toggle -->
+          %button.btn(data-toggle="button") Toggle
+
+          <!-- Checkbox type button group -->
+          %nav.button-group(data-toggle="buttons-checkbox")
+            ...
+
+          <!-- Radio type button group -->
+          %nav.button-group(data-toggle="buttons-radio")
+            ...
+
+          <!-- Stateful -->
+          %button(data-loading-text="sending..." data-complete-text="Sent") Send
+

data/app/views/underoos/styleguides/components/_carets.haml

@@ -0,0 +1,28 @@
+
+.sg-subsection
+  %h3.sg-subheading Carets <span>carets.sass</span>
+  %p Carets are used as icons for links. Apply them in <code>span</code> elements.
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Caret
+        %th Markup
+    %tbody
+      %tr
+        %td <span class="caret"></span>
+        %td.html <code>&lt;span class="caret"&gt;&lt;/span&gt;</code> or <code>&lt;span class="caret south"&gt;&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.caret</code> or <code>%span.caret.south</code>
+      %tr
+        %td <span class="caret north"></span>
+        %td.html <code>&lt;span class="caret north"&gt;&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.caret.north</code>
+      %tr
+        %td <span class="caret east"></span>
+        %td.html <code>&lt;span class="caret east"&gt;&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.caret.east</code>
+      %tr
+        %td <span class="caret west"></span>
+        %td.html <code>&lt;span class="caret west"&gt;&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.caret.west</code>
+

data/app/views/underoos/styleguides/components/_close.haml

@@ -0,0 +1,20 @@
+
+.sg-subsection
+  %h3.sg-subheading Close <span>close.sass</span>
+  %p(style="width:67%;") Use the close icon to dismiss modals and notifications. Coupled with Bootstrap's <a href="http://twitter.github.com/bootstrap/javascript.html#alerts">alert</a> or <a href="http://twitter.github.com/bootstrap/javascript.html#modals">modal</a> plugins, you can pass the <code>data-dismiss="modal|alert"</code> attribute to trigger dismissal.
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Icon
+        %th Markup
+    %tbody
+      %tr
+        %td <a class="close" style="float:none;" href="#">&times;</a>
+        %td.html <code>&lt;a class="close" href="#"&gt;#{"&times;"}&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a.close(href="#") #{"&times;"}</code>
+      %tr(style="background-color:#333;")
+        %td <a class="close alt" style="float:none;" href="#">&times;</a>
+        %td.html <code>&lt;a class="close alt" href="#"&gt;#{"&times;"}&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a.close.alt(href="#") #{"&times;"}</code>
+

data/app/views/underoos/styleguides/components/_decals.haml

@@ -0,0 +1,40 @@
+
+.sg-subsection
+  %h3.sg-subheading Decals <span>decals.sass</span>
+  %p(style="width:67%;") Decals are used to <span class="decal important">pop</span> information in a block of text. They are typically used with <code>inline</code> elements and wrapped in a <code>span</code> element.
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Decal
+        %th Markup
+    %tbody
+      %tr
+        %td <span class="decal">Default</span>
+        %td.html <code>&lt;span class="decal"&gt;Default&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal Default</code>
+      %tr
+        %td <span class="decal info">Info</span>
+        %td.html <code>&lt;span class="decal info"&gt;Info&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal.info Info</code>
+      %tr
+        %td <span class="decal important">Important</span>
+        %td.html <code>&lt;span class="decal important"&gt;Important&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal.important Important</code>
+      %tr
+        %td <span class="decal success">Success</span>
+        %td.html <code>&lt;span class="decal success"&gt;Success&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal.success Success</code>
+      %tr
+        %td <span class="decal warning">Warning</span>
+        %td.html <code>&lt;span class="decal warning"&gt;Warning&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal.warning Warning</code>
+      %tr
+        %td <span class="decal danger">Danger</span>
+        %td.html <code>&lt;span class="decal danger"&gt;Danger&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal.danger Danger</code>
+      %tr
+        %td <span class="decal primary">Primary</span>
+        %td.html <code>&lt;span class="decal primary"&gt;Primary&lt;/span&gt;</code>
+        %td.haml.hidden <code>%span.decal.primary Primary</code>
+

data/app/views/underoos/styleguides/components/_dropdowns.haml

@@ -0,0 +1,189 @@
+
+.sg-subsection
+  %h3.sg-subheading Dropdowns <span>dropdowns.sass</span>
+  %p Requires <a href="http://twitter.github.com/bootstrap/javascript.html#dropdowns">Bootstrap's Dropdown plugin</a>.
+
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Basic Dropdowns
+    %p Add dropdown menus to just about any type of navigation list element by applying the attribute <code>data-toggle="dropdown"</code> to the target button.
+  .sg-twothird.push
+    .well
+      %nav
+        %ul.nav
+          %li.dropdown(style="display:inline-block; margin-right: 2em;")
+            %a.dropdown-toggle(href="#" data-toggle="dropdown") Dropdown<span class="caret"></span>
+            %ul.dropdown-menu
+              %li
+                %a(href="#") Subnav 1
+              %li
+                %a(href="#") Subnav 2
+              %li.divider
+              %li
+                %a(href="#") Subnav 3
+
+          %li.dropdown(style="display:inline-block;")
+            %a.dropdown-toggle(href="#" data-toggle="dropdown") Dropup<span class="caret"></span>
+            %ul.dropdown-menu.drop-up
+              %li
+                %a(href="#") Subnav 1
+              %li
+                %a(href="#") Subnav 2
+              %li.divider
+              %li
+                %a(href="#") Subnav 3
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ul class="nav">
+              <li class="dropdown">
+                <a href="#" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                  <li><a href="#">Subnav 1</a></li>
+                  <li><a href="#">Subnav 2</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Subnav 3</a></li>
+                </ul>
+              </li>
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ul.nav
+              %li.dropdown
+                %a(href="#" data-toggle="dropdown") Dropdown <span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#") Subnav 1
+                  %li
+                    %a(href="#") Subnav 2
+                  %li.divider
+                  %li
+                    %a(href="#") Subnav 3
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add the <code>.drop-up</code> class to the <code>ul.dropdown-menu</code> to pop the menu above the target
+
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Button dropdowns
+    %p For elements outside of a list, typically in stand alone buttons, utilize the <code>button-group</code> structure for creating dropdowns.
+  .sg-twothird.push
+    .well.button-toolbar
+      %nav.button-group
+        %button.btn.dropdown-toggle(href="#" data-toggle="dropdown") Dropdown<span class="caret"></span>
+        %ul.dropdown-menu
+          %li
+            %a(href="#") Subnav 1
+          %li
+            %a(href="#") Subnav 2
+          %li.divider
+          %li
+            %a(href="#") Subnav 3
+
+      %nav.button-group
+        %button.btn.important.dropdown-toggle(href="#" data-toggle="dropdown") Important<span class="caret"></span>
+        %ul.dropdown-menu.drop-up
+          %li
+            %a(href="#") Subnav 1
+          %li
+            %a(href="#") Subnav 2
+          %li.divider
+          %li
+            %a(href="#") Subnav 3
+      %nav.button-group
+        %button.btn.success.dropdown-toggle(href="#" data-toggle="dropdown") Success<span class="caret"></span>
+        %ul.dropdown-menu
+          %li
+            %a(href="#") Subnav 1
+          %li
+            %a(href="#") Subnav 2
+          %li.divider
+          %li
+            %a(href="#") Subnav 3
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav class="button-group">
+            <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret">
+            <ul class="dropdown-menu">
+              ...
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav.button-group
+            %button.btn.dropdown-toggle(data-toggle="dropdown") Dropdown<span class="caret"></span>
+            %ul.dropdown-menu
+              ...
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Split button dropdowns
+    %p Building on the <code>button-group</code> structure, create split buttons where there is action on the left button and contextual menu items under the caret to the right.
+  .sg-twothird.push
+    .well.button-toolbar
+      %nav.button-group
+        %button.btn(href="#") Action
+        %button.btn.dropdown-toggle(href="#" data-toggle="dropdown") <span class="caret split"></span>
+        %ul.dropdown-menu
+          %li
+            %a(href="#") Subnav 1
+          %li
+            %a(href="#") Subnav 2
+          %li.divider
+          %li
+            %a(href="#") Subnav 3
+      %nav.button-group
+        %button.btn.important(href="#") Action
+        %button.btn.important.dropdown-toggle(href="#" data-toggle="dropdown") <span class="caret split"></span>
+        %ul.dropdown-menu.drop-up
+          %li
+            %a(href="#") Subnav 1
+          %li
+            %a(href="#") Subnav 2
+          %li.divider
+          %li
+            %a(href="#") Subnav 3
+      %nav.button-group
+        %button.btn.success(href="#") Action
+        %button.btn.success.dropdown-toggle(href="#" data-toggle="dropdown") <span class="caret split"></span>
+        %ul.dropdown-menu
+          %li
+            %a(href="#") Subnav 1
+          %li
+            %a(href="#") Subnav 2
+          %li.divider
+          %li
+            %a(href="#") Subnav 3
+
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav class="button-group">
+            <button class="btn" href="#">Action</button>
+            <button class="btn dropdown-toggle" data-toggle="dropdown">
+              <span class="caret split"></span>
+            </button>
+            <ul class="dropdown-menu">
+              ...
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav.button-group
+            %button.btn(href="#") Action
+            %button.btn.dropdown-toggle(data-toggle="dropdown")
+              %span.caret.split
+            %ul.dropdown-menu
+              ...
+
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add the <code>.split</code> class to the caret <code>&lt;span&gt;</code> to center within the button
+    .notification.important.fade.in
+      %p <strong>WTF: IE 7!</strong> Out of the box, dropdowns utilize <code>visuallyhidden</code> when hiding their content instead of <code>display:none</code>. This ensures the content is available to <a href="http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/">screen readers</a>. If you must support IE 7, remove the mixin for <code>visuallyhidden</code> and uncomment <code>display:none</code>. The <code>visuallyhidden</code> mixin works fine for modern browsers and IE8+
+
+