underoos 1.0.0

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

@@ -0,0 +1,78 @@
+
+.sg-subsection
+  %h3.sg-subheading Media <span>media.sass</span>
+
+.sg-subsection
+  .sg-half.pull
+    %h4 Media grid
+    %p Media items within a grid, provide a simple way for showcasing images, video and other media items.
+  .sg-half.push
+    %h4 Media item
+    %p With some additional markup, it's simple to create more complex media containers to showcase more information.
+
+.sg-subsection
+  .sg-half.pull
+    .well
+      %nav
+        %ul.media-grid
+          -(1..4).each do |media|
+            %li.sg-half
+              %a.media-item(href="#")
+                %img(src="http://placehold.it/260x180" alt="alt")
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ul class="media-grid">
+              <li class="col-half">
+                <a class="media-item" href="#">
+                  <img alt="alt" src="http://placehold.it/260x180">
+                </a>
+              </li>
+              ...
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav
+            %ul.media-grid
+              %li.col-half
+                %a.media-item(href="#")
+                  %img(alt="alt" src="http://placehold.it/260x180")
+
+  .sg-half.push
+    .well
+      .media-item
+        %img(src="http://placehold.it/540x180" alt="alt")
+        %section.caption
+          %h5 This is a title
+          %p=@lorem_sm
+          %footer(style="margin-top:1.2em;")
+            %button.btn(href="#") Action
+            %button.btn(href="#") Cancel
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <div class="media-item">
+            <img alt="alt" src="http://placehold.it/460x180">
+            <section class="caption">
+              ...
+            </section>
+          </div>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          .media-item
+            %img(alt="alt" src="http://placehold.it/260x180")
+            %section.caption
+              ...
+
+.sg-subsection
+  .sg-half.pull
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Define the column span on the list item for grid settings
+  .sg-half.push
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Include a <code>caption</code> class after the media for additional padding
+

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

@@ -0,0 +1,42 @@
+
+.sg-subsection
+  %h3.sg-subheading Modals <span>modals.sass</span>
+  .sg-onethird.pull
+    %p Modals utilize <a href="http://twitter.github.com/bootstrap/javascript.html#modals">Bootstrap's Modal plugin</a>. You can control various options of how modals are shown based on attributes set in the trigger or the modal markup itself.
+    %br
+    %p We do not include any styles for the contents of a modal. This is better suited for other components or custom layouts within the application.
+  .sg-twothird.push
+    .well
+      %button.btn.primary(data-toggle="modal" href="#modal") Launch Modal
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <!-- Modal Trigger Button -->
+          <button class="btn important" data-toggle="modal" href="#modal_name"></button>
+
+          <!-- Modal Wrapper -->
+          <div id="modal_name" class="modal fade" data-backdrop="true" data-keyboard="true">
+            ...
+            <a class="close" data-dismiss="modal">&times;</a>
+          </div>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          <!-- Modal Trigger Button -->
+          %button.btn.important(data-toggle="modal" href="#modal_name")
+
+          <!-- Modal Wrapper -->
+          #modal_name.modal.fade(data-backdrop="true" data-keyboard="true")
+            ...
+            %a.close(data-dismiss="modal") &times;
+#modal.modal.fade(data-backdrop="true" data-keyboard="true")
+  .notification
+    %header
+      %h3.heading Notification within a Modal
+    %section
+      %p=@lorem
+    %footer.footer-right
+      %button.btn.important(href="#") Action
+      %button.btn.danger(href="#") Cancel
+    %a.close(href="#" data-dismiss="modal") &times;
+

data/app/views/underoos/styleguides/components/_nav-lists.haml

@@ -0,0 +1,52 @@
+
+.sg-subsection
+  %h3.sg-subheading Nav lists <span>nav-lists.sass</span>
+  .sg-onethird.pull
+    %p Nav lists build off of the same markup as <code>tabs</code> and <code>pills</code>. They are typically used in aside style navigation systems.
+    %br
+    %p To include a header, just supply the <code>li</code> with the class <code>.nav-header</code>
+  .sg-twothird.push
+    .well.lite
+      %nav
+        %ul.nav.nav-list
+          %li.nav-header List Header
+          %li
+            %a(href="#") List One
+          %li.active
+            %a(href="#") List Two
+          %li
+            %a(href="#") List Three
+          %li.nav-header Another List Header
+          %li
+            %a(href="#") List Four
+          %li
+            %a(href="#") List Five
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <nav>
+            <ul class="nav nav-list">
+              <li class="nav-header">List Header</li>
+              <li><a href="#">List 1</a></li>
+              <li><a href="#" class="active">List 2</a></li>
+              <li><a href="#">List 3</a></li>
+              <li class="nav-header">Another List Header</li>
+              <li><a href="#">List 4</a></li>
+            </ul>
+          </nav>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %nav>
+            %ul.nav.nav-list
+              %li.nav-header List Header
+              %li
+                %a(href="#") List 1
+              %li.active
+                %a(href="#") List 2
+              %li
+                %a(href="#") List 3
+              %li.nav-header Another List Header
+              %li
+                %a(href="#") List 4
+

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

@@ -0,0 +1,144 @@
+
+.sg-subsection
+  %h3.sg-subheading Navbars <span>navbars.sass</span>
+  %p(style="width:67%;") Typically used for application or page level navigation systems. Navbars can contain just about any type of navigation component, search forms, button groups and drop downs.
+  %br
+  %p(style="width:67%;") Navbars support responsive behavior, by adding a button with <code>data-toggle="collapse" data-target="#target_id"</code>. You'll also need to set the corresponding class (<code>.nav-collapse</code>) and the id based on the target (<code>#target_id</code>) on the collapsable container. Make sure to utilize the styles contained within the media queries as well.
+.sg-subsection
+  .navbar
+    .navbar-inner
+      .container
+        %a.btn.info.btn-navbar(data-toggle="collapse" data-target="#collapse_example")
+          %span.icon-bar
+          %span.icon-bar
+          %span.icon-bar
+        %a.brand(href="#") Brand
+        %nav.nav-collapse#collapse_example
+          %ul.nav
+            %li
+              %a(href="#") Link 1
+            %li.active
+              %a(href="#") Link 2
+            %li.plain-text Plain Text
+            %li.dropdown
+              %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
+
+          %nav.pull-right
+            %form.form-search
+              %ol
+                %li
+                  %input.search-query(type="search" name="test[searchbar]" placeholder="search")
+                  %button.btn.primary(type="submit") Go
+            %ul.nav
+              %li.dropdown
+                %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
+
+.sg-subsection
+  %pre.prettyprint.html
+    = preserve do
+      :escaped
+        <!-- Showcases the navbar example above -->
+        <div class="navbar">
+          <div class="navbar-inner">
+            <div class="container">
+              <a class="btn info btn-navbar" data-toggle="collapse" data-target="#collapse_example">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+              </a>
+              <a class="brand" href="#">Brand</a>
+              <nav class="nav-collapse" id="collapse_example">
+                <ul class="nav">
+                  <li><a href="#">Link 1</a></li>
+                  <li class="active"><a href="#">Link 2</a></li>
+                  <li class="plain-text">Plain Text</li>
+                  <li class="dropdown">
+                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
+                    <ul class="dropdown-menu">
+                      ...
+                    </ul>
+                  </li>
+                </ul>
+                <section class="pull-right">
+                  <form class="form-search">
+                    <ol>
+                      <li>
+                        <input class="search-query" name="test[searchbar]" placeholder="search" type="search">
+                        <button class="btn primary" type="submit">Go</button>
+                      </li>
+                    </ol>
+                  </form>
+                  <ul class="nav">
+                    <li class="dropdown">
+                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span></a>
+                      <ul class="dropdown-menu">
+                        ...
+                      </ul>
+                    </li>
+                  </ul>
+                </section>
+              </nav>
+            </div>
+          </div>
+        </div>
+  %pre.prettyprint.haml.hidden
+    = preserve do
+      :escaped
+        <!-- Showcases the navbar example above -->
+        .navbar
+          .navbar-inner
+            .container
+              %a.btn.info.btn-navbar(data-toggle="collapse" data-target="#collapse_example")
+                %span.icon-bar
+                %span.icon-bar
+                %span.icon-bar
+              %a.brand(href="#") Brand
+              %nav.nav-collapse#collapse_example
+                %ul.nav
+                  %li
+                    %a(href="#") Link 1
+                  %li.active
+                    %a(href="#") Link 2
+                  %li.plain-text Plain Text
+                  %li.dropdown
+                    %a.dropdown-toggle(data-toggle="dropdown" href="#")
+                      Dropdown
+                      %span.caret
+                    %ul.dropdown-menu
+                      ...
+                %section.pull-right
+                  %form.form-search
+                    %ol
+                      %li
+                        %input.search-query(name="test[searchbar]" placeholder="search" type="search")
+                        %button.btn.primary(type="submit") Go
+                  %ul.nav
+                    %li.dropdown
+                      %a.dropdown-toggle(data-toggle="dropdown" href="#")
+                      Dropdown
+                      %span.caret
+                      %ul.dropdown-menu
+                        ...
+  .notification.important.fade.in
+    %p <strong>Note!</strong> Add the <code>.fixed</code> class to the <code>.navbar</code> container to fix the navigation system to the top of the page
+  .notification.important.fade.in
+    %p <strong>Note!</strong> It's a good idea to set a specific height for the navbar, this is not set in the default component
+  .notification.important.fade.in
+    %p <strong>Note!</strong> For a responsive navbar, make sure to include <a href="http://twitter.github.com/bootstrap/javascript.html#collapse">Bootstrap's Collapse plugin</a> and add the necessary elements to the structure
+

data/app/views/underoos/styleguides/components/_navs-showcase.haml

@@ -0,0 +1,27 @@
+
+.sg-subsection
+  %h3.sg-subheading Navs Showcase <span>navs-example.sass</span>
+  %p(style="width:67%;") Clicking on the buttons below will change the class on the <code>ul</code> element to showcase the different navigation systems. The markup structure remains the same.
+  %br
+  %small Follow along in your inspector!
+  .well(style="margin-top:1.25em;")
+    %nav
+      %ul#navs_showcase.nav.pills
+        %li
+          %a(href="#" data-classes="nav") Base Nav
+        %li
+          %a(href="#" data-classes="nav tabs") Tabs
+        %li.active
+          %a(href="#" data-classes="nav pills") Pills
+        %li
+          %a(href="#" data-classes="nav breadcrumb") Breadcrumbs
+        %li
+          %a(href="#" data-classes="nav pagination") Pagination
+        %li
+          %a(href="#" data-classes="nav tabs stacked") Stacked Tabs
+        %li
+          %a(href="#" data-classes="nav pills stacked") Stacked Pills
+
+  .notification.warning.fade.in
+    %p <strong>Warning!</strong> All navigation components depend on the <code>.nav</code> class being attached to the list container element
+

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

@@ -0,0 +1,169 @@
+
+.sg-subsection
+  %h3.sg-subheading Notifications <span>notifications.sass</span>
+
+.sg-subsection
+  -# Standard Notifications
+  .sg-half.pull
+    %h4 Basic notifications
+    %p A basic notification is set on a container with the <code>.notification</code> class. It comes in the standard flavors for various types of alerts. Notifications utilize <a href="http://twitter.github.com/bootstrap/javascript.html#alerts">Bootstrap's alert plugin</a> for closing a notification.
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <div class="notification important fade in">
+            <p><strong>Dude!</strong> Wheres my car?</p>
+            <a class="close" data-dismiss="alert">&times;</a>
+          </div>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          .notification.important.fade.in
+            %p <strong>Dude!</strong> Wheres my car?
+            %a.close(data-dismiss="alert") &times;
+
+  -# Pop Notifications
+  .sg-half.push
+    .notification.fade.in
+      %p <strong>Default!</strong> This is the default notification.
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.info.notice.fade.in
+      %p <strong>Info (or Notice)!</strong> Use this for general information.
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.important.fade.in
+      %p <strong>Important!</strong> Something important is said here.
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.success.fade.in
+      %p <strong>Success!</strong> Congratulations, you get a trophy.
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.warning.fade.in
+      %p <strong>Warning!</strong> Your first and final.
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.danger.error.alert.fade.in
+      %p <strong>Danger (or Error, or Alert)!</strong> Something bad did happen.
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.primary.fade.in
+      %p <strong>Primary!</strong> The CI button.
+      %a.close(href="#" data-dismiss="alert") &times;
+
+.sg-subsection
+  .sg-half.pull
+    %h4 Block notifications
+    %p Block notifications are similar to the basic notification, in fact nothing needs to change on the outer container. Just add a <code>header</code>, <code>section</code> and/or <code>footer</code> to the internal markup to provide more information around the notification.
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <!-- Success Block -->
+          <div class="notification success fade in">
+            <header>...</header>
+            <section>...</section>
+            <footer>... </footer>
+            <a class="close" data-dismiss="alert">&times;</a>
+          </div>
+
+          <!-- Danger Block -->
+          <div class="notification danger fade in">
+            <section>...</section>
+            <footer class="footer-right">... </footer>
+            <a class="close" data-dismiss="alert">&times;</a>
+          </div>
+
+          <!-- Primary Block -->
+          <div class="notification important fade in">
+            <header>...</header>
+            <p>... </p>
+            <a class="close" data-dismiss="alert">&times;</a>
+          </div>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          <!-- Success Block -->
+          .notification.success.fade.in
+            %header ...
+            %section ...
+            %footer ...
+            %a.close(data-dismiss="alert") &times;
+
+          <!-- Danger Block -->
+          .notification.danger.fade.in
+            %section ...
+            %footer.footer-right ...
+            %a.close(data-dismiss="alert") &times;
+
+          <!-- Primary Block -->
+          .notification.important.fade.in
+            %header ...
+            %p ...
+            %a.close(data-dismiss="alert") &times;
+  .sg-half.push
+    .notification.success.fade.in
+      %header
+        %h5.heading Header with an h5
+      %section
+        %p=@lorem_sm
+      %footer
+        %button.btn.success(href="#") Action
+        %button.btn(href="#") Cancel
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.danger.fade.in
+      %section
+        %p
+          %strong Yikes! This doesn't have a header and the footer is on the right!
+          =@lorem_sm
+      %footer.footer-right
+        %button.btn.danger(href="#") Action
+        %button.btn(href="#") Cancel
+      %a.close(href="#" data-dismiss="alert") &times;
+    .notification.important.fade.in
+      %header
+        %strong Header with strong tag, no section or footer!
+      %p=@lorem_sm
+      %a.close(href="#" data-dismiss="alert") &times;
+
+
+.sg-subsection
+  %h4 Flash Notifications
+  %p(style="width:67%") Flash notifications enhance the standard <code>.notification</code> component by allowing them to appear fixed above all other elements on the page. Wrap the notifications within a <code>#flash_messages.flash-messages</code> container at the root of the body, sprinkle a little JavaScript and you're ready to go.
+  %br
+  %p(style="width:67%") Adding different positional classes to the <code>.flash-messages</code> container will allow them to appear in different quadrants of the viewport as seen below:
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Type
+        %th Class
+        %th Usage
+    %tbody
+      %tr
+        %td
+          %a.flash-example(href="#" data-position="top") Top
+        %td <code>.flash-messages.top</code>
+        %td Fixed to the top of the browser, spans the entire viewport (<em>the default</em>)
+      %tr
+        %td
+          %a.flash-example(href="#" data-position="bottom") Bottom
+        %td <code>.flash-messages.bottom</code>
+        %td Fixed to the bottom of the browser, spans the entire viewport
+      %tr
+        %td
+          %a.flash-example(href="#" data-position="top-left") Top left
+        %td <code>.flash-messages.top-left</code>
+        %td Upper left quadrant of the viewport, with a size of 25%
+      %tr
+        %td
+          %a.flash-example(href="#" data-position="top-right") Top right
+        %td <code>.flash-messages.top-right</code>
+        %td Upper right quadrant of the viewport, with a size of 25%
+      %tr
+        %td
+          %a.flash-example(href="#" data-position="top-center") Top center
+        %td <code>.flash-messages.top-center</code>
+        %td Upper center quadrant of the viewport, with a size of 50%
+      %tr
+        %td
+          %a.flash-example(href="#" data-position="middle") Middle
+        %td <code>.flash-messages.middle</code>
+        %td Dead center baby, with a size of 50%
+
+  .notification.important.fade.in
+    %p <strong>Note!</strong> You don't necessarily need to use notifications within the <code>.flash-messages</code> container, it's left fairly flexible to allow for various interpretations
+