underoos 1.0.0 → 1.1.0

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

@@ -1,76 +0,0 @@
-
-#layouts_containers.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Containers <span>containers.sass</span>
-  %p(style="width:67%;") Containers are used to "contain" elements of content within a page or section. All containers inject a <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> to clear any floats from interior elements.
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Class
-        %th Usage
-    %tbody
-      %tr
-        %td
-          %code .container
-        %td The default container is a fluid width container with a <code>max-width</code> set to the <code>$base_width</code> variable.
-      %tr
-        %td
-          %code .container.outer
-        %td Adding the <code>.outer</code> class to a <code>container</code> adds left and right padding, which creates a little breathing room in fluid layouts from the browser's edges.
-      %tr
-        %td
-          %code .container.fluid
-        %td Adding the <code>.fluid</code> class to a <code>container</code> will remove the <code>max-width</code> setting and allow the container to fill the browser window.
-      %tr
-        %td
-          %code .container.fixed
-        %td Adding the <code>.fixed</code> class to a <code>container</code> will render it using fixed width pixels with no responsive behavior.
-
-#layouts_queries.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Media Queries <span>queries.sass</span>
-  %p.sg-twothird.pull Some default media queries are put into place and are tuned for some of the components. These should be adjusted based on the application's needs. At the moment, we are not rolling mobile first, but rather override as the viewport becomes smaller.
-.sg-subsection
-  %table.box.banded.thead-decorate
-    %thead
-      %tr
-        %th Media Query
-        %th Usage
-    %tbody
-      %tr
-        %td
-          %code @media min-width: 1200px
-        %td Used for larger screens primarily on desktop and laptop devices.
-      %tr
-        %td
-          %code @media min-width: 890px
-        %td Smaller desktop, laptop devices, tablets, this number should change based on the type of navigation being rolled
-      %tr
-        %td
-          %code @media max-width: 889px
-        %td For this specific application, it's where the navigation breaks down and we need to go to the responsive "toggle" style
-      %tr
-        %td
-          %code @media max-width: 768px
-        %td Typically portrait tablet
-      %tr
-        %td
-          %code @media max-width: 480px
-        %td Typically landscape phones
-      %tr
-        %td
-          %code @media max-width: 320px
-        %td Typically portrait phones
-  .notification.important.fade.in
-    %p <strong>Note!</strong> Based on the design and needs of the application, you may need more queries put in place or less
-
-#layouts_upgrades.sg-spy-landing
-.sg-subsection
-  %h3.sg-subheading Upgrade Messaging <span>upgrades.sass</span>
-  .sg-half.pull
-    %p Upgrade messaging is enabled if certain conditions are established by <a href="http://www.modernizr.com/">Modernizr</a>. Mainly it's testing for a certain threshold of Internet Explorer and if JavaScript is enabled. After clicking the test button, hover over the <span class="decal danger">!</span> icon to see the upgrade message.
-  .sg-half.push
-    .well
-      %button.btn.primary#upgrade_test(href="#") Test Upgrade Message
-

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

@@ -1,18 +0,0 @@
-
-- @palettes.each do |palette|
-  .sg-subsection
-    %h4=palette[:title]
-    %table.box.banded.thead-decorate
-      %thead
-        %tr
-          %th Swatch
-          %th Variable
-          %th Hex
-      %tbody
-        - palette[:colors].each do |color|
-          %tr
-            %td
-              %span.sg-swatch(style="background-color:#{color[:hex]};")
-            %td <code>#{color[:prop]}</code>
-            %td <code>#{color[:hex]}</code>
-

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

@@ -1,27 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading References
-  .well
-    %p &raquo; <a href="http://dochub.io/">Dochub search for HTML, CSS, JavaScript, DOM, jQuery</a>
-    %p &raquo; <a href="http://www.w3schools.com/html5/default.asp">W3 Schools, for tag definitions</a>
-    %p &raquo; <a href="http://sass-lang.com/">SASS</a>
-    %p &raquo; <a href="http://compass-style.org/">Compass</a>
-    %p &raquo; <a href="http://thoughtbot.com/bourbon/">Bourbon</a>
-    %p &raquo; <a href="http://twitter.github.com/bootstrap/">Twitter's Bootstrap Library</a>
-    %p &raquo; <a href="http://twitter.github.com/bootstrap/javascript.html">Twitter's Bootstrap JavaScript Library</a>
-    %p &raquo; <a href="https://github.com/twitter/bootstrap">Twitter's Bootstrap Source Files</a>
-    %p &raquo; <a href="https://www.pivotaltracker.com/projects/485221">Pivotal Tracker Project</a>
-
-.sg-subsection
-  %h3.sg-subheading Tips
-  .notification.important.fade.in
-    %p <strong>Pro Tip!</strong> Type the bang symbol (<kbd>!</kbd>) to toggle all example markup between <code>html</code> and <code>haml</code>
-
-.sg-subsection
-  %p
-    %small The Bootstrap library is licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
-  %p
-    %small The Bootstrap documentation is licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
-  %p
-    %small Anything created by <a href="http://www.modeset.com/">mode set</a> is <a href="https://raw.github.com/modeset/underoos/master/LICENSE">MIT Licensed</a>
-

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

@@ -1,124 +0,0 @@
-
-.sg-subsection
-  %h3.sg-subheading Table styles <span>tables.sass</span>
-  %p Building tables is additive around the classes applied to the top level <code>table</code> element.
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Base
-    %p The base table creates division in data with horizontal dividers.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <table>
-            ...
-          </table>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %table
-            ...
-  .sg-twothird.push
-    %table
-      = render :partial => 'underoos/styleguides/partials/table-data'
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Box
-    %p Adding the <code>.box</code> class renders the table with exterior boundries for all <code>table rows</code>.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <table class="box">
-            ...
-          </table>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %table.box
-            ...
-  .sg-twothird.push
-    %table.box
-      = render :partial => 'underoos/styleguides/partials/table-data'
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Vertical border
-    %p Adding the <code>.vborder</code> class renders the table with vertical divisions for <code>table data</code>.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <table class="vborder">
-            ...
-          </table>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %table.vborder
-            ...
-  .sg-twothird.push
-    %table.vborder
-      = render :partial => 'underoos/styleguides/partials/table-data'
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Box &amp; Vertical border
-    %p Combining the <code>.box</code> class combined with the <code>.vborder</code> class renders the table with full borders around <code>tr</code> and <code>td</code> elements.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <table class="box vborder">
-            ...
-          </table>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %table.box.vborder
-            ...
-  .sg-twothird.push
-    %table.box.vborder
-      = render :partial => 'underoos/styleguides/partials/table-data'
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Banded
-    %p To add coloring to alternate <code>tbody</code> rows, add the class <code>.banded</code>.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <table class="banded">
-            ...
-          </table>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %table.banded
-            ...
-  .sg-twothird.push
-    %table.banded
-      = render :partial => 'underoos/styleguides/partials/table-data'
-    .notification.important.fade.in
-      %p <strong>Note!</strong> You can also add <code>.odd</code> or <code>.even</code> to <code>tr</code> instead of relying on <code>:nth-child(<em>odd|even</em>)</code>
-
-
-.sg-subsection
-  .sg-onethird.pull
-    %h4 Kitchen sink
-    %p Combine all of the available classes including <code>thead-decorate</code> and <code>tfoot-decorate</code> to style the <code>thead</code> and <code>tfoot</code> elements.
-    %pre.prettyprint.html
-      = preserve do
-        :escaped
-          <table class="box vborder banded thead-decorate tfoot-decorate">
-            ...
-          </table>
-    %pre.prettyprint.haml.hidden
-      = preserve do
-        :escaped
-          %table.box.vborder.banded.thead-decorate.tfoot-decorate
-            ...
-  .sg-twothird.push
-    %table.box.vborder.banded.thead-decorate.tfoot-decorate
-      = render :partial => 'underoos/styleguides/partials/table-data'
-    .notification.important.fade.in
-      %p <strong>Note!</strong> Add <code>.ascending</code> or <code>.descending</code> to <code>th &gt; a</code> elements with enclosed <code>span caret</code> for sorting icons
-

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

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