underoos 1.0.0 → 1.1.0

data/app/views/underoos/styleguides/_components.haml

@@ -1,42 +0,0 @@
-
-#components_buttongroups.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/button-groups'
-#components_dropdowns.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/dropdowns'
-#components_tabs_pills.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/tabs-pills'
-#components_nav_lists.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/nav-lists'
-#components_breadcrumbs.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/breadcrumbs'
-#components_pagination.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/pagination'
-#components_navs_showcase.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/navs-showcase'
-#components_accordions.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/accordions'
-#components_navbars.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/navbars'
-#components_paddles.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/paddles'
-#components_modals.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/modals'
-#components_notifications.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/notifications'
-#components_decals.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/decals'
-#components_tooltips.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/tooltips'
-#components_popovers.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/popovers'
-#components_progress_bars.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/progress-bars'
-#components_carets.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/carets'
-#components_close.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/close'
-#components_wells.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/wells'
-#components_media.sg-spy-landing
-= render :partial => 'underoos/styleguides/components/media'
-

data/app/views/underoos/styleguides/_elements.haml

@@ -1,242 +0,0 @@
-
-#elements_basenav.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Base nav <span>elements.sass</span>
-  .sg-half.pull
-    %p The base nav is generally the first class in the list for components like tabs, pills, breadcrumbs, pagination and navigation lists. Use this class as a building block for custom navigation systems.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <ol class="nav">
-              <li><a href="#">Nav 1</a></li>
-              <li><a href="#">Nav 2</a></li>
-              <li class="active"><a href="#">Active</a></li>
-              <li><a href="#">Nav 4</a></li>
-            </ul>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav
-            %ol.nav
-              %li
-                %a(href="#") Nav 1
-              %li
-                %a(href="#") Nav 2
-              %li.active
-                %a(href="#") Active
-              %li
-                %a(href="#") Nav 4
-  .sg-half.push
-    .well
-      %nav
-        %ol.nav
-          %li
-            %a(href="#") Nav 1
-          %li
-            %a(href="#") Nav 2
-          %li.active
-            %a(href="#") Active
-          %li
-            %a(href="#") Nav 4
-    .well
-      %nav
-        %ol.nav.inline
-          %li
-            %a(href="#") Nav 1
-          %li
-            %a(href="#") Nav 2
-          %li.active
-            %a(href="#") Active
-          %li
-            %a(href="#") Nav 4
-.sg-subsection
-  .sg-half.pull
-    .notification.warning.fade.in
-      %p <strong>Warning!</strong> All navigation components depend on this class being attached to the container element
-  .sg-half.push
-    .notification.important.fade.in
-      %p <strong>Note!</strong> For convenience, add the <code>inline</code> class to the <code>.nav</code> element to display the base nav as, well inline
-
-#elements_buttons.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Buttons <span>elements.sass, button-btn-mixin.sass</span>
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Button
-        %th Class
-        %th Description
-    %tbody
-      %tr
-        %td <button class="btn">Default</button>
-        %td <code>.btn</code>
-        %td The default button is typically used in forms
-      %tr
-        %td <button class="btn info">Info</button>
-        %td <code>.btn.info</code>
-        %td The info button is an alternate to the default button
-      %tr
-        %td <button class="btn important">Important</button>
-        %td <code>.btn.important</code>
-        %td The important button is used to showcase a primary action
-      %tr
-        %td <button class="btn success">Success</button>
-        %td <code>.btn.success</code>
-        %td The success button indicates a successful or positive action
-      %tr
-        %td <button class="btn warning">Warning</button>
-        %td <code>.btn.warning</code>
-        %td The warning button indicates caution should be taken with this action
-      %tr
-        %td <button class="btn danger">Danger</button>
-        %td <code>.btn.danger</code>
-        %td The danger button indicates a dangerous or potentially negative action
-      %tr
-        %td <button class="btn primary">Primary</button>
-        %td <code>.btn.primary</code>
-        %td The primary button is based off of the CI settings within the application
-.sg-subsection
-  .sg-half.pull
-    %h4 About these buttons
-    %p As a convention, buttons should only be used for actions while hyperlinks are to be used for objects. For instance, "Download" should be a button while "recent activity" should be a link.
-    %br
-    %p Button styles can be applied to anything with the <code>.btn</code> class. Typically you'll want to apply these to only <code>&lt;a&gt;</code> and <code>&lt;button&gt;</code> elements or <code>input</code> button elements.
-  .sg-half.push
-    %h4 The structure
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <button class="btn">Default</button>
-          <button class="btn important">Important</button>
-
-          <a class="btn">Default</a>
-          <a class="btn important">Important</a>
-
-          <input class="btn" type="submit" value="Submit"></input>
-          <input class="btn" type="reset" value="Reset"></input>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %button.btn Default
-          %button.btn.important Important
-
-          %a.btn Default
-          %a.btn.important Important
-
-          %input.btn(type="submit" value="Submit")
-          %input.btn(type="reset" value="Reset")
-.sg-subsection(style="margin-top:2.5em")
-  .sg-half.pull
-    %h4 Links render different
-    %p <code>a</code> elements have <code>font-style:bold</code>
-    %br
-    .well
-      %button.btn(href="#") Button
-      %a.btn(href="#") Link
-      %button.btn.primary(href="#") Button
-      %a.btn.primary(href="#") Link
-      %input.submit.btn(name="submit" type="submit" value="Input Submit")
-      %input.reset.btn.primary(name="reset" type="reset" value="Input Reset")
-
-    %br
-    %h4 Sizing
-    %p Add either <code>.small</code> or <code>.large</code> class to change the size
-    %br
-    .well
-      %button.btn.small(href="#") Small
-      %button.btn.large(href="#") Large
-      %button.btn.primary.small(href="#") Small
-      %button.btn.primary.large(href="#") Large
-
-  .sg-half.push
-    %h4 Disabled states
-    %p Add the <code>.disabled</code> class or <code>:disabled</code> attribute
-    %br
-    .well
-      %button.btn(href="#" disabled) Button
-      %a.btn.disabled(href="#") Link
-      %button.btn.primary(href="#" disabled) Button
-      %a.btn.primary.disabled(href="#") Link
-
-    %br
-    %h4 Error states
-    %p Applied by adding the <code>.error</code> class
-    %br
-    .well
-      %button.btn.error(href="#") Button
-      %a.btn.error(href="#") Link
-      %button.btn.primary.error(href="#") Button
-      %a.btn.primary.error(href="#") Link
-
-
-
-#elements_images.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Images <span>elements.sass</span>
-  .sg-half.pull
-    %h4 Standard image element
-    %p Images by default have the style setting of <code>max-width:100%</code> applied to allow scaling in a fluid grid.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <img src="http://placehold.it/160x90" alt="image"/>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %img(src="http://placehold.it/160x90" alt="image")
-  .sg-half.push
-    .well
-      %img(src="http://placehold.it/160x90" alt="image")
-.sg-subsection
-  .sg-half.pull
-    %h4 The figure element
-    %p The <code>figure</code> element represents self-contained content, frequently with a <code>figcaption</code>. Typically used with images, illustrations, diagrams, or code snippets, referenced in the main text.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <figure>
-            <img src="http://placehold.it/160x90" alt="image"/>
-            <figcaption>caption</figcaption>
-          </figure>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %figure
-            %img(src="http://placehold.it/160x90" alt="image")
-            %figcaption>caption
-  .sg-half.push
-    %br
-    .well
-      %figure
-        %img(src="http://placehold.it/160x90" alt="image")
-        %figcaption <small>placehold.it</small>
-
-
-#elements_video.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Video <span>elements.sass</span>
-  .sg-half.pull
-    %p Standard video, controls, and poster image utilizing the <code>video</code> tag. Nothing special is done to the <code>video</code> element, just make sure to include a poster image and the appropriate sources!
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <video controls="" poster="...">
-            <source src="video.mp4" type="video/mp4; codecs=\"...\"">
-            <source src="video.ogv" type="video/ogg; codecs=\"...\"">
-          </video>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %video(controls="" poster="...")
-            %source(src="video.mp4" type="video/mp4; codecs=\"...\"")
-            %source(src="video.ogv" type="video/ogg; codecs=\"...\"")
-    .notification.important.fade.in
-      %p <strong>Note!</strong> More information on the <a href="http://dochub.io/#html/video">video element</a>.
-  .sg-half.push
-    .well
-      %video(controls="" poster="http://placehold.it/320x180&text=Poster")
-        %source(src="/path/to/myvideo.mp4" type="video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"")
-        %source(src="/path/to/myvideo.ogv" type="video/ogg; codecs=\"theora, vorbis\"")
-

data/app/views/underoos/styleguides/_forms.haml

@@ -1,305 +0,0 @@
-
-#forms_type.sg-spy-landing
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Name
-        %th Class
-        %th Description
-    %tfoot
-      %tr
-        %td(colspan="3") Apply the class directly on the <code>form</code> element
-    %tbody
-      %tr
-        %td
-          %strong Vertical
-        %td(style="color: #999;") <em>not required</em>
-        %td Stacked label, controls and hints
-      %tr
-        %td
-          %strong Horizontal
-        %td <code>.form-horizontal</code>
-        %td Labels and controls on the same line, stacked hints
-      %tr
-        %td
-          %strong Inline
-        %td <code>.form-inline</code>
-        %td All controls on the same line
-      %tr
-        %td
-          %strong Search
-        %td <code>.form-search</code>
-        %td Similar to inline, but targets a search field
-
-#forms_example.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Example forms <span>forms.sass</span>
-  .sg-quarter.pull
-    %h4 Basic form
-    %p Small sample of form control elements using the default layout.
-  .sg-threequarter.push
-    %form.well.dark
-      %ol
-        %li
-          %label.label(for="example_url") Domain Name<abbr title="required">*</abbr>
-          %input.input-medium(id="example_url" type="url" name="example[url]" placeholder="www.example.com")
-          %p.hint Enter your domain name!
-        %li.boolean
-          %label(for="example_check" name="example[check]")
-            %input(id="example_check" name="example[check]" type="checkbox" value="0")
-            Check this box!
-        %li.form-actions.dark
-          %button.btn(type="submit") Submit
-
-.sg-subsection
-  .sg-quarter.pull
-    %h4 Search form
-    %p Add the class <code>search-query</code> to input elements for rounded corners.
-  .sg-threequarter.push
-    %form.form-search.well.dark
-      %ol
-        %li
-          %input.search-query.input-small(type="search" name="test[search]" placeholder="google")
-          %button.btn(type="submit") Search
-
-.sg-subsection
-  .sg-quarter.pull
-    %h4 Inline form
-    %p Use the inline form for small forms needing a compact style.
-  .sg-threequarter.push
-    %form.form-inline.well.dark
-      %ol
-        %li
-          %input.input-small(type="email" name="test[email]" placeholder="email")
-          %input.input-small(type="password" name="test[password]" placeholder="password")
-          %button.btn(type="submit") Go
-
-#forms_vertical.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Vertical form
-  %form
-    = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "vert_", :legend => 'I am Legend', :state => "", :disabled => "", :dark => ""}
-
-#forms_horizontal.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Horizontal form
-  %form.form-horizontal.well.dark
-    = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "horz_", :legend => 'Legend, starring Tom Cruise', :state => "", :disabled => "", :dark => "dark"}
-  .notification.important.fade.in
-    %p <strong>Tip!</strong> Add one of the <code>.well</code> classes to the <code>form</code> element to contain it from other items on the page
-
-#forms_structure.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Form structure
-  %p Forms are built around the structure output from <a href="https://github.com/justinfrench/formtastic">formtastic</a>.
-  %pre.prettyprint.html
-    = preserve do
-      :escaped
-        <form class="form-horizontal well dark">
-          <ol>
-            <li>
-              <label class="label" for="example_url">Domain Name<abbr title="required">*</abbr></label>
-              <input class="input-medium" id="example_url" name="example[url]" placeholder="www.example.com" type="url">
-              <p class="hint">Enter your domain name!</p>
-            </li>
-            <li class="boolean">
-              <label for="example_check" name="example[check]">
-                <input id="example_check" name="example[check]" type="checkbox" value="0">
-                Check this box!
-              </label>
-            </li>
-            <li class="form-actions dark">
-              <button class="btn" type="submit">Submit</button>
-            </li>
-          </ol>
-        </form>
-  %pre.haml.hidden
-    = preserve do
-      :escaped
-        %form.form-horizontal.well.dark
-          %ol
-            %li
-              %label.label(for="example_url")
-                Domain Name
-                %abbr(title="required") *
-              %input#example_url.input-medium(name="example[url]" placeholder="www.example.com" type="url")
-              %p.hint Enter your domain name!
-            %li.boolean
-              %label(for="example_check" name="example[check]")
-                %input#example_check(name="example[check]" type="checkbox" value="0") Check this box!
-            %li.form-actions dark
-              %button.btn(type="submit") Submit
-
-#forms_state.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Form states
-  .sg-half.pull
-    %form.form-horizontal.well
-      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "disabled_", :legend => 'Disabled states', :state => "", :disabled => "disabled", :dark => ""}
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add <code>.disable</code> to the <code>li</code> and a <code>disable</code> attribute to form controls
-  .sg-half.push
-    %form.form-horizontal.well
-      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "errors_", :legend => 'Error states', :state => "error", :disabled => "", :dark => ""}
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add the <code>.error</code> class to the <code>li</code> for the problem element
-
-.sg-subsection
-  .sg-half.pull
-    %form.form-horizontal.well
-      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "warn_", :legend => 'Warning states', :state => "warning", :disabled => "", :dark => ""}
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add the <code>.warning</code> class to the <code>li</code> for the problem element
-  .sg-half.push
-    %form.form-horizontal.well
-      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "success_", :legend => 'Success states', :state => "success", :disabled => "", :dark => ""}
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add the <code>.success</code> class to the <code>li</code> for the winning element
-
-#forms_inputs.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Additional input controls
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Control
-        %th Type
-        %th Description
-    %tfoot
-      %tr
-        %td(colspan="3") Descriptions courtesy <a href="https://developer.mozilla.org">Mozilla Developer Network</a>
-    %tbody
-      %tr
-        %td
-          %input.input-xlarge(type="email" name="email" placeholder="name@example.com")
-        %td <code>email</code>
-        %td Text field for editing an e-mail address, <code>:valid</code> and <code>:invalid</code> pseudo-classes are applied
-      %tr
-        %td
-          %input.input-xlarge(type="password" name="password" placeholder="password")
-        %td <code>password</code>
-        %td A single-line text field whose value is obscured
-      %tr
-        %td
-          %input.input-xlarge(type="url" name="url" placeholder="www.example.com")
-        %td <code>url</code>
-        %td Text field for editing a URL, <code>:valid</code> and <code>:invalid</code> pseudo-classes are applied
-      %tr
-        %td
-          %input.input-xlarge(type="tel" name="tel" placeholder="303-867-5309")
-        %td <code>tel</code>
-        %td Text field for entering a telephone number, <code>:valid</code> and <code>:invalid</code> pseudo-classes are applied
-      %tr
-        %td
-          %input.input-xlarge(type="datetime" name="datetime" placeholder="2012-01-29 12:06:23:21")
-        %td <code>datetime</code>
-        %td Date and time control with the time zone set to UTC
-      %tr
-        %td
-          %input.input-xlarge(type="datetime-local" name="datetime-local" placeholder="2012-01-29 12:06:23:21")
-        %td <code>datetime-local</code>
-        %td Date and time control with no time zone
-      %tr
-        %td
-          %input.input-xlarge(type="time" name="time" placeholder="12:06:23:21")
-        %td <code>time</code>
-        %td Time control with no time zone
-      %tr
-        %td
-          %input.input-xlarge(type="date" name="date" placeholder="2012-01-29")
-        %td <code>date</code>
-        %td Date control with no time zone
-      %tr
-        %td
-          %input.input-xlarge(type="month" name="month" placeholder="2012-01")
-        %td <code>month</code>
-        %td Date control consisting of a year and a month with no time zone
-      %tr
-        %td
-          %input.input-xlarge(type="week" name="week" placeholder="42")
-        %td <code>week</code>
-        %td Date control consisting of a week-year number and a week number with no time zone
-      %tr
-        %td
-          %input.input-xlarge(type="number" name="number" placeholder="5" min="0" max="10")
-        %td <code>number</code>
-        %td Control for floating point values, add <code>min</code> and <code>max</code> attributes to create a spinner
-      %tr
-        %td
-          %input.input-xlarge(type="range" name="range" placeholder="5" min="0" max="10" step=".5")
-        %td <code>range</code>
-        %td Slider control for numbers where exact value is not important, add <code>min</code>, <code>max</code> and <code>step</code> attributes
-      %tr
-        %td
-          %input.input-xlarge(type="color" name="color" placeholder="#fff" alt="color")
-        %td <code>color</code>
-        %td A control for specifying a color
-      %tr
-        %td
-          %input.input-xlarge(type="hidden" name="hidden" placeholder="hidden")
-        %td <code>hidden</code>
-        %td A control that is not displayed, but whose value is submitted to the server
-
-#forms_typeahead.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Typeahead <span>forms.sass, dropdowns.sass</span>
-  .sg-onethird.pull
-    %p For quick auto-complete functionality, utilize the typeahead component. It's a combination of an input with a <code>data-provide="typeahead"</code> attribute and a drop down menu.
-    %br
-    %p The component requires <a href="http://twitter.github.com/bootstrap/javascript.html#typeahead">Bootstrap's typeahead plugin</a>.
-    %br
-    %p The plugin, appends a <code>ul.typeahead.dropdown-menu</code> list to the <code>body</code> element. There are no specific styles included within underoos for typeaheads as they are primarily a combination of existing components.
-  .sg-twothird.push
-    .well
-      %form
-        %ol
-          %li
-            %input.input-medium#superfriends(type="text" data-provide="typeahead" autocomplete="off" placeholder="Add Superfriends")
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <form>
-            <ol>
-              <li>
-                <input id="superfriends" data-provide="typeahead" autocomplete="off" placeholder="Add" type="text">
-              </li>
-            </ol>
-          </form>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %form
-            %ol
-              %li
-                %input#superfriends(type="text" data-provide="typeahead" autocomplete="off" placeholder="Add")
-    %pre.prettyprint
-      = preserve do
-        :escaped
-          // Instantiate the typeahead instance based off an id
-          $('#superfriends').typeahead({source:['Aquaman', 'Superman'] , items:10})
-
-    .notification.important.fade.in
-      %p <strong>Tip!</strong> Make sure to include the attribute <code>autocomplete="off"</code> to disable the browser's default behavior
-
-
-#forms_editable.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Content editable elements <span>forms.sass</span>
-  .sg-onethird.pull
-    %p Applying the attribute <code>contenteditable="true"</code> to elements allows the user to change the contents within the item. Elements that are editable typically include states for <code>hover</code> and <code>focus</code> while a user is editing.
-  .sg-twothird.push
-    .well
-      %h3(contenteditable="true") Edit Title
-      %p(contenteditable="true") Edit Description
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <h3 contenteditable="true">Edit Title</h3>
-          <p contenteditable="true">Edit Description</p>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %h3(contenteditable="true") Edit Title
-          %p(contenteditable="true") Edit Description
-