underoos 1.0.0

data/app/assets/stylesheets/underoos.sass

@@ -0,0 +1,52 @@
+
+// pick a library
+// @import compass
+// @import bourbon
+@import polyfills/polyfills
+
+// import all underoos mixins
+@import mixins/mixins
+
+// configuration theme
+@import themes/default
+
+// base elements
+@import base/normalize
+@import base/scaffold
+@import base/helpers
+@import base/transitions
+@import base/button-btn-mixin
+@import base/typography
+@import base/elements
+@import base/tables
+@import base/forms
+
+// components
+@import components/carets
+@import components/close
+@import components/decals
+@import components/wells
+@import components/dropdowns
+@import components/tabs
+@import components/pills
+@import components/nav-lists
+@import components/breadcrumbs
+@import components/pagination
+@import components/accordions
+@import components/paddles
+@import components/button-groups
+@import components/navbars
+@import components/tooltips
+@import components/popovers
+@import components/progress-bars
+@import components/notifications
+@import components/modals
+@import components/carousels
+@import components/media
+
+// layouts
+@import layouts/containers
+@import layouts/upgrades
+@import layouts/queries
+@import layouts/print
+

data/app/controllers/underoos/styleguides_controller.rb

@@ -0,0 +1,79 @@
+
+module Underoos
+  class StyleguidesController < ActionController::Base
+    def index
+      @lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+      @lorem_sm = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
+      @lorem_tiny = 'Lorem ipsum dolor sit amet.'
+      @images = Dir['public/images/**/*.{png,jpeg,jpg,gif}'].map {|f| f.sub('public','')}
+
+      # Palettes
+      @greys = [
+        {prop:'$black', hex:'#000'},
+        {prop:'$grey1', hex:'#111'},
+        {prop:'$grey2', hex:'#222'},
+        {prop:'$grey3', hex:'#333'},
+        {prop:'$grey4', hex:'#444'},
+        {prop:'$grey5', hex:'#555'},
+        {prop:'$grey6', hex:'#666'},
+        {prop:'$grey7', hex:'#777'},
+        {prop:'$grey8', hex:'#888'},
+        {prop:'$grey9', hex:'#999'},
+        {prop:'$greyA', hex:'#aaa'},
+        {prop:'$greyB', hex:'#bbb'},
+        {prop:'$greyC', hex:'#ccc'},
+        {prop:'$greyD', hex:'#ddd'},
+        {prop:'$greyE', hex:'#eee'},
+        {prop:'$white', hex:'#fff'},
+        {prop:'$off_grey', hex:'#eaeaea'},
+        {prop:'$off_white', hex:'#fafafa'}
+      ]
+      @rainbow = [
+        {prop:'$magenta', hex:'#ff00ff'},
+        {prop:'$cyan',    hex:'#00ffff'},
+        {prop:'$red',     hex:'#b22222'},
+        {prop:'$orange',  hex:'#f26522'},
+        {prop:'$yellow',  hex:'#ffc40d'},
+        {prop:'$green',   hex:'#46a546'},
+        {prop:'$blue',    hex:'#268bd2'},
+        {prop:'$indigo',  hex:'#4b0082'},
+        {prop:'$violet',  hex:'#ee82ee'}
+      ]
+      @status = [
+        {prop:'$standard', hex:'#f5f5f5'},
+        {prop:'$info',     hex:'#999'},
+        {prop:'$important',hex:'#268bd2'},
+        {prop:'$success',  hex:'#46a546'},
+        {prop:'$warning',  hex:'#ffc40d'},
+        {prop:'$error',    hex:'#b22222'},
+        {prop:'$danger',   hex:'#b22222'}
+      ]
+      @misc_colors = [
+        {prop:'$primary',         hex:'#268bd2'},
+        {prop:'$disabled_color',  hex:'#bbb'},
+        {prop:'$disabled_bg',     hex:'#eee'},
+        {prop:'$disabled_border', hex:'#ddd'},
+        {prop:'$focus_color',     hex:'#52a8ec'},
+        {prop:'$focus_border',    hex:'rgba(82,168,236,0.8)'}
+      ]
+      @components = [
+        {prop:'$component_normal', hex:'#666'},
+        {prop:'$component_active', hex:'#fff'},
+        {prop:'$component_bg', hex:'transparent'},
+        {prop:'$component_bg_active', hex:'#268bd2'},
+        {prop:'$component_bg_hover', hex:'#eee'},
+        {prop:'$component_border', hex:'#ccc'},
+        {prop:'$component_border_alt', hex:'#b3b3b3'}
+      ]
+      # Stick all palette options into an array of objects for easier documentation
+      @palettes = [
+        {title:'Greyscale', colors: @greys },
+        {title:'mc roy g biv', colors: @rainbow },
+        {title:'Status', colors: @status },
+        {title:'Miscellaneous', colors: @misc_colors },
+        {title:'Components', colors: @components }
+      ]
+    end
+  end
+end
+

data/app/views/shared/_upgrades.html.haml

@@ -0,0 +1,12 @@
+
+#upgrade_notifications
+  .upgrade-icon
+    %span !
+    .upgrade-notification
+      #lt_ie8.upgrade-container
+        %p Please upgrade to the <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages">latest version of Internet Explorer</a> or use one of the following browsers:
+        %br
+        %p <a href="http://www.google.com/chrome/">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Apple Safari</a>, or <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>
+      #no_js.upgrade-container
+        %p For full functionality of this site it is necessary to enable <a href="http://www.enable-javascript.com/" target="_blank">JavaScript</a>.
+

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

@@ -0,0 +1,42 @@
+
+#assets_icons.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Favicon & Touch icons
+  .sg-half.pull
+    %p Include these icons in the root directory of your project and there is no need for extra markup in the <code>&lt;head&gt;</code> of your html file.
+    %br
+    %ol
+      %li <samp>favicon.ico</samp> <code>[16x16]</code>
+      %li <samp>apple-touch-icon.png</samp> <code>[57x57]</code>
+      %li <samp>apple-touch-icon-precomposed.png</samp> <code>[57x57]</code>
+      %li <samp>apple-touch-icon-57x57-precomposed.png</samp>
+      %li <samp>apple-touch-icon-72x72-precomposed.png</samp>
+      %li <samp>apple-touch-icon-114x114-precomposed.png</samp>
+    %br
+    %p
+      %small
+        You can optionally include a <code>320x460</code> <code>startup.png</code> in your root directory as well. See the <a href="http://miniapps.co.uk/blog/post/ios-startup-images-using-css-media-queries/">post</a> by Alex Gibson for more information.
+  .sg-half.push
+    .well
+      %img(src='/favicon.ico' alt='favicon')
+      %img(src='/apple-touch-icon.png' alt='apple touch icon')
+      %img(src='/apple-touch-icon-precomposed.png' alt='apple touch icon')
+      %img(src='/apple-touch-icon-57x57-precomposed.png' alt='apple touch icon')
+      %img(src='/apple-touch-icon-72x72-precomposed.png' alt='apple touch icon')
+      %img(src='/apple-touch-icon-114x114-precomposed.png' alt='apple touch icon')
+    .notification.important.fade.in
+      %p <strong>Note!</strong> For more information on using icons, see <a href="http://mathiasbynens.be/notes/touch-icons">Mathias Bynens post</a>
+
+#assets_gui.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading UI elements
+  %p Sprites, icons, graphics, and other image assets used within the application.
+.sg-subsection
+  .well
+    - @images.each do |image|
+      - base = "#{File.basename(image)}"
+      %p.sg-note(style="margin: 1.5em 0 1em 0;") #{image}
+      %img(src="#{image}" alt="#{base}")
+  .notification.important.fade.in
+    %p <strong>Note!</strong> Images are auto populated from <code>public/images/*</code>
+

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

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

@@ -0,0 +1,242 @@
+
+#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\"")
+