underoos 1.0.0

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

@@ -0,0 +1,284 @@
+
+#type_headings.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Headings &amp; body copy <span>typography.sass</span>
+  %h1 Google hearts h1 headings, but only use one per page.
+  %p=@lorem
+  %br
+  %h2 Got sections? Try using h2 headings.
+  %p=@lorem
+  %br
+  %h3 Good things come in threes, like tacos and h3 headings.
+  %p=@lorem
+  %br
+  %h4 There's nothing clever to say about h4 headings.
+  %p=@lorem
+  %br
+  %h5 Every time you use an h5 heading, Google kills a puppy. A tiny little puppy.
+  %p=@lorem
+  %br
+  %h6 An h6 heading? Google just killed a litter of kittens.
+  %p=@lorem
+
+
+#type_paragraphs.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Inline paragraph elements <span>typography.sass</span>
+  %table.box.vborder.banded.thead-decorate
+    %thead
+      %tr
+        %th Element
+        %th Usage
+    %tbody
+      %tr
+        %td.html <code>&lt;a&gt;</code>
+        %td.haml.hidden <code>%a</code>
+        %td The anchor element defines a <a href="http://www.modeset.com/">hyperlink</a>!
+      %tr
+        %td.html <code>&lt;em&gt;</code>
+        %td.haml.hidden <code>%em</code>
+        %td The em element is used to <em>emphasize</em> text
+      %tr
+        %td.html <code>&lt;strong&gt;</code>
+        %td.haml.hidden <code>%strong</code>
+        %td The strong element also <strong>emphasizes</strong> text, typically in <strong>bold</strong>
+      %tr
+        %td.html <code>&lt;small&gt;</code>
+        %td.haml.hidden <code>%small</code>
+        %td The small element renders text well, <small>smaller</small>
+      %tr
+        %td.html <code>&lt;sup&gt;</code>
+        %td.haml.hidden <code>%sup</code>
+        %td The superscript element is used to display text higher<sup>&reg;</sup> and smaller<sup>&trade;</sup>
+      %tr
+        %td.html <code>&lt;sub&gt;</code>
+        %td.haml.hidden <code>%sub</code>
+        %td The sub element is used to display text <sub>lower</sub> and <sub>smaller</sub>
+      %tr
+        %td.html <code>&lt;address&gt;</code>
+        %td.haml.hidden <code>%address</code>
+        %td For contact information related to the author of the document
+      %tr
+        %td.html <code>&lt;time&gt;</code>
+        %td.haml.hidden <code>%time</code>
+        %td Use for a <time>24-hour</time> clock or a precise date in the <a href="http://en.wikipedia.org/wiki/Gregorian_calendar">Gregorian calendar</a>
+      %tr
+        %td.html <code>&lt;abbr&gt;</code>
+        %td.haml.hidden <code>%abbr</code>
+        %td <abbr title="For Placement Only">FPO</abbr>. Describes an abbreviated phrase with the <code>title</code> attribute
+      %tr
+        %td.html <code>&lt;dfn&gt;</code>
+        %td.haml.hidden <code>%dfn</code>
+        %td <dfn title="This is a definition">DFN</dfn>. Describes the definition of a word or term with the <code>title</code> attribute
+      %tr
+        %td.html <code>&lt;ins&gt;</code>
+        %td.haml.hidden <code>%ins</code>
+        %td The ins element defines text that has been <ins>inserted into a document</ins>
+      %tr
+        %td.html <code>&lt;del&gt;</code>
+        %td.haml.hidden <code>%del</code>
+        %td The del tag defines text that has been <del>deleted from a document</del>
+      %tr
+        %td.html <code>&lt;mark&gt;</code>
+        %td.haml.hidden <code>%mark</code>
+        %td The mark element is used for indicating text as <mark>marked or highlighted for reference</mark> purposes
+
+.sg-subsection
+  .sg-half.pull
+    %h4 Inline elements examples
+    %br
+    %p Yeah, well, <em>listen</em>. You ought 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 that's alright, <mark>we'll worry about</mark> that <time>later</time>. I will <small>see you</small> there. All right<sup>&trade;</sup>? <del>Man</del>, <ins>I love</ins> those <abbr title="Hotties">redheads</abbr>.
+    %br
+    %br
+    %p <small>* See <a href="http://dochub.io/#html/">dochub.io</a> for other available elements</small>
+  .sg-half.push
+    %h4 Address examples
+    %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
+
+.sg-subsection
+  %h3.sg-subheading Blockquotes <span>typography.sass</span>
+  %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;
+    %small David Wooderson, <cite title="link to source">Dazed &amp; Confused</cite>
+.sg-subsection
+  %pre.prettyprint.html
+    = preserve do
+      :escaped
+        <blockquote>
+          <p>&#8220;Let me...&#8221;</p>
+          <small>Author<cite title="resource">source...</cite></small>
+        </blockquote>
+  %pre.prettyprint.haml.hidden
+    = preserve do
+      :escaped
+        %blockquote
+          %p &#8220;Let me...&#8221;
+          %small
+            Author,
+            %cite(title="resource") source...
+
+#type_rules.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Rules <span>typography.sass</span>
+  %h4 Horizontal
+  .sg-quarter.pull
+    %code.html(style="line-height:5em") &lt;hr&gt;
+    %code.haml.hidden(style="line-height:5em") %hr
+  .sg-threequarter.push
+    .well
+      %hr
+  .sg-quarter.pull
+    %code.html(style="line-height:5em") &lt;hr class="dotted"&gt;
+    %code.haml.hidden(style="line-height:5em") %hr.dotted
+  .sg-threequarter.push
+    .well
+      %hr.dotted
+  .sg-quarter.pull
+    %code.html(style="line-height:5em") &lt;hr class="dashed"&gt;
+    %code.haml.hidden(style="line-height:5em") %hr.dashed
+  .sg-threequarter.push
+    .well
+      %hr.dashed
+
+#type_lists.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Lists <span>typography.sass</span>
+  .sg-quarter.pull
+    %p <strong>Unordered list:</strong>
+    %p.html(style="margin-bottom:0.5em;") <code>&lt;ul&gt;</code>
+    %p.haml.hidden(style="margin-bottom:0.5em;") <code>%ul</code>
+    %ul
+      %li Unordered list
+      %li Unordered list
+      %ul
+        %li Nested unordered list
+        %li Nested unordered list
+        %li Nested unordered list
+      %li Unordered list
+      %ol
+        %li Nested ordered list
+        %li Nested ordered list
+        %li Nested ordered list
+  .sg-quarter
+    %p <strong>Ordered list:</strong>
+    %p.html(style="margin-bottom:0.5em;") <code>&lt;ol&gt;</code>
+    %p.haml.hidden(style="margin-bottom:0.5em;") <code>%ol</code>
+    %ol
+      %li Ordered list
+      %li Ordered list
+      %ol
+        %li Nested unordered list
+        %li Nested unordered list
+        %li Nested unordered list
+      %li Ordered list
+      %ul
+        %li Nested ordered list
+        %li Nested ordered list
+        %li Nested ordered list
+  .sg-quarter
+    %p <strong>Unstyled list:</strong>
+    %p.html(style="margin-bottom:0.5em;") <code>&lt;ul class="unstyled"&gt;</code>
+    %p.haml.hidden(style="margin-bottom:0.5em;") <code>%ul.unstyled</code>
+    %ul.unstyled
+      %li Unordered list
+      %li Unordered list
+      %ul
+        %li Nested unordered list
+        %li Nested unordered list
+        %li Nested unordered list
+      %li Unordered list
+      %ol
+        %li Nested ordered list
+        %li Nested ordered list
+        %li Nested ordered list
+  .sg-quarter.push
+    %p <strong>Definition list:</strong>
+    %p.html(style="margin-bottom:0.5em;") <code>&lt;dl&gt;</code>
+    %p.haml.hidden(style="margin-bottom:0.5em;") <code>%dl</code>
+    %dl
+      %dt Definition Term
+      %dd Definition Description #{@lorem_tiny}
+      %dt Definition Term
+      %dd Definition Description #{@lorem_tiny}
+      %dt Definition Term
+      %dd Definition Description #{@lorem_tiny}
+
+#type_code.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Code styles <span>typography.sass</span>
+  %h4 Inline elements
+  %table.box.vborder.banded.thead-decorate
+    %thead
+      %tr
+        %th Element
+        %th Usage
+    %tbody
+      %tr
+        %td.html <code>&lt;code&gt;</code>
+        %td.haml.hidden <code>%code</code>
+        %td The <code>code</code> tag is used to show inline code
+      %tr
+        %td.html <code>&lt;kbd&gt;</code>
+        %td.haml.hidden <code>%kbd</code>
+        %td The <kbd>kbd</kbd> tag defines keyboard text
+      %tr
+        %td.html <code>&lt;samp&gt;</code>
+        %td.haml.hidden <code>%samp</code>
+        %td The <samp>samp</samp> tag defines sample computer code
+
+.sg-subsection
+  .sg-half.pull
+    %h4 The basic block
+    %p Use the <code>pre</code> element for multiline code blocks.
+    %pre.html
+      = preserve do
+        :escaped
+          <!-- basic block -->
+          <pre>
+            <section>
+              <h1>Heading</h1>
+              <p>Some Copy...</p>
+            </section>
+          </pre>
+    %pre.haml.hidden
+      = preserve do
+        :escaped
+          <!-- basic block -->
+          %pre
+            %section
+              %h1 Heading
+              %p Some Copy...
+  .sg-half.push
+    %h4 Google's Prettify
+    %p Add the <code>.prettyprint</code> class for basic syntax highlighting.
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <!-- make it pretty -->
+          <pre class="prettyprint">
+            <section>
+              <h1>Heading</h1>
+              <p>Some Copy...</p>
+            </section>
+          </pre>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          <!-- make it pretty -->
+          %pre.prettyprint
+            %section
+              %h1 Heading
+              %p Some Copy...
+
+

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

@@ -0,0 +1,270 @@
+
+#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
+