underoos 1.0.0

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

@@ -0,0 +1,37 @@
+
+.sg-subsection
+  %h3.sg-subheading Tooltips <span>tooltips.sass</span>
+  %p(style="width:50%;")
+    Tool tips utilize <a href="http://twitter.github.com/bootstrap/javascript.html#tooltips">Bootstrap's Tooltip plugin</a>. You can control various options of how a tool tip is shown based on attributes set in the link.
+    %br
+    %br
+    Styles are automatically generated based on the inverted colors of the body's <code>background-color</code> and font <code>color</code>.
+
+.sg-subsection
+  %table.box.banded.thead-decorate.tools
+    %thead
+      %tr
+        %th Position
+        %th Markup
+    %tbody
+      %tr
+        %td <a href="#" rel="tooltip" data-placement="top" data-original-title="Top">Top</a>
+        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="top" data-original-title="Top"&gt;Top&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="top" data-original-title="Top") Top</code>
+      %tr
+        %td <a href="#" rel="tooltip" data-placement="bottom" data-original-title="Bottom">Bottom</a>
+        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="bottom" data-original-title="Bottom"&gt;Bottom&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="bottom" data-original-title="Bottom") Bottom</code>
+      %tr
+        %td <a href="#" rel="tooltip" data-placement="left" data-original-title="Left">Left</a>
+        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="left" data-original-title="Left"&gt;Left&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="left" data-original-title="Left") Left</code>
+      %tr
+        %td <a href="#" rel="tooltip" data-placement="right" data-original-title="Right" data-offset="10">Right</a>
+        %td.html <code>&lt;a href="#" rel="tooltip" data-placement="right" data-original-title="Right"&gt;Right&lt;/a&gt;</code>
+        %td.haml.hidden <code>%a(href="#" rel="tooltip" data-placement="right" data-original-title="Right") Right</code>
+
+  .notification.important.fade.in
+    %p <strong>Note!</strong> Tooltips are opt in and will only be instantiated if called directly from JavaScript:
+    %code $("a[rel=tooltip]").tooltip()
+

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

@@ -0,0 +1,29 @@
+
+.sg-subsection
+  %h3.sg-subheading Wells <span>wells.sass</span>
+  .sg-half.pull
+    %p Wells are simple containers for popping elements off the page. They come in a few different flavors.
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <div class="well">...</div>
+          <div class="well lite">...</div>
+          <div class="well dark">...</div>
+          <div class="well primary">...</div>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          .well ...
+          .well.lite ...
+          .well.dark ...
+          .well.primary ...
+  .sg-half
+    .well
+      %code .well
+    .well.lite
+      %code .well.lite
+    .well.dark
+      %code .well.dark
+    .well.primary
+      %code .well.primary
+

data/app/views/underoos/styleguides/index.html.haml

@@ -0,0 +1,259 @@
+!!! 5
+%html
+  %head
+    %title underoos.
+    %meta(content="IE=edge,chrome=1" http-equiv="X-UA-Compatible")
+    %meta(content="text/html; charset=UTF-8" http-equiv="Content-Type")
+    %meta(name="description" content="")
+    %meta(name="author" content="mode set")
+    %meta(name="keywords" content="")
+    %meta(name="imagetoolbar" content="no")
+    %meta(name="viewport" content="width=device-width, initial-scale=1.0")
+    %meta(name="apple-touch-fullscreen" content="YES")
+    %meta(name="apple-mobile-web-app-capable" content="YES")
+    %meta(name="apple-mobile-web-app-status-bar-style" content="black")
+
+    <!--[if lt IE 9]>
+    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+
+    = stylesheet_link_tag 'underoos'
+    = stylesheet_link_tag 'styleguide'
+
+  %body(data-spy="scroll" data-target=".spy")
+    .navbar.fixed.sg-navbar
+      .navbar-inner
+        .container.outer
+          %a.btn.info.btn-navbar(data-toggle="collapse" data-target=".nav-collapse")
+            %span.icon-bar
+            %span.icon-bar
+            %span.icon-bar
+          %a#page_title.brand(href="/styleguide") underoos.
+          %nav.spy.nav-collapse
+            %ul.nav
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Typography<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#typography") Description
+                  %li
+                    %a(href="#type_headings") Headings
+                  %li
+                    %a(href="#type_paragraphs") Inline Paragraph Elements
+                  %li
+                    %a(href="#type_rules") Rules
+                  %li
+                    %a(href="#type_lists") Lists
+                  %li
+                    %a(href="#type_code") Code
+
+              %li
+                %a(href="#palettes") Palettes
+
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Elements<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#elements") Description
+                  %li
+                    %a(href="#elements_basenav") Base Nav
+                  %li
+                    %a(href="#elements_buttons") Buttons
+                  %li
+                    %a(href="#elements_images") Images
+                  %li
+                    %a(href="#elements_video") Video
+
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Components<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#components") Description
+                  %li
+                    %a(href="#components_buttongroups") Button Groups
+                  %li
+                    %a(href="#components_dropdowns") Dropdowns
+                  %li
+                    %a(href="#components_tabs_pills") Tabs &amp; Pills
+                  %li
+                    %a(href="#components_nav_lists") Navigation Lists
+                  %li
+                    %a(href="#components_breadcrumbs") Breadcrumbs
+                  %li
+                    %a(href="#components_pagination") Pagination
+                  %li
+                    %a(href="#components_navs_showcase") Navs Showcase
+                  %li
+                    %a(href="#components_accordions") Accordions
+                  %li
+                    %a(href="#components_navbars") Navbars
+                  %li
+                    %a(href="#components_paddles") Paddles
+                  %li
+                    %a(href="#components_modals") Modals
+                  %li
+                    %a(href="#components_notifications") Notifications
+                  %li
+                    %a(href="#components_decals") Decals
+                  %li
+                    %a(href="#components_tooltips") Tooltips
+                  %li
+                    %a(href="#components_popovers") Popovers
+                  %li
+                    %a(href="#components_progress_bars") Progress Bars
+                  %li
+                    %a(href="#components_carets") Carets
+                  %li
+                    %a(href="#components_close") Close Icons
+                  %li
+                    %a(href="#components_wells") Wells
+                  %li
+                    %a(href="#components_media") Media Grid
+              %li
+                %a(href="#tables") Tables
+
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Forms<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#forms") Description
+                  %li
+                    %a(href="#forms_type") Form Types
+                  %li
+                    %a(href="#forms_example") Example Forms
+                  %li
+                    %a(href="#forms_vertical") Vertical Form
+                  %li
+                    %a(href="#forms_horizontal") Horizontal Form
+                  %li
+                    %a(href="#forms_structure") Form Structure
+                  %li
+                    %a(href="#forms_state") Form States
+                  %li
+                    %a(href="#forms_inputs") Additional Input Controls
+                  %li
+                    %a(href="#forms_typeahead") Typeahead
+                  %li
+                    %a(href="#forms_editable") Content Editable
+
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Layouts<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#layouts") Description
+                  %li
+                    %a(href="#layouts_containers") Containers
+                  %li
+                    %a(href="#layouts_queries") Media Queries
+                  %li
+                    %a(href="#layouts_upgrades") Upgrades
+
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Assets<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#assets") Description
+                  %li
+                    %a(href="#assets_icons") Favicon &amp; Touch Icons
+                  %li
+                    %a(href="#assets_gui") UI Elements
+
+              %li.dropdown
+                %a.dropdown-toggle(href="#" data-toggle="dropdown") Utilities<span class="caret"></span>
+                %ul.dropdown-menu
+                  %li
+                    %a(href="#utilities") Description
+                  %li
+                    %a(href="#utils_helpers") Helpers
+                  %li
+                    %a(href="#utils_transitions") Transitions
+                  %li
+                    %a(href="#utils_mixins") Mixins
+                  %li
+                    %a(href="#utils_functions") Functions
+                  %li
+                    %a(href="#utils_polyfill") Polyfills
+
+
+    .container.outer
+
+      #typography.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Typography
+          %p.sg-note Heading, paragraph, lists, and inline typographic elements.
+        = render :partial => 'typography'
+
+      #palettes.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Palettes
+          %p.sg-note Various color palettes and themes used in the application. All properties are found under the themes directory
+        = render :partial => 'palettes'
+
+
+      #elements.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Elements
+          %p.sg-note Base class styles to enhance common elements found in an application.
+        = render :partial => 'elements'
+
+      #components.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Components
+          %p.sg-note Components are common patterns used in many applications but are not defined as base element tags.
+        = render :partial => 'components'
+
+      #tables.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Tables
+          %p.sg-note Tables are used to represent tabular data.
+        = render :partial => 'tables'
+
+      #forms.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Forms
+          %p.sg-note Inputs, textarea, labels, selects, and other controls associated with form elements. Tuned to play with <a href="https://github.com/justinfrench/formtastic">formtastic</a>.
+        = render :partial => 'forms'
+
+      #layouts.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Layouts
+          %p.sg-note Layouts consists of various templates that are specific to the application.
+        = render :partial => 'layouts'
+
+      #assets.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Assets
+          %p.sg-note Showcases the various assets in use by the application.
+        = render :partial => 'assets'
+
+      #utilities.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Utilities
+          %p.sg-note Various utility, helpers and miscellaneous classes, commonly used for extension.
+        = render :partial => 'utilities'
+
+
+      #resources.sg-spy-landing
+      .sg-section
+        .well.dark
+          %h2.sg-heading Resources
+          %p.sg-note References, links, credits, and various information related to the styleguide.
+        = render :partial => 'resources'
+
+    #flash_messages.flash-messages
+
+    = render :partial => 'shared/upgrades'
+
+    = javascript_include_tag 'underoos'
+    = javascript_include_tag 'prettify'
+    = javascript_include_tag 'styleguide'
+

data/app/views/underoos/styleguides/partials/_form-template.haml

@@ -0,0 +1,171 @@
+
+%fieldset
+  %legend=legend
+  %ol
+    -# Text Input
+    %li(class="#{state} #{disabled}" id="#{uid}test_text_input")
+      %label.label(for="#{uid}test_text") Text Input<abbr title="required">*</abbr>
+      - if disabled == "disabled"
+        %input.input-medium(id="#{uid}test_text" type="text" name="test[text]" placeholder="text input" disabled)
+      - else
+        %input.input-medium(id="#{uid}test_text" type="text" name="test[text]" placeholder="text input")
+      %p.hint This is a hint for the text element!
+
+    -# Block Checkboxes
+    %li.boolean(class="#{state} #{disabled}")
+      %label(for="#{uid}test_check1" name="test[check1]")
+        - if disabled == "disabled"
+          %input(id="#{uid}test_check1" name="test[check1]" type="checkbox" checked="checked" value="0" disabled)
+        - else
+          %input(id="#{uid}test_check1" name="test[check1]" type="checkbox" checked="checked" value="0")
+        Checkboxes for multiple selections
+    %li.boolean(class="#{state} #{disabled}")
+      %label(for="#{uid}test_check2" name="test[check2]")
+        - if disabled == "disabled"
+          %input(id="#{uid}test_check2" name="test[check2]" type="checkbox" value="1" disabled)
+        - else
+          %input(id="#{uid}test_check2" name="test[check2]" type="checkbox" value="1")
+        Go ahead and select this one too
+
+    -# Block Radio Group
+    %li
+      %ol.choices-group
+        %li.choice(class="#{state} #{disabled}")
+          %label(for="#{uid}test_radio1")
+            - if disabled == "disabled"
+              %input(id="#{uid}test_radio1" name="test[radio]" type="radio" value="true" disabled)
+            - else
+              %input(id="#{uid}test_radio1" name="test[radio]" type="radio" value="true")
+            Yes, to radio buttons
+        %li.choice(class="#{state} #{disabled}")
+          %label(for="#{uid}test_radio2")
+            - if disabled == "disabled"
+              %input(id="#{uid}test_radio2" name="test[radio]" type="radio" value="false" disabled)
+            - else
+              %input(id="#{uid}test_radio2" name="test[radio]" type="radio" value="false")
+            No, to radio buttons
+
+    -# Inline Checkboxes
+    %li.boolean.inline(class="#{state} #{disabled}")
+      %label(for="#{uid}test_check3" name="test[check3]")
+        - if disabled == "disabled"
+          %input(id="#{uid}test_check3" name="test[check3]" type="checkbox" checked="checked" value="0" disabled)
+        - else
+          %input(id="#{uid}test_check3" name="test[check3]" type="checkbox" checked="checked" value="0")
+        Checkbox inline 1
+    %li.boolean.inline(class="#{state} #{disabled}")
+      %label(for="#{uid}test_check4" name="test[check4]")
+        - if disabled == "disabled"
+          %input(id="#{uid}test_check4" name="test[check4]" type="checkbox" value="1" disabled)
+        - else
+          %input(id="#{uid}test_check4" name="test[check4]" type="checkbox" value="1")
+        Checkbox inline 2
+
+    -# Inline Radio Group
+    %li
+      %ol.choices-group
+        %li.choice.inline(class="#{state} #{disabled}")
+          %label(for="#{uid}test_radio3")
+            - if disabled == "disabled"
+              %input(id="#{uid}test_radio3" name="test[radio]" type="radio" value="true" disabled)
+            - else
+              %input(id="#{uid}test_radio3" name="test[radio]" type="radio" value="true")
+            Yes, radio inline
+        %li.choice.inline(class="#{state} #{disabled}")
+          %label(for="#{uid}test_radio4")
+            - if disabled == "disabled"
+              %input(id="#{uid}test_radio4" name="test[radio]" type="radio" value="false" disabled)
+            - else
+              %input(id="#{uid}test_radio4" name="test[radio]" type="radio" value="false")
+            No, radio inline
+
+    -# Select
+    %li(id="#{uid}test_select_input" class="#{state} #{disabled}")
+      %label.label(for="#{uid}test_select") Select
+      - if disabled == "disabled"
+        %select.input-medium(id="#{uid}test_select" name="test[select]" disabled)
+          %optgroup(label="Colorado")
+            %option(value="denver" selected="selected") Denver
+            %option(value="boulder") Boulder
+          %optgroup(label="California")
+            %option(value="los angeles") Los Angeles
+            %option(value="san francisco") San Francisco
+      - else
+        %select.input-medium(id="#{uid}test_select" name="test[select]")
+          %optgroup(label="Colorado")
+            %option(value="denver" selected="selected") Denver
+            %option(value="boulder") Boulder
+          %optgroup(label="California")
+            %option(value="los angeles") Los Angeles
+            %option(value="san francisco") San Francisco
+
+    -# Multi Select
+    %li(id="#{uid}test_multi_input" class="#{state} #{disabled}")
+      %label.label(for="#{uid}test_multi") Multi
+      - if disabled == "disabled"
+        %select.input-medium(id="#{uid}test_multi" name="test[multi]" multiple disabled)
+          %option(value="1") One
+          %option(value="2" selected="selected") Two
+          %option(value="3") Three
+          %option(value="4") Four
+          %option(value="5") Five
+      - else
+        %select.input-medium(id="#{uid}test_multi" name="test[multi]" multiple)
+          %option(value="1") One
+          %option(value="2" selected="selected") Two
+          %option(value="3") Three
+          %option(value="4") Four
+          %option(value="5") Five
+
+    -# Text Area
+    %li(id="#{uid}test_textarea_textarea.optional" class="#{state} #{disabled}")
+      %label.label(for="#{uid}test_textarea") Text Area
+      - if disabled == "disabled"
+        %textarea.input-medium(id="#{uid}test_textarea" name="test[textarea]" placeholder="Enter some text..." rows="2" disabled)
+      - else
+        %textarea.input-medium(id="#{uid}test_textarea" name="test[textarea]" placeholder="Enter some text..." rows="2")
+
+    -# Uneditable Text Input
+    %li(class="#{state} #{disabled}" id="#{uid}test_uneditable")
+      %label.label(for="#{uid}test_uneditable") Uneditable Input
+      - if disabled == "disabled"
+        %span.input-medium.uneditable(id="#{uid}test_uneditable" class="disabled") Hammer time
+      - else
+        %span.input-medium.uneditable(id="#{uid}test_uneditable") Hammer time
+      %p.hint Can't touch this!
+
+    -# File Browser
+    %li.commit.button(class="#{state} #{disabled}")
+      %label.label(for="#{uid}test_file") File Browser
+      - if disabled == "disabled"
+        %input.file(id="#{uid}test_file" name="file" type="file" value="file" disabled)
+      - else
+        %input.file(id="#{uid}test_file" name="file" type="file" value="file")
+
+    -# Action Group
+    %li
+      %ol.form-actions(class="#{dark}")
+        %li.commit.button(class="#{state} #{disabled}")
+          - if disabled == "disabled"
+            %input.submit.btn(name="submit" type="submit" value="Submit" disabled)
+          - else
+            %input.submit.btn(name="submit" type="submit" value="Submit")
+
+        %li.commit.button(class="#{state} #{disabled}")
+          - if disabled == "disabled"
+            %input.reset.btn(name="reset" type="reset" value="Reset" disabled)
+          - else
+            %input.reset.btn(name="reset" type="reset" value="Reset")
+
+        %li.commit.button(class="#{state} #{disabled}")
+          - if disabled == "disabled"
+            %input.button.btn(name="button" type="button" value="Button" disabled)
+          - else
+            %input.button.btn(name="button" type="button" value="Button")
+
+        %li.commit.button(class="#{state} #{disabled}")
+          - if disabled == "disabled"
+            %input.image(name="image" type="image" src="http://placehold.it/68x28&text=IMG" value="Image" disabled)
+          - else
+            %input.image(name="image" type="image" src="http://placehold.it/68x28&text=IMG" value="Image")
+