underoos 1.0.0 → 1.1.0

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

@@ -1,144 +0,0 @@
-
-.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

@@ -1,27 +0,0 @@
-
-.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

@@ -1,169 +0,0 @@
-
-.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
-

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

@@ -1,68 +0,0 @@
-
-.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

@@ -1,64 +0,0 @@
-
-.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
-