underoos 1.0.0

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

@@ -0,0 +1,305 @@
+
+#forms_type.sg-spy-landing
+.sg-subsection
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Name
+        %th Class
+        %th Description
+    %tfoot
+      %tr
+        %td(colspan="3") Apply the class directly on the <code>form</code> element
+    %tbody
+      %tr
+        %td
+          %strong Vertical
+        %td(style="color: #999;") <em>not required</em>
+        %td Stacked label, controls and hints
+      %tr
+        %td
+          %strong Horizontal
+        %td <code>.form-horizontal</code>
+        %td Labels and controls on the same line, stacked hints
+      %tr
+        %td
+          %strong Inline
+        %td <code>.form-inline</code>
+        %td All controls on the same line
+      %tr
+        %td
+          %strong Search
+        %td <code>.form-search</code>
+        %td Similar to inline, but targets a search field
+
+#forms_example.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Example forms <span>forms.sass</span>
+  .sg-quarter.pull
+    %h4 Basic form
+    %p Small sample of form control elements using the default layout.
+  .sg-threequarter.push
+    %form.well.dark
+      %ol
+        %li
+          %label.label(for="example_url") Domain Name<abbr title="required">*</abbr>
+          %input.input-medium(id="example_url" type="url" name="example[url]" placeholder="www.example.com")
+          %p.hint Enter your domain name!
+        %li.boolean
+          %label(for="example_check" name="example[check]")
+            %input(id="example_check" name="example[check]" type="checkbox" value="0")
+            Check this box!
+        %li.form-actions.dark
+          %button.btn(type="submit") Submit
+
+.sg-subsection
+  .sg-quarter.pull
+    %h4 Search form
+    %p Add the class <code>search-query</code> to input elements for rounded corners.
+  .sg-threequarter.push
+    %form.form-search.well.dark
+      %ol
+        %li
+          %input.search-query.input-small(type="search" name="test[search]" placeholder="google")
+          %button.btn(type="submit") Search
+
+.sg-subsection
+  .sg-quarter.pull
+    %h4 Inline form
+    %p Use the inline form for small forms needing a compact style.
+  .sg-threequarter.push
+    %form.form-inline.well.dark
+      %ol
+        %li
+          %input.input-small(type="email" name="test[email]" placeholder="email")
+          %input.input-small(type="password" name="test[password]" placeholder="password")
+          %button.btn(type="submit") Go
+
+#forms_vertical.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Vertical form
+  %form
+    = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "vert_", :legend => 'I am Legend', :state => "", :disabled => "", :dark => ""}
+
+#forms_horizontal.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Horizontal form
+  %form.form-horizontal.well.dark
+    = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "horz_", :legend => 'Legend, starring Tom Cruise', :state => "", :disabled => "", :dark => "dark"}
+  .notification.important.fade.in
+    %p <strong>Tip!</strong> Add one of the <code>.well</code> classes to the <code>form</code> element to contain it from other items on the page
+
+#forms_structure.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Form structure
+  %p Forms are built around the structure output from <a href="https://github.com/justinfrench/formtastic">formtastic</a>.
+  %pre.prettyprint.html
+    = preserve do
+      :escaped
+        <form class="form-horizontal well dark">
+          <ol>
+            <li>
+              <label class="label" for="example_url">Domain Name<abbr title="required">*</abbr></label>
+              <input class="input-medium" id="example_url" name="example[url]" placeholder="www.example.com" type="url">
+              <p class="hint">Enter your domain name!</p>
+            </li>
+            <li class="boolean">
+              <label for="example_check" name="example[check]">
+                <input id="example_check" name="example[check]" type="checkbox" value="0">
+                Check this box!
+              </label>
+            </li>
+            <li class="form-actions dark">
+              <button class="btn" type="submit">Submit</button>
+            </li>
+          </ol>
+        </form>
+  %pre.haml.hidden
+    = preserve do
+      :escaped
+        %form.form-horizontal.well.dark
+          %ol
+            %li
+              %label.label(for="example_url")
+                Domain Name
+                %abbr(title="required") *
+              %input#example_url.input-medium(name="example[url]" placeholder="www.example.com" type="url")
+              %p.hint Enter your domain name!
+            %li.boolean
+              %label(for="example_check" name="example[check]")
+                %input#example_check(name="example[check]" type="checkbox" value="0") Check this box!
+            %li.form-actions dark
+              %button.btn(type="submit") Submit
+
+#forms_state.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Form states
+  .sg-half.pull
+    %form.form-horizontal.well
+      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "disabled_", :legend => 'Disabled states', :state => "", :disabled => "disabled", :dark => ""}
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add <code>.disable</code> to the <code>li</code> and a <code>disable</code> attribute to form controls
+  .sg-half.push
+    %form.form-horizontal.well
+      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "errors_", :legend => 'Error states', :state => "error", :disabled => "", :dark => ""}
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add the <code>.error</code> class to the <code>li</code> for the problem element
+
+.sg-subsection
+  .sg-half.pull
+    %form.form-horizontal.well
+      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "warn_", :legend => 'Warning states', :state => "warning", :disabled => "", :dark => ""}
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add the <code>.warning</code> class to the <code>li</code> for the problem element
+  .sg-half.push
+    %form.form-horizontal.well
+      = render :partial => 'underoos/styleguides/partials/form-template', :locals => {:uid => "success_", :legend => 'Success states', :state => "success", :disabled => "", :dark => ""}
+    .notification.important.fade.in
+      %p <strong>Note!</strong> Add the <code>.success</code> class to the <code>li</code> for the winning element
+
+#forms_inputs.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Additional input controls
+  %table.box.banded.thead-decorate
+    %thead
+      %tr
+        %th Control
+        %th Type
+        %th Description
+    %tfoot
+      %tr
+        %td(colspan="3") Descriptions courtesy <a href="https://developer.mozilla.org">Mozilla Developer Network</a>
+    %tbody
+      %tr
+        %td
+          %input.input-xlarge(type="email" name="email" placeholder="name@example.com")
+        %td <code>email</code>
+        %td Text field for editing an e-mail address, <code>:valid</code> and <code>:invalid</code> pseudo-classes are applied
+      %tr
+        %td
+          %input.input-xlarge(type="password" name="password" placeholder="password")
+        %td <code>password</code>
+        %td A single-line text field whose value is obscured
+      %tr
+        %td
+          %input.input-xlarge(type="url" name="url" placeholder="www.example.com")
+        %td <code>url</code>
+        %td Text field for editing a URL, <code>:valid</code> and <code>:invalid</code> pseudo-classes are applied
+      %tr
+        %td
+          %input.input-xlarge(type="tel" name="tel" placeholder="303-867-5309")
+        %td <code>tel</code>
+        %td Text field for entering a telephone number, <code>:valid</code> and <code>:invalid</code> pseudo-classes are applied
+      %tr
+        %td
+          %input.input-xlarge(type="datetime" name="datetime" placeholder="2012-01-29 12:06:23:21")
+        %td <code>datetime</code>
+        %td Date and time control with the time zone set to UTC
+      %tr
+        %td
+          %input.input-xlarge(type="datetime-local" name="datetime-local" placeholder="2012-01-29 12:06:23:21")
+        %td <code>datetime-local</code>
+        %td Date and time control with no time zone
+      %tr
+        %td
+          %input.input-xlarge(type="time" name="time" placeholder="12:06:23:21")
+        %td <code>time</code>
+        %td Time control with no time zone
+      %tr
+        %td
+          %input.input-xlarge(type="date" name="date" placeholder="2012-01-29")
+        %td <code>date</code>
+        %td Date control with no time zone
+      %tr
+        %td
+          %input.input-xlarge(type="month" name="month" placeholder="2012-01")
+        %td <code>month</code>
+        %td Date control consisting of a year and a month with no time zone
+      %tr
+        %td
+          %input.input-xlarge(type="week" name="week" placeholder="42")
+        %td <code>week</code>
+        %td Date control consisting of a week-year number and a week number with no time zone
+      %tr
+        %td
+          %input.input-xlarge(type="number" name="number" placeholder="5" min="0" max="10")
+        %td <code>number</code>
+        %td Control for floating point values, add <code>min</code> and <code>max</code> attributes to create a spinner
+      %tr
+        %td
+          %input.input-xlarge(type="range" name="range" placeholder="5" min="0" max="10" step=".5")
+        %td <code>range</code>
+        %td Slider control for numbers where exact value is not important, add <code>min</code>, <code>max</code> and <code>step</code> attributes
+      %tr
+        %td
+          %input.input-xlarge(type="color" name="color" placeholder="#fff" alt="color")
+        %td <code>color</code>
+        %td A control for specifying a color
+      %tr
+        %td
+          %input.input-xlarge(type="hidden" name="hidden" placeholder="hidden")
+        %td <code>hidden</code>
+        %td A control that is not displayed, but whose value is submitted to the server
+
+#forms_typeahead.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Typeahead <span>forms.sass, dropdowns.sass</span>
+  .sg-onethird.pull
+    %p For quick auto-complete functionality, utilize the typeahead component. It's a combination of an input with a <code>data-provide="typeahead"</code> attribute and a drop down menu.
+    %br
+    %p The component requires <a href="http://twitter.github.com/bootstrap/javascript.html#typeahead">Bootstrap's typeahead plugin</a>.
+    %br
+    %p The plugin, appends a <code>ul.typeahead.dropdown-menu</code> list to the <code>body</code> element. There are no specific styles included within underoos for typeaheads as they are primarily a combination of existing components.
+  .sg-twothird.push
+    .well
+      %form
+        %ol
+          %li
+            %input.input-medium#superfriends(type="text" data-provide="typeahead" autocomplete="off" placeholder="Add Superfriends")
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <form>
+            <ol>
+              <li>
+                <input id="superfriends" data-provide="typeahead" autocomplete="off" placeholder="Add" type="text">
+              </li>
+            </ol>
+          </form>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %form
+            %ol
+              %li
+                %input#superfriends(type="text" data-provide="typeahead" autocomplete="off" placeholder="Add")
+    %pre.prettyprint
+      = preserve do
+        :escaped
+          // Instantiate the typeahead instance based off an id
+          $('#superfriends').typeahead({source:['Aquaman', 'Superman'] , items:10})
+
+    .notification.important.fade.in
+      %p <strong>Tip!</strong> Make sure to include the attribute <code>autocomplete="off"</code> to disable the browser's default behavior
+
+
+#forms_editable.sg-spy-landing
+.sg-subsection
+  %h3.sg-subheading Content editable elements <span>forms.sass</span>
+  .sg-onethird.pull
+    %p Applying the attribute <code>contenteditable="true"</code> to elements allows the user to change the contents within the item. Elements that are editable typically include states for <code>hover</code> and <code>focus</code> while a user is editing.
+  .sg-twothird.push
+    .well
+      %h3(contenteditable="true") Edit Title
+      %p(contenteditable="true") Edit Description
+    %pre.prettyprint.html
+      = preserve do
+        :escaped
+          <h3 contenteditable="true">Edit Title</h3>
+          <p contenteditable="true">Edit Description</p>
+    %pre.prettyprint.haml.hidden
+      = preserve do
+        :escaped
+          %h3(contenteditable="true") Edit Title
+          %p(contenteditable="true") Edit Description
+

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

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

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

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

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