underoos 1.0.0 → 1.1.0

data/app/assets/stylesheets/base/_helpers.sass

@@ -1,48 +1,62 @@
 
-// Utility classes for use with @extension, or just common items found in every project!
-// All helpers are also available as mixins, following the same name
+//~
+// Utility classes for use with `@extend`, mapped directly to their
+// [mixin](#mixins-mixins) counterparts. Based on the hard work from
+// [HTML5 Boilerplate](http://html5boilerplate.com/).
+//
+// Most elements within underoos utilize mixins instead of extending the helpers.
+// This is by design, to allow the application to take full advantage of `@extend`
+// without creating incredibly long selector lists.
+//
+// Class                | Usage
+// -------------------- | ----------------------------------------------
+// `.clearfixer`        | The [micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) utilizing pseudo elements to clear floats
+// `.clearfix`          | Uses `overflow: hidden` to clear floats
+// `.ir`                | Hides text on an element when utilizing a `background-image` such as a logo or icon
+// `.hidden`            | Totally hidden from screen readers and browsers
+// `.shown`             | Reverse the effects of `hidden`
+// `.visuallyhidden`    | Only visually hidden, still available to screen readers
+// `.visuallyshown`     | Reverse the settings applied by `.visuallyhidden`
+// `.invisible`         | Hide visually and from screenreaders, but maintain layout
+// `.base-column`       | The base `column` settings, should be extended by all columns
+// `.base-column-right` | An alternate base `column` which floats elements to the right
+// `.base-row`          | The base `row` settings, should be extended by all rows
+// `.pull-left`         | Adds `float: left` to an element
+// `.pull-right`        | Adds `float: right` to an element
+//
+// Notes:
+// - **Pro Tip!** Check out the [mixins](#mixins-mixins) for more detailed examples and explanation
 
-// Utilizes the `micro clearfix` on pseudo elements for clearing floats
 .clearfixer
   +clearfixer
 
-// Uses the standard clearfix of `overflow:hidden` found in Compass
 .clearfix
   +clearfix
 
-// Image replacement
 .ir
   +ir
 
-// Totally hidden from screen readers and browsers
 .hidden
   +hidden
 
-// Reverse the effects of hidden
 .shown
   +shown
 
-// Only visually hidden, still available to screen readers
 .visuallyhidden
   +visuallyhidden
 
-// Reverse the settings applied by `.visuallyhidden`
 .visuallyshown
   +visuallyshown
 
-// Hide visually and from screenreaders, but maintain layout
 .invisible
   +invisible
 
-// The base `column` settings, should be extended by all columns
 .base-column
   +base-column
 
-// An alternate base `column` which floats elements to the right
 .base-column-right
   +base-column-right
 
-// The base `row` settings, should be extended by all rows
 .base-row
   +base-row
 

data/app/assets/stylesheets/base/_normalize.sass

@@ -1,10 +1,13 @@
 
-// Normalization based on:
+//~
+// Normalize and reset base elements to allow browsers to render all controls
+// more consistently and in line with modern standards.
+//
+// Normalization and resets based on
+//
 // - [normalize.css](http://necolas.github.com/normalize.css/)
 // - [HTML5 Boilerplate](http://html5boilerplate.com/)
-
-// Resets based on:
-// [Eric Meyer's reset](http://meyerweb.com/eric/tools/css/reset/)
+// - [Eric Meyer's reset](http://meyerweb.com/eric/tools/css/reset/)
 
 // HTML 5 definitions and normalization
 article, aside, details, figcaption, figure,
@@ -17,8 +20,9 @@ audio, canvas, video
   margin: 0
   padding: 0
   display: inline-block
-  *display: inline
-  *zoom: 1
+  @if $legacy-support-for-ie
+    *display: inline
+    *zoom: 1
 
 audio:not([controls])
   display: none
@@ -44,6 +48,7 @@ time, mark
 
 // Embedded content normalization
 img
+  max-width: 100%
   border: 0
   -ms-interpolation-mode: bicubic
 
@@ -60,11 +65,13 @@ svg:not(:root)
 button, input, select, textarea, label
   font-size: 100%
   vertical-align: baseline
-  *vertical-align: middle
+  @if $legacy-support-for-ie
+    *vertical-align: middle
 
 legend
   white-space: normal
-  *margin-left: -7px
+  @if $legacy-support-for-ie
+    *margin-left: -7px
 
 button, input
   line-height: normal
@@ -86,7 +93,8 @@ input[type="submit"]
   cursor: pointer
   line-height: normal
   -webkit-appearance: button
-  *overflow: visible
+  @if $legacy-support-for-ie
+    *overflow: visible
 
 button[disabled],
 a.disabled,

data/app/assets/stylesheets/base/_scaffold.sass

@@ -1,4 +1,52 @@
 
+//~
+// Setup main scaffolding elements for `html`, `body`, selections, generic links and navigation.
+// Scaffolding includes font sizes, families, colors, backgrounds and line heights.
+
+//~
+// #### Base navs
+// The base nav is the building block for navigation structures and components
+// (tabs, pills, breadcrumbs, pagination and navigation lists). The `.nav` class
+// can be used for simple navigation as well. The buttons below will change the
+// class on the `ul` element to showcase the different navigation systems
+// based off the same markup structure.
+//
+// Warnings:
+// - **Heads Up!** All navigation components depend on the `.nav` class being attached to the container element
+//
+// Notes:
+// - **Pro Tip!** For convenience, add the `inline` class to the `.nav` element to display the base nav inline
+//
+// Usage:
+//    <nav>
+//      <ul class="nav inline" id="underoos_nav_demo">
+//        <li>
+//          <a data-classes="nav" href="#">Base Nav</a>
+//        </li>
+//        <li class="active">
+//          <a data-classes="nav inline" href="#">Base Nav Inline</a>
+//        </li>
+//        <li>
+//          <a data-classes="nav tabs" href="#">Tabs</a>
+//        </li>
+//        <li>
+//          <a data-classes="nav pills" href="#">Pills</a>
+//        </li>
+//        <li>
+//          <a data-classes="nav breadcrumb" href="#">Breadcrumbs</a>
+//        </li>
+//        <li>
+//          <a data-classes="nav pagination" href="#">Pagination</a>
+//        </li>
+//        <li>
+//          <a data-classes="nav tabs stacked" href="#">Stacked Tabs</a>
+//        </li>
+//        <li>
+//          <a data-classes="nav pills stacked" href="#">Stacked Pills</a>
+//        </li>
+//      </ul>
+//    </nav>
+
 // Top level elements
 html
   font-size: 100%
@@ -49,3 +97,40 @@ a:active, a.active, .active > a
 a:link
   -webkit-tap-highlight-color: $tap_highlight
 
+.nav
+  +clearfixer
+  list-style: none
+
+.nav > li
+  margin-left: 0
+
+.nav > li > a
+  display: block
+
+.nav.inline > li
+  float: left
+
+.nav.inline > li > a
+  padding-left: 0.5em
+  padding-right: 0.5em
+
+// Active states for navs get a default cursor
+.nav > .active > a,
+.nav > .active > a:hover
+  cursor: default
+.nav > .dropdown.active > a:hover
+  cursor: pointer
+
+// Headers within a Nav
+.nav .nav-header
+  display: block
+  color: $component_normal
+  font-size: 0.75em
+  font-weight: bold
+  text-transform: uppercase
+  text-shadow: $text_drop_lite
+  padding: 0.4em 1em
+
+.nav li + .nav-header
+  margin-top: 1em
+

data/app/assets/stylesheets/base/_tables.sass

@@ -1,4 +1,81 @@
 
+//~
+// Building tables is additive around the classes applied to the top level `<table>` element.
+// By combining any of the following classes, the table can be given a different look and feel.
+//
+// Name            | Class               | Usage
+// --------------- | ------------------- | ---------------------------
+// Base            | _none_              | The base table creates division in data with horizontal dividers.
+// Box             | `.box`              | Renders the table with exterior boundries for all table rows.
+// Vertical border | `.vborder`          | Renders the table with vertical divisions for table data.
+// Banded          | `.banded`           | Renders alternating `<tbody>` rows with a different color.
+// Header          | `.thead-decorate`   | Fills the `thead` with a background fill
+// Footer          | `.tfoot-decorate`   | Fills the `tfoot` with a background fill
+//
+// Notes:
+// - **Demo!** Toggle the buttons in the button group to showcase various table settings, follow along in the web inspector!
+// - **Pro Tip!** Add `.ascending` or `.descending` to `th > a` elements with an enclosed `span caret` for sorting icons
+//
+// Warnings:
+// - **Heads Up!** Tables throughout the styleguide may not contain the exact styles of the application
+//
+// Usage:
+//    <table>
+//      <caption>Table Caption</caption>
+//      <thead>
+//        <tr>
+//          <th>
+//            <a href="#">#</a>
+//          </th>
+//          <th>Table Header</th>
+//          <th>
+//            <a class="ascending" href="#">Ascending <span class="caret"></span></a>
+//          </th>
+//          <th>
+//            <a class="descending" href="#">Descending <span class="caret north"></span></a>
+//          </th>
+//        </tr>
+//      </thead>
+//      <tfoot>
+//        <tr>
+//          <td colspan="4">Set the <code>colspan</code> attribute to span the width of the table for footers.</td>
+//        </tr>
+//      </tfoot>
+//      <tbody>
+//        <tr>
+//          <td>1</td>
+//          <td>Table Data</td>
+//          <td>One</td>
+//          <td>Three</td>
+//        </tr>
+//        <tr>
+//          <td>2</td>
+//          <td>
+//            <a href="#">Click me!</a>
+//          </td>
+//          <td>Two</td>
+//          <td>Two</td>
+//        </tr>
+//        <tr>
+//          <td>3</td>
+//          <td>
+//            <a href="#">Click me!</a>
+//          </td>
+//          <td>Three</td>
+//          <td>One</td>
+//        </tr>
+//      </tbody>
+//    </table>
+//
+//    <!-- Testing purposes only -->
+//    <nav class="button-group" data-toggle="buttons-checkbox" id="underoos_table_demo" style="margin-top:1.5em;">
+//      <a class="btn" href="#" data-table="box">Box</a>
+//      <a class="btn" href="#" data-table="vborder">Vertical Border</a>
+//      <a class="btn" href="#" data-table="banded">Banded</a>
+//      <a class="btn" href="#" data-table="thead-decorate">Header</a>
+//      <a class="btn" href="#" data-table="tfoot-decorate">Footer</a>
+//    </nav>
+
 // Tables
 table
   margin: 0.5em 0

data/app/assets/stylesheets/base/_transitions.sass

@@ -1,12 +1,20 @@
 
-// Show and hide behaviors
+//~
+// Transitions are helper classes added and removed via JavaScript.
+//
+// Class          | Usage
+// -------------- | -----------------------------------------------------------
+// `.fade`        | Transitions an element to an `opacity` of `0`
+// `.fade.in`     | Transitions an element to an `opacity` of `1`
+// `.collapse`    | Transitions an element to a `height` of `0`
+// `.collapse.in` | Transitions an element to a `height` of `auto`
+
 .fade
   +transition(opacity $speed)
   +opacity(0)
   &.in
     +opacity(1)
 
-// Accordians
 .collapse
   +transition(height $speed $ease-in-out-quart)
   position: relative

data/app/assets/stylesheets/base/_typography.sass

@@ -1,5 +1,181 @@
 
-// ## Typography
+//~
+// Heading, paragraph, lists, and inline typographic elements.
+
+//~
+// #### Headings and body copy
+//
+// Usage:
+//    <h1>Google hearts h1 headings, but only use one per page.</h1>
+//    <p>~lorem</p>
+//    <br/>
+//    <h2>Got sections? Try using h2 headings.</h2>
+//    <p>~lorem</p>
+//    <br/>
+//    <h3>Good things come in threes, like tacos and h3 headings.</h3>
+//    <p>~lorem</p>
+//    <br/>
+//    <h4>There's nothing clever to say about h4 headings.</h4>
+//    <p>~lorem</p>
+//    <br/>
+//    <h5>Every time you use an h5 heading, Google kills a puppy. A tiny little puppy.</h5>
+//    <p>~lorem</p>
+//    <br/>
+//    <h6>An h6 heading? Google just killed a litter of kittens.</h6>
+//    <p>~lorem</p>
+
+//~
+// #### Inline paragraph elements
+//
+// Element     | Usage
+// ----------- | ----------------------------------------------
+// `<a>`       | The anchor element defines a [hyperlink](http://www.modeset.com/)!
+// `<em>`      | The em element is used to _emphasize_ text
+// `<strong>`  | The strong element also <strong>emphasizes</strong> text, typically in <strong>bold</strong>
+// `<small>`   | The small element renders text well, <small>smaller</small>
+// `<sup>`     | The superscript element is used to display text higher<sup>&reg;</sup> and smaller<sup>&trade;</sup>
+// `<sub>`     | The sub element is used to display text <sub>lower</sub> and <sub>smaller</sub>
+// `<address>` | For contact information related to the author of the document
+// `<time>`    | Use for a <time>24-hour</time> clock or a precise date in the [Gregorian calendar](http://en.wikipedia.org/wiki/Gregorian_calendar)
+// `<abbr>`    | <abbr title="For Placement Only">FPO</abbr>. Describes an abbreviated phrase with the title attribute
+// `<dfn>`     | <dfn title="This is a definition">DFN</dfn>. Describes the definition of a word or term with the title attribute
+// `<ins>`     | The ins element defines text that has been <ins>inserted into a document</ins>
+// `<del>`     | The del tag defines text that has been <del>deleted from a document</del>
+// `<mark>`    | The mark element is used for indicating text as <mark>marked or highlighted for reference</mark> purposes
+// `<code>`    | The <code>code</code> tag is used to show inline code
+// `<kbd>`     | The <kbd>kbd</kbd> tag defines keyboard text
+// `<samp>`    | The <samp>samp</samp> tag defines sample computer code
+// `<pre>`     | The <code>pre</code> tag is used for blocks of code
+//
+// Usage:
+//    <section style="width:45%; float:left; margin-right: 5%;">
+//      <h4>Inline elements examples</h4>
+//      <br />
+//      <p>Yeah, well, <em>listen</em>. You <kbd>ought</kbd> to <strong>ditch</strong> the <strong><em>two</em></strong>
+//      <a href="http://modeset.com/">geeks</a> you're in the <dfn title="motorized vehicle">car</dfn> with now and get
+//      <sub>in with</sub> us. But <samp>that's</samp> <code>alright</code>, <mark>we'll worry about</mark> that <time>later</time>.
+//      I will <small>see you</small> there. All right<sup>™</sup>? <del>Man</del>, <ins>I love</ins> those
+//      <abbr title="Hotties">redheads</abbr>.</p>
+//    </section>
+//    <section style="width:45%; float:left;">
+//      <h4>Address examples</h4>
+//      <br />
+//      <address>
+//        <strong>Mr. Address Tag</strong>
+//        <br>
+//        1600 Pennsylvania Ave NW
+//        <br>
+//        Washington D.C. DC 20500
+//        <br>
+//        <br>
+//        <strong>Email:</strong>
+//        <br>
+//        <a href="#">president@whitehouse.gov</a>
+//      </address>
+//    </section>
+
+//~
+// #### Blockquotes
+//
+// Notes:
+// - **Pro Tip!** Utilize `&#8220;` and `&#8221;` for opening and closing quotes within a `<blockquote>` element
+//
+// Usage:
+//    <blockquote>
+//      <p>&#8220;Let me tell you what Melba Toast is packin' right here, all right. We got 4:11 Positrac outback, 750 double pumper, Edelbrock intake, bored over 30, 11 to 1 pop-up pistons, turbo-jet 390 horsepower. We're talkin' some f***in' muscle.&#8221;</p>
+//      <small>David Wooderson, <cite title="link to source">Dazed &amp; Confused</cite></small>
+//    </blockquote>
+
+//~
+// #### Rules
+// Horizontal rules can utilize the class `.dashed` and `.dotted` for a different separator.
+//
+// Usage:
+//    <hr>
+//    <hr class="dashed">
+//    <hr class="dotted">
+
+//~
+// #### Lists
+//
+// Usage:
+//    <section style="width:20%; float:left; margin-right: 5%;">
+//      <p><strong>Unordered list:</strong></p>
+//      <ul>
+//        <li>Unordered list</li>
+//        <li>Unordered list</li>
+//        <li>
+//          <ul>
+//            <li>Nested unordered list</li>
+//            <li>Nested unordered list</li>
+//            <li>Nested unordered list</li>
+//          </ul>
+//        </li>
+//        <li>Unordered list</li>
+//        <li>
+//          <ol>
+//            <li>Nested ordered list</li>
+//            <li>Nested ordered list</li>
+//            <li>Nested ordered list</li>
+//          </ol>
+//        </li>
+//      </ul>
+//    </section>
+//    <section style="width:20%; float:left; margin-right: 5%;">
+//      <p><strong>Ordered list:</strong></p>
+//      <ol>
+//        <li>Ordered list</li>
+//        <li>Ordered list</li>
+//        <li>
+//          <ol>
+//            <li>Nested ordered list</li>
+//            <li>Nested ordered list</li>
+//            <li>Nested ordered list</li>
+//          </ol>
+//        </li>
+//        <li>Ordered list</li>
+//        <li>
+//          <ul>
+//            <li>Nested unordered list</li>
+//            <li>Nested unordered list</li>
+//            <li>Nested unordered list</li>
+//          </ul>
+//        </li>
+//      </ol>
+//    </section>
+//    <section style="width:20%; float:left; margin-right: 5%;">
+//      <p><strong>Unstyled list:</strong></p>
+//      <ul class="unstyled">
+//        <li>Unordered list</li>
+//        <li>Unordered list</li>
+//        <li>
+//          <ul>
+//            <li>Nested unordered list</li>
+//            <li>Nested unordered list</li>
+//            <li>Nested unordered list</li>
+//          </ul>
+//        </li>
+//        <li>Unordered list</li>
+//        <li>
+//          <ol>
+//            <li>Nested ordered list</li>
+//            <li>Nested ordered list</li>
+//            <li>Nested ordered list</li>
+//          </ol>
+//        </li>
+//      </ul>
+//    </section>
+//    <section style="width:20%; float:left;">
+//      <p><strong>Definition list:</strong></p>
+//      <dl>
+//        <dt>Definition Term</dt>
+//        <dd>Definition Description Lorem ipsum dolor sit amet.</dd>
+//        <dt>Definition Term</dt>
+//        <dd>Definition Description Lorem ipsum dolor sit amet.</dd>
+//        <dt>Definition Term</dt>
+//        <dd>Definition Description Lorem ipsum dolor sit amet.</dd>
+//      </dl>
+//    </section>
 
 // Heading Styles
 h1, h2, h3, h4, h5, h6
@@ -36,7 +212,7 @@ small
   font-size: 85%
 
 b, strong
-  font-style: bold
+  font-weight: bold
 
 sub, sup
   font-size: 75%
@@ -63,7 +239,6 @@ abbr, dfn
 // Code
 pre, code, kbd, samp
   font-family: $code_norm
-  _font-family: "courier new", monospace
 
 code, kbd, samp
   background: $off_white
@@ -87,24 +262,11 @@ pre
   overflow: hidden
 
 pre code
-  padding: 0
-  border: 0
+  color: $body_color
   background: transparent
-
-// .pln, .pun, .opn, .clo => color: body_color
-pre.prettyprint
-  .com
-    color: #93a1a1
-  .lit
-    color: #195f91
-  .fun
-    color: #cb4b15
-  .kwd, .tag
-    color: #258ad2
-  .str, .atv
-    color: #859900
-  .atn, .type, .dec, .var
-    color: #d33682
+  border: 0
+  font-size: 100%
+  padding: 0
 
 // Blockquotes
 blockquote
@@ -166,7 +328,7 @@ ol ul li, ol ol li
   margin-left: 1.5em
 
 // Navigation and unstyled Lists
-nav ul, nav ol, ul.unstyled, ol.unstyled
+nav ul, nav ol, .unstyled
   list-style: none
   list-style-image: none
   ul li, ol li, li