underoos 1.0.0 → 1.1.0

data/Gemfile

@@ -3,3 +3,8 @@ source :rubygems
 gemspec
 
 gem 'thin'
+gem 'jquery-rails'
+gem 'coffee-rails'
+
+gem 'sherpa', git: 'git://github.com/modeset/sherpa.git'
+# gem 'sherpa', path: '~/Sites/sherpa'

data/Gemfile.lock

@@ -1,8 +1,15 @@
+GIT
+  remote: git://github.com/modeset/sherpa.git
+  revision: 6428d27b2eecbd2809c8e5793a8c867cee38a9da
+  specs:
+    sherpa (0.1.0)
+      mustache (~> 0.99.4)
+      redcarpet (~> 2.1.1)
+
 PATH
   remote: .
   specs:
     underoos (1.0.0)
-      haml-rails
       rails (>= 3.1.0)
       sass-rails
 
@@ -45,6 +52,13 @@ GEM
     builder (3.0.0)
     childprocess (0.3.1)
       ffi (~> 1.0.6)
+    coffee-rails (3.2.2)
+      coffee-script (>= 2.2.0)
+      railties (~> 3.2.0)
+    coffee-script (2.2.0)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.3.3)
     cucumber (1.1.9)
       builder (>= 2.1.2)
       diff-lcs (>= 1.1.2)
@@ -55,15 +69,11 @@ GEM
     diff-lcs (1.1.3)
     erubis (2.7.0)
     eventmachine (0.12.10)
+    execjs (1.4.0)
+      multi_json (~> 1.0)
     ffi (1.0.11)
     gherkin (2.9.0)
       json (>= 1.4.6)
-    haml (3.1.4)
-    haml-rails (0.3.4)
-      actionpack (~> 3.0)
-      activesupport (~> 3.0)
-      haml (~> 3.0)
-      railties (~> 3.0)
     hike (1.2.1)
     i18n (0.6.0)
     journey (1.0.3)
@@ -77,6 +87,7 @@ GEM
       treetop (~> 1.4.8)
     mime-types (1.17.2)
     multi_json (1.1.0)
+    mustache (0.99.4)
     polyglot (0.3.3)
     rack (1.4.1)
     rack-cache (1.2)
@@ -103,6 +114,7 @@ GEM
     rake (0.9.2.2)
     rdoc (3.12)
       json (~> 1.4)
+    redcarpet (2.1.1)
     rspec (2.8.0)
       rspec-core (~> 2.8.0)
       rspec-expectations (~> 2.8.0)
@@ -137,7 +149,9 @@ PLATFORMS
 
 DEPENDENCIES
   aruba
+  coffee-rails
   cucumber
   jquery-rails
+  sherpa!
   thin
   underoos!

data/README.md

@@ -1,13 +1,88 @@
-# underoos are fun to wear
+## underoos
 
-Stop back soon! We are just getting this bad boy going, it's in total turmoil at the moment.
+Base styles, component and layout structures for a projects foundation.
 
-![underoos](http://oofblamargh.typepad.com/.a/6a0120a6b84d21970b01543408e128970c-800wi "title")
+1. Crafted in [Sass](http://sass-lang.com/) - the actual `.sass` version
+- Tuned for responsiveness with `ems` and `percentages` instead of pixel measurements
+- Structured, consistent markup allowing a common language between front and back end development teams
+- Minimal styles for quick prototypes, and allowing development teams to move forward while still in design phase
+- Built to work with [Compass](http://compass-style.org/) or [Bourbon](http://thoughtbot.com/bourbon/) out of the box (though not a requirement by any means)
+
+Underoos is meant as the starting point for an application. All of the `.sass` files are meant to be tweaked to the design, the important part is maintaining the structure of the markup as close as possible. This allows back end developers, front end developers and design teams to work simultaneously across an application. Underoos is the fancy stuff under the pants.
+
+For more details around Underoos and how it works, take a look at the [interactive docs](http://underoos.modeset.com/docs/style.html).
+
+Underoos is still under continuous development. It's stable, but is subject to some changes.
+
+### Browser support
+
+- Modern browsers (Chrome, Safari, Firefox, Internet Explorer 9+)
+- Mobile/Tablet browsers (The Webkits)
+- Internet Explorer 8
+- Internet Explorer 7 (This needs to be enabled)
+
+### Requirements
+
+- Sass 3.1+ (files can easily be converted to `scss` by using the `sass-convert` tool)
+
+### Installation
+
+Within a Rails environment:
+
+Include underoos in your Gemfile
+
+    gem 'underoos'
+
+Then run the generator
+
+    rails g underoos:assets
+
+Currently in other environments, it's a manual operation, but it's on our short list to automate this.
+
+1. Clone or download the repository
+- Copy over the `.sass` files from within `underoos/app/assets/stylesheets/`
+- Copy over the `javascripts` files from within `underoos/app/assets/javascripts/`
+- Copy over the `javascripts` files from within `underoos/vendor/assets/javascripts/`
+- Optionally copy over the `./script/javascripts` for pulling down the latest vendor javascripts
+
+We know this sort of sucks ATM, but we'll get something better in place, promise.
+
+
+### What's with all the comments?
+
+Underoos utilizes [sherpa](https://github.com/modeset/sherpa) for documentation generation. This means the comments actually generate a [living styleguide](http://underoos.modeset.com/docs/style.html). As long as the structure doesn't change, the styleguide will be updated as you change style configurations. This allows documentation to be portable across applications. If you're like us, you hate documenting, so creating an automated task is a bonus all around. We will most likely move the inline documentation to external files in the very near future. Stay tuned.
+
+See the [sherpa](https://github.com/modeset/sherpa) project for more details. 
+
+### Inspirations
+
+Underoos is heavily inspired by the fabulous [Twitter Bootstrap](http://twitter.github.com/bootstrap/) library. In fact, we are using most of the JavaScript files contained within Bootstrap. We literally built underoos and it's documentation on the backs of giants. Let us give credit where credit is due. There are some key differences between underoos and bootstrap, so don't think of it as a pure clone.
+
+If you don't mind dealing with the [less library](http://lesscss.org/), you should be using Twitter's Bootstrap.
+
+### Road Map
+
+Feature updates are currently being run through a [Pivotal Tracker project](https://www.pivotaltracker.com/projects/485221).
+
+
+### Contributing
+
+We are happy to take pull requests and bug fixes, but please follow these simple rules.
+
+1. Needs to pass in all supported browsers (ie7 doesn't necessarily need to be perfect!)
+- Documentation needs to reflect changes or additions
+
+Feel free to check in with us before working on anything just to make sure we haven't started down the path already.
+
+To work with the repository, clone and run the following:
+
+    bundle
+    rake sherpa:html
+
+Anytime you alter documentation, you'll need to run `rake sherpa:html` to regenerate it. If you are only tweaking styles, there is no need to rerun this command, just hit refresh.
+
+
+### Licensing
+
+Underoos is [MIT licensed](https://raw.github.com/modeset/underoos/master/LICENSE), so do what you want with these files. We built them for us, but hopefully this makes somebody's life easier too. If you use underoos in a project, like us on Facebook... just kidding, don't do that, that is just lame. Seriously though, let us know how it goes.
 
-<!-- 
--# This is so dirty and not in that good way.
-:ruby
-  def partial(file)
-    return haml_concat(Haml::Engine.new(IO.read("app/views/styleguide/_#{file}.haml")).render)
-  end
- -->

data/Rakefile

@@ -1,6 +1,6 @@
 require "bundler/gem_tasks"
 
-begin 
+begin
   require 'cucumber'
   require 'cucumber/rake/task'
 
@@ -10,3 +10,38 @@ begin
 rescue LoadError
   puts 'Could not load Cucumber'
 end
+
+namespace :sherpa do
+
+  desc 'Inspect the output generated by the sherpa parser as json'
+  task :probe do
+    `bundle exec sherpa -i ./sherpa/config.yml -d`
+  end
+
+  desc 'Generate html documentation from a config.yml file'
+  task :html do
+    `bundle exec sherpa -i ./sherpa/config.yml --html`
+  end
+
+  desc 'Generate a single markdown file of all sherpa raw blocks'
+  task :markdown do
+    `bundle exec sherpa -i ./sherpa/config.yml --markdown`
+  end
+
+  desc 'Generate a markdown file for each section of the sherpa raw blocks'
+  task :markdown_sections do
+    `bundle exec sherpa -i ./sherpa/config.yml --markdown-sections`
+  end
+
+  desc 'Generate a json file from the output of the sherpa parser'
+  task :json do
+    `bundle exec sherpa -i ./sherpa/config.yml --json`
+  end
+
+  desc 'Generates all output types supported by sherpa'
+  task :outputs do
+    `bundle exec sherpa -i ./sherpa/config.yml --html --markdown --markdown-sections --json`
+  end
+
+end
+

data/app/assets/javascripts/docs.js

@@ -0,0 +1,6 @@
+
+/* VENDOR ASSETS */
+//= require prettify
+//= require sherpa
+//= require styleguide
+

data/app/assets/javascripts/styleguide.coffee

@@ -0,0 +1,162 @@
+
+# Demos various aspects of the styleguide in a very dirty way.
+class Styleguide
+  constructor: ->
+    @initialize()
+
+  initialize: ->
+    @addListeners()
+    @prettyCodeBlocks()
+    @demoTips()
+    @demoTypeahead()
+
+  addListeners: ->
+    $('#underoos_nav_demo').on 'click', @demoNav
+    $('#underoos_buttons_demo').on 'click', @demoButtons
+    $('.btn[data-complete-text]').on 'click', @demoSending
+    $('#underoos_table_demo a').on 'click', @demoTable
+    $('#underoos_form_demo_type a').on 'click', @demoForm
+    $('#underoos_upgrade_demo').on 'click', @demoUpgrades
+    $('.upgrade-close').on 'click', @closeUpgrades
+    $('.progress').on 'click', @demoProgressBars
+
+  # Turn code blocks into pretty colors
+  prettyCodeBlocks: ->
+    $('.sherpa-description > pre').addClass('prettyprint')
+    window.prettyPrint()
+
+  # Demos structures built off the base `.nav` class
+  demoNav: (e) =>
+    e.preventDefault()
+    target = $(e.target)
+    classes = target.data('classes')
+    nav = target.parents('.nav').first()
+    li = target.parent('li')
+    nav.removeClass().addClass(classes)
+    nav.find('li').removeClass('active')
+    li.addClass('active')
+
+  # Demos various states on `.btn` elements within a table
+  demoButtons: (e) =>
+    e.preventDefault()
+    target = $(e.target)
+    classes = target.data('class')
+    buttons = target.parents('.sherpa-section').first().find('#base-buttons > table button')
+    if classes is "normal"
+      buttons.removeClass('active error disabled small large')
+    else
+      buttons.removeClass('active error disabled small large')
+      buttons.addClass(classes)
+
+  # Demos a stateful button
+  demoSending: (e) =>
+    e.preventDefault()
+    target = $(e.target)
+    target.button('loading')
+    setTimeout((->
+      target.button('complete')
+    ), 3000)
+
+  # Demos additive classes around table styles
+  demoTable: (e) =>
+    e.preventDefault()
+    target = $(e.target)
+    style = target.data('table')
+    table = target.parents('.sherpa-showcase').first().find('table')
+    table.toggleClass(style)
+
+  # Demos structures, states and well coloring related to forms
+  demoForm: (e) =>
+    e.preventDefault()
+    target = $(e.target)
+    form = target.parents('.sherpa-showcase').first().find('form')
+    style = target.data('form-type')
+
+    # Structures
+    if style is 'form-vertical'
+      form.removeClass('form-horizontal')
+    else if style is 'form-horizontal'
+      form.addClass('form-horizontal')
+
+    # Wells
+    else if style is 'regular'
+      @resetFormWells(form)
+      form.addClass('well')
+    else if style is 'empty'
+      @resetFormWells(form)
+    else if style is 'dark' or style is 'lite' or style is 'primary'
+      @resetFormWells(form)
+      form.addClass("well #{style}")
+
+    # States
+    else if style is 'normal'
+      @resetFormStates(form)
+    else if style is 'disabled'
+      @resetFormStates(form)
+      @setFormStates(form, style)
+      form.find('input').attr('disabled', 'disabled')
+      form.find('select').attr('disabled', 'disabled')
+      form.find('textarea').attr('disabled', 'disabled')
+    else if style is 'error' or style is 'success' or style is 'warning'
+      @resetFormStates(form)
+      @setFormStates(form, style)
+
+  # Resets form wells
+  resetFormWells: (form) ->
+    form.removeClass('well dark lite primary')
+
+  # Sets a state (error, warning, success, disabled) for form elements
+  setFormStates: (form, state) ->
+    form.find('li').addClass(state)
+    form.find('.uneditable').addClass(state)
+
+  # Resets form states back to normal
+  resetFormStates: (form) ->
+    form.find('li').removeClass('disabled error warning success')
+    form.find('.uneditable').removeClass('disabled error warning success')
+    form.find('input').removeAttr('disabled')
+    form.find('select').removeAttr('disabled')
+    form.find('textarea').removeAttr('disabled')
+
+  # Demos the typeahead plugin from an array
+  demoTypeahead: ->
+    superfriends = [
+       'Aquaman' ,'Batman' ,'Catwomen' ,'Daredevil' ,'Elektra' ,'Fantastic Four'
+      ,'Green Lantern' ,'Hulk' ,'Iron Man' ,'Jericho' ,'Karate Kid' ,'Lobo'
+      ,'Mr. Terrific' ,'Nightwing' ,'Obsidian' ,'Plastic Man' ,'Quicksilver'
+      ,'Robin' ,'Superman' ,'Teenage Mutant Ninja Turtles' ,'Ultraman'
+      ,'Vigilante' ,'Wolverine' ,'X-Men' ,'Yellow Jacket' ,'Zattana'
+    ]
+    $('#underoos_typeahead').typeahead({source:superfriends , items:10})
+
+  # Instantiates tooltips and popovers on the page
+  demoTips: ->
+    $("a[rel=tooltip]").tooltip()
+    $("a[rel=popover]").popover()
+
+  # Demos the animation on progress bars
+  demoProgressBars: ->
+    target = $(@)
+    bar = target.find('> .bar')
+    pb_width = target.width()
+    if bar.width() is pb_width
+      bar.css(width: '0%')
+    else
+      bar.css(width:'100%')
+
+  # Demos the upgrade message
+  demoUpgrades: (e) =>
+    e.preventDefault()
+    $('html').addClass('no-js lt-ie8')
+    window.scrollTo(0,0)
+
+  # Hop back down to upgrades after closing the window
+  closeUpgrades: (e) =>
+    e.preventDefault()
+    $('html').removeClass('no-js lt-ie8')
+    div = $('#layouts-upgrades')
+    window.scroll(0,div.offset().top)
+
+# Get this party started
+new Styleguide()
+

data/app/assets/javascripts/underoos.js

@@ -5,7 +5,6 @@
 //= require bootstrap-alert
 //= require bootstrap-modal
 //= require bootstrap-dropdown
-//= require bootstrap-scrollspy
 //= require bootstrap-tab
 //= require bootstrap-tooltip
 //= require bootstrap-popover

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

@@ -0,0 +1,14 @@
+
+//~ # Base
+// Sets up normalization and base styles for native elements and core classes.
+
+@import normalize
+@import scaffold
+@import helpers
+@import transitions
+@import typography
+@import button-btn-mixin
+@import buttons
+@import tables
+@import forms
+

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

@@ -0,0 +1,68 @@
+
+//~
+// Button                                           | Class             | Description
+// ------------------------------------------------ | ----------------- | ---------------------------
+// <button class="btn">Default</button>             | `.btn`            | The default button is typically used in forms
+// <button class="btn info">Info</button>           | `.btn.info`       | The info button is an alternate to the default button
+// <button class="btn important">Important</button> | `.btn.important`  | The important button is used to showcase a primary action
+// <button class="btn success">Success</button>     | `.btn.success`    | The success button indicates a successful or positive action
+// <button class="btn warning">Warning</button>     | `.btn.warning`    | The warning button indicates caution should be taken with this action
+// <button class="btn danger">Danger</button>       | `.btn.danger`     | The danger button indicates a dangerous or potentially negative action
+// <button class="btn primary">Primary</button>     | `.btn.primary`    | The primary button is based off of the CI settings within the application
+//
+// The `.btn` button is built from a mixin (`base/_button-btn-mixin.sass`)
+//
+// All buttons come in a variety of states and sizes, toggle the buttons below for examples.
+//
+// Usage:
+//    <!-- Testing purposes only -->
+//    <nav class="button-group" data-toggle="buttons-radio" id="underoos_buttons_demo">
+//      <a class="btn active" href="#" data-class="normal">Normal</a>
+//      <a class="btn" href="#" data-class="active">Active</a>
+//      <a class="btn" href="#" data-class="error">Error</a>
+//      <a class="btn" href="#" data-class="disabled">Disabled</a>
+//      <a class="btn" href="#" data-class="small">Small</a>
+//      <a class="btn" href="#" data-class="large">Large</a>
+//    </nav>
+
+//~
+// #### Button elements
+// The `.btn` class can be applied to `<a>`, `<button>` and `<input>` elements.
+// Usage:
+//    <a class="btn" href="#">Link</a>
+//    <button class="btn" type="submit">Button</button>
+//    <input class="btn" type="button" value="Input">
+//    <input class="btn" type="submit" value="Submit">
+
+//~
+// #### Behaviors
+// Utilizing [Bootstrap's Button plugin](http://twitter.github.com/bootstrap/javascript.html#buttons),
+// you can control a button's states by utilizing the `data-toggle` attribute.
+//
+// State                                                                                      | Usage
+// ------------------------------------------------------------------------------------------ | --------------------------------------
+// <button class="btn" data-toggle="button">Toggle</button>                                   | Toggles active state on a single button
+// <button class="btn" data-complete-text="Sent" data-loading-text="sending...">Send</button> | Disables a button as information is being sent, resets on callback
+//
+// Notes:
+// - **Pro Tip!** See the [button groups](#components-button-groups) component for uses with `data-toggle="buttons-radio|checkbox"`
+
+.btn
+  +btn-button($standard, $grey6)
+  &.info
+    +btn-override($info, $white)
+  &.important
+    +btn-override($important, $white)
+  &.success
+    +btn-override($success, $white)
+  &.warning
+    +btn-override($warning, $white)
+  &.danger
+    +btn-override($danger, $white)
+  &.primary
+    +btn-override($primary, $white)
+
+// Fix standard links to closer resemble `button` elements
+a.btn
+  font-weight: bold
+