underoos 1.0.0

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

@@ -0,0 +1,68 @@
+
+.sg-subsection
+  %h3.sg-subheading Paddles <span>paddles.sass</span>
+
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Default paddles
+    %p Paddles are commonly used in carousel or simple paging navigations. The default set contains simple inline links.
+  .sg-twothird.push
+    .well
+      %nav
+        %ul.paddles
+          %li
+            %a(href="#") &larr; Previous
+          %li
+            %a(href="#") Next &rarr;
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ul class="paddles">
+              <li> <a href="#">&larr; Previous</a> </li>
+              <li> <a href="#">Next &rarr;</a> </li>
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ul.paddles
+              %li
+                %a(href="#") &larr; Previous
+              %li
+                %a(href="#") Next &rarr;
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add <code>.paddles-center</code> or <code>.paddles-right</code> on the container to change the alignment
+
+.sg-subsection
+  .sg-onethird.pull
+    %h4 Aligned paddles
+    %p To allow paddles to float on the sides of the container, apply the <code>.prev</code> and <code>.next</code> classes to the containing paddles <code>li</code> element.
+  .sg-twothird.push
+    .well
+      %nav
+        %ul.paddles
+          %li.prev
+            %a(href="#") &larr; Previous
+          %li.next
+            %a(href="#") Next &rarr;
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ul class="paddles">
+              <li class="prev"><a href="#">&larr; Previous</a> </li>
+              <li class="next"><a href="#">Next &rarr;</a> </li>
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ul.paddles
+              %li.prev
+                %a(href="#") &larr; Previous
+              %li.next
+                %a(href="#") Next &rarr;
+

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

@@ -0,0 +1,64 @@
+
+.sg-subsection
+  %h3.sg-subheading Pagination <span>pagination.sass</span>
+  .sg-onethird.pull
+    %p Apply the <code>.pagination</code> class to the <code>ol</code> or <code>ul</code> element to represent pagination navigation.
+  .sg-twothird.push
+    .well
+      %nav
+        %ol.nav.pagination
+          %li.disabled
+            %a(href="#") &laquo;
+          %li
+            %a(href="#") 1
+          %li.active
+            %a(href="#") 2
+          %li
+            %a(href="#" rel="next") 3
+          %li.disabled
+            %a(href="#") &hellip;
+          %li
+            %a(href="#") 11
+          %li
+            %a(href="#") 12
+          %li
+            %a(href="#" rel="next") &raquo;
+
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ol class="nav pagination">
+              <li class="disabled"><a href="#">&laquo;</a></li>
+              <li><a href="#">1</a></li>
+              <li class="active"><a href="#">2</a></li>
+              <li><a href="#" rel="next">3</a></li>
+              <li class="disabled"><a href="#">&hellip;</a></li>
+              <li><a href="#">11</a></li>
+              <li><a href="#">12</a></li>
+              <li><a href="#">&raquo;</a></li>
+            </ol>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %ol.nav.pagination
+            %li.disabled
+              %a(href="#") &laquo;
+            %li
+              %a(href="#") 1
+            %li.active
+              %a(href="#") 2
+            %li
+              %a(href="#" rel="next") 3
+            %li.disabled
+              %a(href="#") &hellip;
+            %li
+              %a(href="#") 11
+            %li
+              %a(href="#") 12
+            %li
+              %a(href="#" rel="next") &raquo;
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add <code>.pagination-center</code> or <code>.pagination-right</code> on the container to change the alignment
+

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

@@ -0,0 +1,33 @@
+
+.sg-subsection
+  %h3.sg-subheading Popovers <span>popovers.sass</span>
+  %p(style="width:67%;") Pop Overs utilize <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Bootstrap's Popover plugin</a>. They are similar to the tool tip plugin and they require <a href="http://twitter.github.com/bootstrap/javascript.html#tooltips">Bootstrap's Tooltip plugin</a> to be included as well.
+
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Position
+        %th Markup
+    %tbody
+      %tr
+        %td <a href="#" rel="popover" data-placement="top" data-original-title="Top" data-content="This is a popover">Top</a>
+        %td.html <code>&lt;a rel="popover" data-placement="top" data-original-title="Top" data-content="..."&gt;Top&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(rel="popover" data-placement="top" data-original-title="Top" data-content="...") Top</code>
+      %tr
+        %td <a href="#" rel="popover" data-placement="bottom" data-original-title="Bottom" data-content="This is a popover">Bottom</a>
+        %td.html <code>&lt;a rel="popover" data-placement="bottom" data-original-title="Bottom" data-content="..."&gt;Bottom&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(rel="popover" data-placement="bottom" data-original-title="Bottom" data-content="...") Bottom</code>
+      %tr
+        %td <a href="#" rel="popover" data-placement="left" data-original-title="Left" data-content="This is a popover">Left</a>
+        %td.html <code>&lt;a rel="popover" data-placement="left" data-original-title="Left" data-content="..."&gt;Left&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(rel="popover" data-placement="left" data-original-title="Left" data-content="...") Left</code>
+      %tr
+        %td <a href="#" rel="popover" data-placement="right" data-original-title="Right" data-content="This is a popover">Right</a>
+        %td.html <code>&lt;a rel="popover" data-placement="right" data-original-title="Right" data-content="..."&gt;Right&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(rel="popover" data-placement="right" data-original-title="Right" data-content="...") Right</code>
+
+  .notification.important.fade.in
+    %p <strong>Note!</strong> Popovers are opt in and will only be instantiated if called directly from JavaScript:
+    %code $("a[rel=popover]").popover()
+

data/app/views/underoos/styleguides/components/_progress-bars.haml

@@ -0,0 +1,72 @@
+
+.sg-subsection
+  %h3.sg-subheading Progress Bars <span>progress-bars.sass</span>
+  %p(style="width:67%;") Progress bars are used to display actions being performed by the user. Utilize a bit of JavaScript to set the <code>width</code> of the <code>.progress &gt; .bar</code> to showcase it's status.
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Progress Bar
+        %th Class
+        %th Description
+    %tbody
+      %tr
+        %td
+          .progress
+            .bar(style="width:60%")
+        %td <code>.progress</code>
+        %td The default style utilizing the <code>$standard</code> value
+      %tr
+        %td
+          .progress.info
+            .bar(style="width:60%")
+        %td <code>.progress.info</code>
+        %td The info bar is typically used as an alternate to the default bar
+      %tr
+        %td
+          .progress.important
+            .bar(style="width:60%")
+        %td <code>.progress.important</code>
+        %td Typically used when performing an important action
+      %tr
+        %td
+          .progress.success
+            .bar(style="width:60%")
+        %td <code>.progress.success</code>
+        %td Used to show a successful or positive progress
+      %tr
+        %td
+          .progress.warning
+            .bar(style="width:60%")
+        %td <code>.progress.warning</code>
+        %td Used when performing cautious or potentially negative action
+      %tr
+        %td
+          .progress.danger
+            .bar(style="width:60%")
+        %td <code>.progress.danger</code>
+        %td Typically used when performing a delete or negative action
+      %tr
+        %td
+          .progress.primary
+            .bar(style="width:60%")
+        %td <code>.progress.primary</code>
+        %td Inherits the main CI color to display a progress action
+  .notification.important.fade.in
+    %p <strong>Pro Tip!</strong> Click in the progress bar container to showcase the loading animation
+
+.sg-subsection
+  %h4 Native Progress &amp; Meter Bars
+  .sg-onethird.pull
+    %p Native Progress and Meter bars are not supported in all browsers, but are available to some. We opt for using a component over these, but polyfills are available for both <a href="https://gist.github.com/667320">meter</a> and <a href="http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/">progress bars</a>. They just require a bit more css to accommodate.
+  .sg-twothird.indent
+    .well
+      %p The <code>meter</code> bar is used to indicate a scalar measurement within a known range, or a fractional value.
+      %p
+        %meter(min="0" max="100" value="50")
+      %br
+      %br
+      %p The <code>progress</code> bar is used to represent the progress of a task.
+      %p
+        %progress(min="0" max="100" value="50")
+

data/app/views/underoos/styleguides/components/_tabs-pills.haml

@@ -0,0 +1,241 @@
+
+.sg-subsection
+  %h3.sg-subheading Tabs &amp; Pills <span>tabs.sass, pills.sass</span>
+
+.sg-subsection
+  .sg-half.pull
+    %h4 Default Tabs
+    %p Attach the classes <code>.nav .tabs</code> to the <code>ol</code> or <code>ul</code> elements.
+    .well(style="margin-top:1.25em;")
+      %nav
+        %ul.nav.tabs
+          %li
+            %a(href="#tab_one" data-toggle="tab") Tab One
+          %li.active
+            %a(href="#tab_two" data-toggle="tab") Tab Two
+          %li
+            %a(href="#tab_three" data-toggle="tab") Tab Three
+          %li.dropdown
+            %a.dropdown-toggle(href="#" data-toggle="dropdown") Tab Four<span class="caret"></span>
+            %ul.dropdown-menu
+              %li
+                %a(href="#tab_four-1" data-toggle="tab") Subnav 1
+              %li
+                %a(href="#tab_four-2" data-toggle="tab") Subnav 2
+              %li.divider
+              %li
+                %a(href="#tab_four-3" data-toggle="tab") Subnav 3
+      .tab-content(style="margin-top:1.25em;")
+        .tab-pane#tab_one
+          %p Tab <span class="decal primary">one</span> content
+        .tab-pane#tab_two.active
+          %p Tab <span class="decal primary">two</span> content
+        .tab-pane#tab_three
+          %p Tab <span class="decal primary">three</span> content
+        .tab-pane#tab_four-1
+          %p Tab <span class="decal primary">four</span>: subnav <span class="decal primary">1</span> content
+        .tab-pane#tab_four-2
+          %p Tab <span class="decal primary">four</span>: subnav <span class="decal primary">2</span> content
+        .tab-pane#tab_four-3
+          %p Tab <span class="decal primary">four</span>: subnav <span class="decal primary">3</span> content
+
+  .sg-half.push
+    %h4 Default Pills
+    %p Attach the classes <code>.nav .pills</code> to the <code>ol</code> or <code>ul</code> elements.
+    .well(style="margin-top:1.25em;")
+      %nav
+        %ul.nav.pills
+          %li
+            %a(href="#pill_one" data-toggle="pill") Pill One
+          %li.active
+            %a(href="#pill_two" data-toggle="pill") Pill Two
+          %li
+            %a(href="#pill_three" data-toggle="pill") Pill Three
+          %li.dropdown
+            %a.dropdown-toggle(href="#" data-toggle="dropdown") Pill Four<span class="caret"></span>
+            %ul.dropdown-menu
+              %li
+                %a(href="#pill_four-1" data-toggle="pill") Subnav 1
+              %li
+                %a(href="#pill_four-2" data-toggle="pill") Subnav 2
+              %li.divider
+              %li
+                %a(href="#pill_four-3" data-toggle="pill") Subnav 3
+      .pill-content(style="margin-top:1.25em;")
+        .pill-pane#pill_one
+          %p Pill <span class="decal primary">one</span> content
+        .pill-pane#pill_two.active
+          %p Pill <span class="decal primary">two</span> content
+        .pill-pane#pill_three
+          %p Pill <span class="decal primary">three</span> content
+        .pill-pane#pill_four-1
+          %p Pill <span class="decal primary">four</span>: subnav <span class="decal primary">1</span> content
+        .pill-pane#pill_four-2
+          %p Pill <span class="decal primary">four</span>: subnav <span class="decal primary">2</span> content
+        .pill-pane#pill_four-3
+          %p Pill <span class="decal primary">four</span>: subnav <span class="decal primary">3</span> content
+
+
+.sg-subsection
+  .sg-half.pull
+    %h4 Stacked Tabs
+    %p Stack tabs by adding the class <code>.stacked</code> to the <code>.tabs</code> element.
+    .well(style="margin-top:1.25em;")
+      %nav
+        %ul.nav.tabs.stacked
+          %li
+            %a(href="#") Tab One
+          %li.active
+            %a(href="#") Tab Two
+          %li.dropdown
+            %a.dropdown-toggle(href="#" data-toggle="dropdown") Tab Three<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
+            %a(href="#") Tab Four
+
+  .sg-half.push
+    %h4 Stacked Pills
+    %p Stack pills by adding the class <code>.stacked</code> to the <code>.pills</code> element.
+    .well(style="margin-top:1.25em; padding-bottom:1em;")
+      %nav
+        %ul.nav.pills.stacked
+          %li
+            %a(href="#") Pill One
+          %li.active
+            %a(href="#") Pill Two
+          %li.dropdown
+            %a.dropdown-toggle(href="#" data-toggle="dropdown") Pill Three<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
+            %a(href="#") Pill Four
+
+
+.sg-subsection
+  .sg-half.pull
+    %h4 Tabs structure
+    %p Tabs structure shown with a dropdown.
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <!-- Add `.stacked` to the ul below -->
+            <ul class="nav tabs">
+              <li><a>Tab 1</a></li>
+              <li><a class="active">Tab 2</a></li>
+              <li class="dropdown">
+                <a data-toggle="dropdown">Tab 3<span class="caret">...
+                <ul class="dropdown-menu">
+                  ...
+                </ul>
+              </li>
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ul.nav.tabs
+              %li
+                %a(href="#") Tab One
+              %li.active
+                %a(href="#") Tab Two
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown")
+                  Tab Three
+                  %span.caret
+                %ul.dropdown-menu
+                  ...
+
+  .sg-half.push
+    %h4 Pills structure
+    %p Pills structure shown with a dropdown.
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <!-- Add `.stacked` to the ul below -->
+            <ul class="nav pills">
+              <li><a>Pill 1</a></li>
+              <li><a class="active">Pill 2</a></li>
+              <li class="dropdown">
+                <a data-toggle="dropdown">Pill 3<span class="caret">...
+                <ul class="dropdown-menu">
+                  ...
+                </ul>
+              </li>
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ul.nav.pills
+              %li
+                %a(href="#") Pill One
+              %li.active
+                %a(href="#") Pill Two
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown")
+                  Pill Three
+                  %span.caret
+                %ul.dropdown-menu
+                  ...
+
+
+.sg-subsection
+  %h4 Togglable Tabs &amp; Pills
+  %p(style="width:67%;") To utilize a drop dead simple version of hiding and showing content related to a tab/pill, utilize <a href="http://twitter.github.com/bootstrap/javascript.html#tabs">Bootstrap's Tab</a> plugin. The base structure of tabs and pills doesn't change, except to include a few more classes on the links and the <code>href</code> attribute the button will target.
+  %pre.prettyprint.html
+    = preserve do
+      :escaped
+        <nav>
+          <ul class="nav tabs">
+            <li>
+              <a data-toggle="tab" href="#tab_one">Tab One</a>
+            </li>
+            <li class="active">
+              <a data-toggle="tab" href="#tab_two">Tab Two</a>
+            </li>
+          </ul>
+        </nav>
+        <!-- tab-content holds all tab-pane markup -->
+        <div class="tab-content">
+          <div class="tab-pane" id="tab_one">
+            <p>Tab one content</p>
+          </div>
+          <div class="tab-pane active" id="tab_two">
+            <p>Tab two content</p>
+          </div>
+        </div>
+  %pre.prettyprint.haml.hidden
+    = preserve do
+      :escaped
+        %nav
+          %ul.nav.tabs
+            %li
+              %a(data-toggle="tab" href="#tab_one") Tab One
+            %li.active
+              %a(data-toggle="tab" href="#tab_two") Tab Two
+
+        .tab-content
+          #tab_one.tab-pane
+            %p Tab one content
+          #tab_two.tab-pane.active
+            %p Tab two content
+  .notification.important.fade.in
+    %p <strong>Note!</strong> When targeting pills, use <code>data-toggle="pill"</code> for links and <code>.pill-content</code>, <code>.pill-pane</code> for content elements.
+