underoos 1.0.0 → 1.1.0

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

@@ -1,270 +0,0 @@
-
-#utils_helpers.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Helpers <span>helpers.sass</span>
-  %table.box.vborder.banded.thead-decorate
-    %thead
-      %tr
-        %th Class
-        %th Usage
-    %tfoot
-      %tr
-        %td(colspan="2") All helper classes (except <code>.pull-left|right</code>) are also available as mixins
-    %tbody
-      %tr
-        %td <code>.clearfixer</code>
-        %td The <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> from Nicolas Gallagher
-      %tr
-        %td <code>.clearfix</code>
-        %td The standard clearfix from <a href="http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-clearfix">Compass</a>, utilizing <code>overflow hidden</code>
-      %tr
-        %td <code>.ir</code>
-        %td For use in image replacement, typically on links
-      %tr
-        %td <code>.hidden</code>
-        %td The opposite of <code>shown</code>, elements are completely hidden from screen readers and browsers
-      %tr
-        %td <code>.shown</code>
-        %td Reverse the effects of <code>hidden</code>
-      %tr
-        %td <code>.visuallyhidden</code>
-        %td Only visually hidden, elements are still available to screen readers, use this class instead of <code>display:none</code>
-      %tr
-        %td <code>.visuallyshown</code>
-        %td Reverse the effects of <code>.visuallyhidden</code>
-      %tr
-        %td <code>.invisible</code>
-        %td Keeps elements in the DOM, but hidden from view and screen readers
-      %tr
-        %td <code>.base-column</code>
-        %td For use by extension for <code>column</code> classes
-      %tr
-        %td <code>.base-column-right</code>
-        %td For use by extension for <code>column</code> classes, floats elements to the right
-      %tr
-        %td <code>.base-row</code>
-        %td For use by extension for <code>row</code> classes
-      %tr
-        %td <code>.pull-left</code>
-        %td Floats an element to the left (<em>Gabe, your welcome</em>)
-      %tr
-        %td <code>.pull-right</code>
-        %td Floats an element to the right (<em>may be renamed to: </em><code>.varela</code>)
-  .notification.important.fade.in
-    %p <strong>Pro Tip!</strong> When using <code>visuallyhidden</code> and <code>visuallyshown</code> with <code>box-shadow</code>, you'll need to add <code>clip:initial</code> to get the shadows to reappear
-
-#utils_transitions.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Transitions <span>transitions.sass</span>
-  %table.box.vborder.banded.thead-decorate
-    %thead
-      %tr
-        %th Class
-        %th Usage
-    %tbody
-      %tr
-        %td <code>.fade</code>
-        %td Transitions an element to an <code>opacity</code> of <code>0</code>
-      %tr
-        %td <code>.fade.in</code>
-        %td Transitions an element to an <code>opacity</code> of <code>1</code>
-      %tr
-        %td <code>.collapse</code>
-        %td Transitions an element to a <code>height</code> of <code>0</code>
-      %tr
-        %td <code>.collapse.in</code>
-        %td Transitions an element to a <code>height</code> of <code>auto</code>
-
-.sg-subsection
-  %h3.sg-subheading Timing Equations <span>mixins/timing-equations.sass</span>
-  %p Underoos comes packed with a number of cubic-bezier timing properties for use with <code>transition-timing-function</code>. The timing functions are based on the properties included with <a href="http://thoughtbot.com/bourbon/">Bourbon</a>, which are courtesy of <a href="github.com/jaukia/easie">jquery.easie</a>.
-  .notification.important.fade.in
-    %p <strong>Pro Tip!</strong> Hover over the table below to see the results of each cubic-bezier function.
-.sg-subsection
-  = render :partial => 'underoos/styleguides/partials/transitions'
-
-#utils_mixins.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Mixins <span>mixins/*.sass</span>
-  %table.box.vborder.banded.thead-decorate
-    %thead
-      %tr
-        %th Mixin
-        %th Parameters
-        %th Usage
-    %tbody
-      %tr
-        %td <code>+arrow_[north|south|east|west]</code>
-        %td <code>$color:#000, $size:5px</code>
-        %td Draws a directional arrow, typically used for pseudo elements
-      %tr
-        %td <code>+clearfixer</code>
-        %td(style="color: #999;") <em>none</em>
-        %td The <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> from Nicolas Gallagher
-      %tr
-        %td <code>+clearfix</code>
-        %td(style="color: #999;") <em>none</em>
-        %td The standard clearfix from <a href="http://compass-style.org/reference/compass/utilities/general/clearfix/#mixin-clearfix">Compass</a>, utilizing <code>overflow hidden</code>
-      %tr
-        %td <code>+background-darken-border</code>
-        %td <code>$color, $percentage:20%</code>
-        %td Fill a background and stroke a border with a darkened percentage
-      %tr
-        %td <code>+font-size</code>
-        %td <code>$target_px, $context:$context_px</code>
-        %td Inject <code>font-size</code> for <code>px</code> and <code>rem</code>: <a href="http://snook.ca/archives/html_and_css/font-size-with-rem">more info</a>
-      %tr
-        %td <code>+sharpen-image</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Sharpen an image due to up/down scaling: <a href="http://stitchcss.com/#sharpen_image">stitchcss</a>
-      %tr
-        %td <code>+high-quality-image</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Improve rendering quality on an image: <a href="http://stitchcss.com/#high_quality_image">stitchcss</a>
-      %tr
-        %td <code>+low-quality-image</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Decrease rendering quality in favor of speed: <a href="http://stitchcss.com/#low_quality_image">stitchcss</a>
-      %tr
-        %td <code>+ir</code>
-        %td(style="color: #999;") <em>none</em>
-        %td For use in image replacement, typically on links
-      %tr
-        %td <code>+hidden</code>
-        %td(style="color: #999;") <em>none</em>
-        %td The opposite of <code>shown</code>, elements are completely hidden from screen readers and browsers
-      %tr
-        %td <code>+shown</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Reverse the effects of <code>hidden</code>
-      %tr
-        %td <code>+visuallyhidden</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Only visually hidden, elements are still available to screen readers, use this instead of <code>display:none</code>
-      %tr
-        %td <code>+visuallyshown</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Reverse the effects of <code>visuallyhidden</code>
-      %tr
-        %td <code>+invisible</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Keeps elements in the DOM, but hidden from view and screen readers
-      %tr
-        %td <code>+base-column</code>
-        %td(style="color: #999;") <em>none</em>
-        %td For use by <code>column</code> classes
-      %tr
-        %td <code>+base-column-right</code>
-        %td(style="color: #999;") <em>none</em>
-        %td For use by <code>column</code> classes, floats elements to the right
-      %tr
-        %td <code>+base-row</code>
-        %td(style="color: #999;") <em>none</em>
-        %td For use by <code>row</code> classes
-      %tr
-        %td <code>+tab-focus</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Resets default outlines for webkit on focusable elements
-
-  .notification.important.fade.in
-    %p <strong>Pro Tip!</strong> See the Helpers section for classes using these mixins which can be used for extension
-
-#utils_functions.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Functions <span>mixins/conversions.sass</span>
-  %table.box.vborder.banded.thead-decorate
-    %thead
-      %tr
-        %th Function
-        %th Parameters
-        %th Usage
-    %tfoot
-      %tr
-        %td(colspan="3") All functions return a value
-    %tbody
-      %tr
-        %td <code>to_em</code>
-        %td <code>$target_px, $context:$base_font_size</code>
-        %td Convert target <code>px</code> value to <code>em</code> in context constraints of the base font size
-      %tr
-        %td <code>to_rem</code>
-        %td <code>$target_px, $context:$context_px</code>
-        %td Convert target <code>px</code> value to <code>rem</code> in context constraints of the user's base font size
-      %tr
-        %td <code>to_percent</code>
-        %td <code>$target_px, $context:$base_width</code>
-        %td Convert target <code>px</code> value to <code>percentage</code> in context constraints of the container's width
-      %tr
-        %td <code>vertical_pixel</code>
-        %td <code>$target_px</code>
-        %td Returns the vertical rhythm in <code>px</code> calculated from the <code>$base_vertical</code> setting
-      %tr
-        %td <code>vertical_em</code>
-        %td <code>$target_px</code>
-        %td Returns the vertical rhythm in <code>em</code> calculated from the <code>$base_vertical</code> setting
-      %tr
-        %td <code>vertical_percent</code>
-        %td <code>$target_px</code>
-        %td Returns the vertical rhythm in <code>percent</code> calculated from the <code>$base_vertical</code> setting
-  .notification.warning.fade.in
-    %p <strong>Warning!</strong> Define <code>$context_px</code>, <code>$base_font_size</code>, <code>$base_width</code> and <code>$base_vertical</code> prior to the functions being loaded.
-  .notification.important.fade.in
-    %p <strong>Important!</strong> When calculating vertical rhythm, always pass in what the expected pixel value is for the element.
-
-#utils_polyfill.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Polyfills <span>polyfill/*.sass</span>
-  %p Most projects benefit greatly from using a library like <a href="http://compass-style.org/">Compass</a> or <a href="http://thoughtbot.com/bourbon/">Bourbon</a>. Underoos is not designed to replace these libraries, but rather sit on top of them. There may be times when using one of these libraries isn't an option, so Underoos provides a few simple polyfill mixins in it's place.
-  %table.box.vborder.banded.thead-decorate
-    %thead
-      %tr
-        %th Mixin
-        %th Parameters
-        %th Usage
-    %tfoot
-      %tr
-        %td(colspan="3") The mixins above provided by either Compass, Bourbon or the polyfills are all interchangeable to allow Underoos to be as agnostic as possible.
-    %tbody
-      %tr
-        %td <code>+border-radius</code>
-        %td <code>$radii</code>
-        %td Draws rounded corners on an element (also includes mixins for individual corners and sides)
-      %tr
-        %td <code>+box-shadow</code>
-        %td <code>$shadow-1:none, $shadow-n:false, ...</code>
-        %td Draws an outer or inset shadow around an element (supports up to 9 shadow parameters)
-      %tr
-        %td <code>+box-sizing</code>
-        %td <code>$type:border-box</code>
-        %td Changes the box model used for calculating an elements width and height
-      %tr
-        %td <code>+box-sizing</code>
-        %td <code>$type:border-box</code>
-        %td Changes the box model used for calculating an elements width and height
-      %tr
-        %td <code>+inline-block</code>
-        %td(style="color: #999;") <em>none</em>
-        %td Adds support for <code>display:inline-block</code> down to IE7
-      %tr
-        %td <code>+opacity</code>
-        %td <code>$alpha:1</code>
-        %td Provides cross browser opacity, values are between<code>0-1</code>
-      %tr
-        %td <code>+transition</code>
-        %td <code>$transition-1:all 0.25s, $transition-n:false, ...</code>
-        %td Adds vendor prefixes for transitions (supports up to 9 transition parameters)
-      %tr
-        %td <code>+user-select</code>
-        %td <code>$type:none</code>
-        %td Define whether an element is selectable
-      %tr
-        %td <code>combine</code>
-        %td <code>$value-1:none, $value-n:false, ...</code>
-        %td A function used to <em>combine</em> and normalize multiple parameters for a polyfill (supports up to 9 values)
-  .notification.important.fade.in
-    %p <strong>Pro Tip!</strong> To include all polyfills in a project: <code>@import polyfills/polyfills</code>
-  .notification.warning.fade.in
-    %p <strong>Warning!</strong> The <code>combine</code> function for mixin values only accepts 9 values, this is inline with the Bourbon library (Compass supports 10!)
-  .notification.danger.fade.in
-    %p <strong>Danger!</strong> If a project uses Compass or Bourbon, make sure not to import these polyfills
-

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

@@ -1,83 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Accordions <span>accordions.sass</span>
-  %p(style="width:67%;") The accordion navigation system requires <a href="http://twitter.github.com/bootstrap/javascript.html#collapse">Bootstrap's Collapse plugin</a>. They're used typically in navigation systems to toggle and reveal sections of content.
-  %br
-  %p(style="width:67%;") Accordions support multiple open sections or just single sections based on the <code>data</code> attributes set within the links.
-
-.sg-subsection
-  %nav
-    %ul#accordion_example
-      %li.accordion-group
-        %a.accordion-toggle(href="#collapse_1" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 1
-        %section.collapse#collapse_1
-          %article.accordion-inner
-            %p=@lorem
-      %li.accordion-group
-        %a.accordion-toggle(href="#collapse_2" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 2
-        %section.collapse#collapse_2
-          %article.accordion-inner
-            %p=@lorem
-      %li.accordion-group
-        %a.accordion-toggle(href="#collapse_3" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 3
-        %section.collapse#collapse_3
-          %article.accordion-inner
-            %p=@lorem
-
-
-.sg-subsection
-  %pre.prettyprint.html
-    = preserve do
-      :escaped
-        <nav>
-          <ul id="accordion_example">
-            <li class="accordion-group">
-              <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_1">Accordion Group 1</a>
-              <section class="collapse" id="collapse_1"">
-                <article class="accordion-inner">
-                  <p>...</p>
-                </article>
-              </section>
-            </li>
-            <li class="accordion-group">
-              <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_2">Accordion Group 2</a>
-              <section class="collapse" id="collapse_2"">
-                <article class="accordion-inner">
-                  <p>...</p>
-                </article>
-              </section>
-            </li>
-            <li class="accordion-group">
-              <a class="accordion-toggle" data-parent="#accordion_example" data-toggle="collapse" href="#collapse_3">Accordion Group 3</a>
-              <section class="collapse" id="collapse_3"">
-                <article class="accordion-inner">
-                  <p>...</p>
-                </article>
-              </section>
-            </li>
-          </ul>
-        </nav>
-  %pre.prettyprint.haml.hidden
-    = preserve do
-      :escaped
-        %nav
-          %ul#accordion_example
-            %li.accordion-group
-              %a.accordion-toggle(href="#collapse_1" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 1
-              %section.collapse#collapse_1
-                %article.accordion-inner
-                  %p ...
-            %li.accordion-group
-              %a.accordion-toggle(href="#collapse_2" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 2
-              %section.collapse#collapse_2
-                %article.accordion-inner
-                  %p ...
-            %li.accordion-group
-              %a.accordion-toggle(href="#collapse_3" data-toggle="collapse" data-parent="#accordion_example") Accordion Group 3
-              %section.collapse#collapse_3
-                %article.accordion-inner
-                  %p ...
-
-  .notification.important.fade.in
-    %p <strong>Note!</strong> Remove the <code>data-parent</code> attribute from the links to have multiple sections open at the same time
-

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

@@ -1,42 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Breadcrumbs <span>breadcrumbs.sass</span>
-  .sg-onethird.pull
-    %p Apply the <code>.breadcrumb</code> class to the <code>ol</code> or <code>ul</code> element to provide linkable references to nested sections within the application.
-  .sg-twothird.push
-    .well
-      %nav
-        %ol.nav.breadcrumb
-          %li
-            %a(href="#") Level 1
-          %li
-            %a(href="#") Level 2
-          %li
-            %a(href="#") Level 3
-          %li.active
-            %a(href="#") Active Level
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav>
-            <ol class="nav breadcrumb">
-              <li><a href="#">Level 1</a></li>
-              <li><a href="#">Level 2</a></li>
-              <li><a href="#">Level 3</a></li>
-              <li class="active"><a href="#">Active</a></li>
-            </ol>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav
-            %ol.nav.breadcrumb
-              %li
-                %a(href="#") Level 1
-              %li
-                %a(href="#") Level 2
-              %li
-                %a(href="#") Level 3
-              %li.active
-                %a(href="#") Active
-

data/app/views/underoos/styleguides/components/_button-groups.haml

@@ -1,162 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Button Groups <span>button-groups.sass</span>
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Button group
-    %p Button groups are used to join multiple buttons together as one composite component.
-  .sg-twothird.push
-    .well
-      %nav.button-group(data-toggle="buttons-checkbox")
-        %a.btn.primary(href="#") Left
-        %a.btn.primary.active(href="#") Middle 1
-        %a.btn.primary(href="#") Middle 2
-        %a.btn.primary(href="#") Right
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <nav class="button-group">
-            <a class="btn" href="#">Left</a>
-            <a class="btn active" href="#">Middle 1</a>
-            <a class="btn" href="#">Middle 2</a>
-            <a class="btn" href="#">Right</a>
-          </nav>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %nav.button-group
-            %a.btn(href="#") Left
-            %a.btn.active(href="#") Middle 1
-            %a.btn(href="#") Middle 2
-            %a.btn(href="#") Right
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Button toolbar
-    %p Combine multiple <code>.button-group</code> elements under a <code>.button-toolbar</code> container to form navigation system.
-  .sg-twothird.push
-    .well
-      %section.button-toolbar
-        %nav.button-group
-          %a.btn(href="#") 1
-          %a.btn(href="#") 2
-          %a.btn(href="#") 3
-        %nav.button-group
-          %a.btn(href="#") 4
-          %a.btn.active(href="#") 5
-          %a.btn(href="#") 6
-        %nav.button-group
-          %a.btn(href="#") 7
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <section class="button-toolbar">
-            <nav class="button-group">
-              ...
-            </nav>
-            <nav class="button-group">
-              ...
-            </nav>
-            <nav class="button-group">
-              ...
-            </nav>
-          </section>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %section.button-toolbar
-            %nav.button-group
-              ...
-            %nav.button-group
-              ...
-            %nav.button-group
-              ...
-    .notification.important.fade.in
-      %p <strong>Note!</strong> When creating custom buttons, add the necessary overrides within <code>_button-groups.sass</code>
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Button states
-    %p Control a button state or entire button groups state using Bootstrap's <a href="http://twitter.github.com/bootstrap/javascript.html#buttons">button plugin</a>.
-    %br
-    %p A stateful button can be used for tasks like submitting a form. It disables a button and waits for a callback to either <code>reset</code> or populate the button's text with the value found in the attribute for <code>data-complete-text</code>.
-    %br
-    %pre.prettyprint
-      = preserve do
-        :escaped
-          $('#btn').on('click', function(e) {
-            var btn = $(this)
-            btn.button('loading')
-            setTimeout(function() {
-            // set text to data-complete-text
-             btn.button('complete')
-            // reset text to original value
-            // btn.button('reset')
-            }, 3000)
-          })
-  .sg-twothird.push
-    %table.box.banded.thead-decorate
-      %thead
-        %tr
-          %th State
-          %th Usage
-      %tbody
-        %tr
-          %td
-            %button.btn.primary(data-toggle="button") Toggle
-          %td Toggles active state on a single button
-        %tr
-          %td
-            %nav.button-group(data-toggle="buttons-checkbox")
-              %a.btn.primary(href="#") 1
-              %a.btn.primary(href="#") 2
-              %a.btn.primary(href="#") 3
-          %td Treats button group states similar to checkboxes
-        %tr
-          %td
-            %nav.button-group(data-toggle="buttons-radio")
-              %a.btn.primary(href="#") 4
-              %a.btn.primary(href="#") 5
-              %a.btn.primary(href="#") 6
-          %td Treats button group states similar to radio buttons
-        %tr
-          %td
-            %button#loader_btn.btn.primary(data-loading-text="sending..." data-complete-text="Sent") Send
-          %td Disables a button as information is being sent, resets on callback
-
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <!-- Toggle -->
-          <button class="btn" data-toggle="button">Toggle</button>
-
-          <!-- Checkbox type button group -->
-          <nav class="button-group" data-toggle="buttons-checkbox">
-            ...
-          </nav>
-
-          <!-- Radio type button group -->
-          <nav class="button-group" data-toggle="buttons-radio">
-            ...
-          </nav>
-
-          <!-- Stateful -->
-          <button data-loading-text="sending..." data-complete-text="Sent">Send</button>
-
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          <!-- Toggle -->
-          %button.btn(data-toggle="button") Toggle
-
-          <!-- Checkbox type button group -->
-          %nav.button-group(data-toggle="buttons-checkbox")
-            ...
-
-          <!-- Radio type button group -->
-          %nav.button-group(data-toggle="buttons-radio")
-            ...
-
-          <!-- Stateful -->
-          %button(data-loading-text="sending..." data-complete-text="Sent") Send
-