effective_style_guide 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: cc683801962056027264e975207cb98e85a9064b
+  data.tar.gz: da9b1084ddee2faf65a7f333f817118b3a227393
+SHA512:
+  metadata.gz: 7caed712627d44e591b6d58083231612f3a3f4732981a9f45f39ccd6f8f665050af71d93efa8d4b12307bf0bfb325e3f6c5c1821d1bacbe8e796d22d4c8dcd0a
+  data.tar.gz: 79a9cab7c6068d88c8f0ae52fdffdada6de4d2ddb353073df69063590fa38e5989824a5d3a1cc3ba9adb1b80de8403a4a561573aab333334f212d5e950e8e91c

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2014 Code and Effect Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,366 @@
+# Effective Style Guide
+
+Ensure that your custom CSS theme looks good with all Twitter Bootstrap3 html components.
+
+Creates a /styleguide page that renders the correct HTML for all bootstrap3 (v3.2.0) components.
+
+Use this page to ensure that your custom CSS theme looks good with the bootstrap3 components.
+
+Create a _my_component.html.erb partial in the /effective/style_guide/ directory to add your own custom components.
+
+Works with simple_form to ensure that the generated form HTML matches the bootstrap3 HTML.
+
+
+## Getting Started
+
+Add to your Gemfile:
+
+```ruby
+gem 'effective_style_guide'
+```
+
+Run the bundle command to install it:
+
+```console
+bundle install
+```
+
+Then run the generator:
+
+```ruby
+rails generate effective_style_guide:install
+```
+
+The generator will install an initializer which describes all configuration options.
+
+You must include the Twitter Bootstrap3 Javascript and CSS assets on your own.  They are not included with this gem.
+
+## Usage
+
+Visit /styleguide to test how the bootstrap3 components look with your site's design (css theme).
+
+
+### Add Custom Components
+
+Create a _my_component.html.erb partial in the app/views/effective/style_guide/ directory.
+
+This file will be automatically detected and included in the /styleguide page.
+
+
+### simple_form
+
+simple_form (https://github.com/plataformatec/simple_form) is a pretty good FormBuilder gem.
+
+At this time of writing, the latest simple_form v3.1.0.rc2 includes a bootstrap3 config/initializer that gets very close to generating the correct bootstrap3 form HTML (as per bootstrap's example page).
+
+Very close, but not quite perfect.
+
+It is also somewhat cumbersome to work with vertical, horizontal and inline forms from within the same app.
+
+Due to these limitations, we have created our own custom config/initializer that does generate the correct bootstrap3 form HTML.
+
+Here is the initializer:
+
+```ruby
+SimpleForm.setup do |config|
+  config.error_notification_class = 'alert alert-danger'
+  config.button_class = 'btn btn-primary'
+  config.boolean_label_class = nil
+
+  config.boolean_style = :nested
+  config.browser_validations = true
+
+  config.form_class = ''
+  config.default_wrapper = :vertical_form
+
+  config.wrapper_mappings = {
+    :boolean => :vertical_boolean,
+    :check_boxes => :vertical_radio_and_checkboxes,
+    :radio_buttons => :vertical_radio_and_checkboxes,
+
+    :horizontal_form => {
+      :boolean => :horizontal_boolean,
+      :check_boxes => :horizontal_radio_and_checkboxes,
+      :radio_buttons => :horizontal_radio_and_checkboxes
+    }
+  }
+
+  config.wrappers :vertical_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :label, class: 'control-label'
+
+    b.use :input, class: 'form-control'
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+  end
+
+  config.wrappers :vertical_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :readonly
+    b.use :label, class: 'control-label'
+
+    b.use :input
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+  end
+
+  config.wrappers :vertical_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.optional :readonly
+
+    b.wrapper tag: 'div', class: 'checkbox' do |ba|
+      ba.use :label_input
+    end
+
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+  end
+
+  config.wrappers :vertical_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.optional :readonly
+    b.use :label_input, :class => 'control-label'
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+  end
+
+  config.wrappers :vertical_inline_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.optional :readonly
+
+    b.use :label, class: 'control-label'
+
+    b.wrapper tag: 'div', class: 'inline-radio-or-checkboxes' do |ba|
+      ba.use :input
+    end
+
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+  end
+
+  config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :label, class: 'col-sm-3 control-label'
+
+    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
+      ba.use :input, class: 'form-control'
+      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    end
+  end
+
+  config.wrappers :horizontal_file_input, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :readonly
+    b.use :label, class: 'col-sm-3 control-label'
+
+    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
+      ba.use :input
+      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    end
+  end
+
+  config.wrappers :horizontal_boolean, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.optional :readonly
+
+    b.wrapper tag: 'div', class: 'col-sm-offset-3 col-sm-9' do |wr|
+      wr.wrapper tag: 'div', class: 'checkbox' do |ba|
+        ba.use :label_input, class: 'col-sm-9'
+      end
+
+      wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+      wr.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    end
+  end
+
+  config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.optional :readonly
+
+    b.use :label, class: 'col-sm-3 control-label'
+
+    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
+      ba.use :input
+      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    end
+  end
+
+  config.wrappers :horizontal_inline_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.optional :readonly
+
+    b.use :label, class: 'col-sm-3 control-label'
+
+    b.wrapper tag: 'div', class: 'col-sm-9' do |ba|
+      ba.wrapper tag: 'div', :class => 'inline-radio-or-checkboxes' do |bb|
+        bb.use :input
+      end
+
+      ba.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+    end
+  end
+
+  config.wrappers :inline_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
+    b.use :html5
+    b.use :placeholder
+    b.optional :maxlength
+    b.optional :pattern
+    b.optional :min_max
+    b.optional :readonly
+    b.use :label, class: 'sr-only'
+
+    b.use :input, class: 'form-control'
+    b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
+    b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
+  end
+
+end
+```
+
+To create a bootstrap3 vertical_form:
+
+```ruby
+= simple_form_for(@post) do |f|
+  # one or more inputs....
+  = f.buttom :submit
+```
+
+To create a bootstrap3 horizontal_form:
+
+```ruby
+= simple_form_for(@post, :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => SimpleForm.wrapper_mappings[:horizontal_form]) do |f|
+  # one or more inputs....
+  .form-group
+    .col-sm-offset-3.col-sm-9= f.button :submit
+```
+
+To create a bootstrap3 inline_form:
+
+```ruby
+= simple_form_for(@post, :html => {:class => 'form-inline'}, :wrapper => :inline_form) do |f|
+  # one or more inputs....
+  = f.button :submit
+```
+
+In all 3 of the above examples, the proper wrappers will be used to generate the correct HTML for every type of form field.
+
+This includes the frustrating booleans, radio and checkbox groups.
+
+One gotcha, if you'd like to use the 'Inline checkboxes and radios' component, you will need to pass a wrapper to the f.input.
+
+For a vertical_form or inline_form:
+
+```ruby
+= f.input :favorite_drink, :as => :check_boxes, :wrapper => :vertical_inline_radio_and_checkboxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda']
+```
+
+For a horizontal_form:
+
+```ruby
+= f.input :favorite_drink, :as => :check_boxes, :wrapper => :horizontal_inline_radio_and_checkboxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda']
+```
+
+And add the following CSS:
+
+```css
+form .inline-radio-or-checkboxes > span {
+  display: inline-block;
+  margin: 0px 10px 0px 0px;
+}
+```
+
+
+## Authorization
+
+All authorization checks are handled via the config.authorization_method found in the config/initializers/ file.
+
+It is intended for flow through to CanCan or Pundit, but that is not required.
+
+This method is called by all controller actions with the appropriate action and resource
+
+Action will be `:show` and the resource `Effective::StyleGuide.new()`
+
+The authorization method is defined in the initializer file:
+
+```ruby
+# As a Proc (with CanCan)
+config.authorization_method = Proc.new { |controller, action, resource| authorize!(action, resource) }
+```
+
+```ruby
+# As a Custom Method
+config.authorization_method = :my_authorization_method
+```
+
+and then in your application_controller.rb:
+
+```ruby
+def my_authorization_method(action, resource)
+  current_user.is?(:admin) || EffectivePunditPolicy.new(current_user, resource).send('#{action}?')
+end
+```
+
+or disabled entirely:
+
+```ruby
+config.authorization_method = false
+```
+
+If the method or proc returns false (user is not authorized) an Effective::AccessDenied exception will be raised
+
+You can rescue from this exception by adding the following to your application_controller.rb:
+
+```ruby
+rescue_from Effective::AccessDenied do |exception|
+  respond_to do |format|
+    format.html { render 'static_pages/access_denied', :status => 403 }
+    format.any { render :text => 'Access Denied', :status => 403 }
+  end
+end
+```
+
+## License
+
+MIT License.  Copyright [Code and Effect Inc.](http://www.codeandeffect.com/)
+
+Code and Effect is the product arm of [AgileStyle](http://www.agilestyle.com/), an Edmonton-based shop that specializes in building custom web applications with Ruby on Rails.
+
+
+## Testing
+
+The test suite for this gem is unfortunately not yet complete.
+
+Run tests by:
+
+```ruby
+rake spec
+```
+
+## Contributing
+
+1. Fork it
+2. Create your feature branch (`git checkout -b my-new-feature`)
+3. Commit your changes (`git commit -am 'Add some feature'`)
+4. Push to the branch (`git push origin my-new-feature`)
+5. Bonus points for test coverage
+6. Create new Pull Request
+
+

data/Rakefile

@@ -0,0 +1,20 @@
+#!/usr/bin/env rake
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+# Testing tasks
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+Bundler::GemHelper.install_tasks
+
+require 'rspec/core'
+require 'rspec/core/rake_task'
+
+desc "Run all specs in spec directory (excluding plugin specs)"
+RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
+
+task :default => :spec

data/app/controllers/effective/style_guide_controller.rb

@@ -0,0 +1,19 @@
+module Effective
+  class StyleGuideController < ApplicationController
+    layout EffectiveStyleGuide.layout || 'application'
+
+    def show
+      @partials = view_paths.map { |path| Dir["#{path}/effective/style_guide/_**"] }.flatten.map do |path|
+        name = File.basename(path)
+        name[1...name.index('.') || name.length] # remove the _ and .html.haml
+      end.uniq.sort
+
+      @partials.delete('effective_datatable') unless defined?(EffectiveDatatables)
+
+      @page_title ||= 'Style Guide'
+
+      EffectiveStyleGuide.authorized?(self, :show, Effective::StyleGuide.new())
+    end
+
+  end
+end

data/app/models/effective/access_denied.rb

@@ -0,0 +1,17 @@
+unless defined?(Effective::AccessDenied)
+  module Effective
+    class AccessDenied < StandardError
+      attr_reader :action, :subject
+
+      def initialize(message = nil, action = nil, subject = nil)
+        @message = message
+        @action = action
+        @subject = subject
+      end
+
+      def to_s
+        @message || I18n.t(:'unauthorized.default', :default => 'Access Denied')
+      end
+    end
+  end
+end

data/app/models/effective/datatables/style_guide.rb

@@ -0,0 +1,44 @@
+if defined?(EffectiveDatatables)
+  module Effective
+    module Datatables
+      class StyleGuide < Effective::Datatable
+        array_column :id, :width => '10%'
+        array_column :material, :filter => {:type => :select, :values => ['Stainless Steel', 'Copper', 'Cast Iron', 'Composite']}
+        array_column :bowl, :filter => {:type => :select, :values => ['Single Bowl', 'Double Bowl', 'Triple Bowl']}
+        array_column :name
+        array_column :actions, :filter => false, :sortable => false do
+          [link_to('View', '#'), link_to('Edit', '#')].join('&nbsp;-&nbsp;').html_safe
+        end
+
+        def collection
+          [
+            [1, 'Stainless Steel', 'Single Bowl', 'KOHLER Staccato'],
+            [2, 'Stainless Steel', 'Double Bowl', 'KOHLER Vault Undercounter'],
+            [3, 'Stainless Steel', 'Triple Bowl', 'KRAUS All-In-One'],
+            [4, 'Stainless Steel', 'Single Bowl', 'KOHLER Vault Dual Mount'],
+            [5, 'Stainless Steel', 'Single Bowl', 'KRAUS All-In-One Undermount'],
+            [6, 'Stainless Steel', 'Double Bowl', 'Glacier Bay All-in-One'],
+            [7, 'Stainless Steel', 'Single Bowl', 'Elkay Neptune'],
+            [8, 'Copper', 'Single Bowl', 'ECOSINKS Apron Front Dual Mount'],
+            [9, 'Copper', 'Double Bowl', 'ECOSINKS Dual Mount Front Hammered'],
+            [10, 'Copper', 'Triple Bowl', 'Glarier Bay Undermount'],
+            [11, 'Copper', 'Single Bowl', 'Whitehaus Undermount'],
+            [12, 'Copper', 'Double Bowl', 'Belle Foret Apron Front'],
+            [13, 'Copper', 'Double Bowl', 'Pegasus Dual Mount'],
+            [14, 'Cast Iron', 'Double Bowl', 'KOHLER Whitehaven'],
+            [15, 'Cast Iron', 'Triple Bowl', 'KOHLER Hartland'],
+            [16, 'Cast Iron', 'Single Bowl', 'KOHLER Cape Dory Undercounter'],
+            [17, 'Cast Iron', 'Double Bowl', 'KOLER Bakersfield'],
+            [18, 'Cast Iron', 'Double Bowl', 'American Standard Offset'],
+            [19, 'Cast Iron', 'Single Bowl', 'Brookfield Top'],
+            [20, 'Composite', 'Single Bowl', 'Blanco Diamond Undermount'],
+            [21, 'Composite', 'Double Bowl', 'Mont Blanc Waterbrook'],
+            [22, 'Composite', 'Triple Bowl', 'Pegasus Triple Mount'],
+            [23, 'Composite', 'Single Bowl', 'Swanstone Dual Mount']
+          ]
+        end
+
+      end
+    end
+  end
+end

data/app/models/effective/style_guide.rb

@@ -0,0 +1,28 @@
+module Effective
+  class StyleGuide < ActiveRecord::Base
+    def self.columns
+      @columns ||= [];
+    end
+
+    def self.column(name, sql_type = nil, default = nil, null = true)
+      columns << ActiveRecord::ConnectionAdapters::Column.new(name.to_s, default, sql_type.to_s, null)
+    end
+
+    column :id, :integer
+
+    column :title, :string
+    column :email, :string
+    column :password, :string
+    column :number, :integer
+    column :range, :integer
+    column :category, :string
+    column :content, :text
+    column :archived, :boolean
+    column :drink, :string
+    column :food, :string
+    column :price, :integer
+
+    validates_presence_of :id, :title, :email, :password, :number, :range, :category, :content, :archived, :drink, :food, :price
+
+  end
+end

data/app/views/effective/style_guide/_alerts.html.haml

@@ -0,0 +1,14 @@
+- variations = ['Success', 'Info', 'Notice', 'Alert', 'Warning', 'Danger']
+
+- variations.each do |variation|
+  .alert{:class => "alert-#{variation.downcase}"}
+    = "This is a #{variation.downcase} alert with a "
+    %a.alert-link{:href => '#'} link to somewhere
+
+- variations.each do |variation|
+  .alert.alert-dismissable{:class => "alert-#{variation.downcase}"}
+    %button.close{:type => 'button', 'data-dismiss' => 'alert'}
+      %span ×
+      %span.sr-only Close
+    %strong= variation
+    = "This is a dismissable #{variation.downcase} alert"

data/app/views/effective/style_guide/_breadcrumbs.html.haml

@@ -0,0 +1,12 @@
+%p
+  %ol.breadcrumb
+    %li.active Home
+
+  %ol.breadcrumb
+    %li= link_to 'Home', '#'
+    %li.active Category
+
+  %ol.breadcrumb
+    %li= link_to 'Home', '#'
+    %li= link_to 'Category', '#'
+    %li.active Page

data/app/views/effective/style_guide/_buttons.html.haml

@@ -0,0 +1,52 @@
+- variations = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger']
+
+%p
+  - variations.each do |variation|
+    .btn{:class => "btn-#{variation.downcase}"}= variation
+  %a.glyphicon.glyphicon-remove{:href => '#'}
+
+%p
+  .btn-group
+    %button.btn.btn-default{:type => 'button'} Left
+    %button.btn.btn-default{:type => 'button'} Middle
+    %button.btn.btn-default{:type => 'button'} Right
+
+%p
+  - variations.each do |variation|
+    .btn-group
+      %button.btn.dropdown-toggle{'data-toggle' => 'dropdown', :class => "btn-#{variation.downcase}"}
+        = variation
+        %span.caret
+      %ul.dropdown-menu{:role => 'menu'}
+        %li= link_to 'First', '#'
+        %li= link_to 'Second', '#'
+        %li= link_to 'Third', '#'
+        %li.divider
+        %li= link_to 'Separated', '#'
+
+%p
+  .btn-toolbar{:role => 'toolbar'}
+    .btn-group
+      %button.btn.btn-default{:type => 'button'} 1
+      %button.btn.btn-default{:type => 'button'} 2
+      %button.btn.btn-default{:type => 'button'} 3
+    .btn-group
+      %button.btn.btn-default{:type => 'button'} 4
+      %button.btn.btn-default{:type => 'button'} 5
+      %button.btn.btn-default{:type => 'button'} 6
+    .btn-group
+      %button.btn.btn-default{:type => 'button'} 7
+
+%p
+  - variations.each do |variation|
+    .btn-group
+      %button.btn{:class => "btn-#{variation.downcase}"}=variation
+      %button.btn.dropdown-toggle{'data-toggle' => 'dropdown', :class => "btn-#{variation.downcase}"}
+        %span.caret
+        %span.sr-only Toggle Dropdown
+      %ul.dropdown-menu{:role => 'menu'}
+        %li= link_to 'First', '#'
+        %li= link_to 'Second', '#'
+        %li= link_to 'Third', '#'
+        %li.divider
+        %li= link_to 'Separated', '#'

data/app/views/effective/style_guide/_effective_datatable.html.haml

@@ -0,0 +1,5 @@
+%br
+- if defined?(EffectiveDatatables)
+  = render_datatable Effective::Datatables::StyleGuide.new()
+- else
+  %p Please install the effective_datatables gem

data/app/views/effective/style_guide/_form_horizontal.html.haml

@@ -0,0 +1,38 @@
+= simple_form_for Effective::StyleGuide.new(), :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => SimpleForm.wrapper_mappings[:horizontal_form], :url => '/' do |f|
+  = f.input :title, :hint => 'please enter a title (this is a standard text field)'
+  = f.input :email, :hint => 'please enter an email address (this is an email field)'
+  = f.input :password, :hint => 'please enter a password (this is a password field)'
+  - if defined?(EffectiveOrders)
+    = f.input :price, :as => :price, :hint => 'please enter a price (this is a price field from EffectiveOrders)'
+  = f.input :number, :hint => 'please enter a number (this is a number field)'
+  = f.input :range, :as => :range, :hint => 'please enter a number range (this is a range field)'
+  = f.input :category, :as => :select, :collection => 10.times.map { |x| "Category #{x}"}, :hint => 'please select a category (this is a select field)'
+  = f.input :drink, :as => :check_boxes, :wrapper => :horizontal_inline_radio_and_checkboxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda'], :hint => 'please select one or more drinks (this is a check_boxes :wrapper => :horizontal_inline_radio_and_checkboxes field)'
+  = f.input :food, :as => :radio_buttons, :wrapper => :horizontal_inline_radio_and_checkboxes, :collection => ['Pasta', 'Rice', 'Potato', 'Couscous'], :hint => 'please select one food (this is a radio_buttons :wrapper => :horizontal_inline_radio_and_checkboxes field)'
+  = f.input :content, :hint => 'please enter a whole bunch of content (this is a textarea)'
+  = f.input :archived, :hint => 'please select true or false (this is a boolean field)'
+  = f.input :drink, :as => :check_boxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda'], :hint => 'please select one or more drinks (this is a check_boxes field)'
+  = f.input :food, :as => :radio_buttons, :collection => ['Pasta', 'Rice', 'Potato', 'Couscous'], :hint => 'please select one food (this is a radio_buttons field)'
+  .form-group
+    .col-sm-offset-3.col-sm-9= f.button :submit
+
+%hr
+.inline-example Form Horizontal Invalid State
+
+= simple_form_for Effective::StyleGuide.new().tap { |s| s.valid? }, :html => {:class => 'form-horizontal'}, :wrapper => :horizontal_form, :wrapper_mappings => SimpleForm.wrapper_mappings[:horizontal_form], :url => '/' do |f|
+  = f.input :title, :hint => 'please enter a title (this is a standard text field)'
+  = f.input :email, :hint => 'please enter an email address (this is an email field)'
+  = f.input :password, :hint => 'please enter a password (this is a password field)'
+  - if defined?(EffectiveOrders)
+    = f.input :price, :as => :price, :hint => 'please enter a price (this is a price field from EffectiveOrders)'
+  = f.input :number, :hint => 'please enter a number (this is a number field)'
+  = f.input :range, :as => :range, :hint => 'please enter a number range (this is a range field)'
+  = f.input :category, :as => :select, :collection => 10.times.map { |x| "Category #{x}"}, :hint => 'please select a category (this is a select field)'
+  = f.input :drink, :as => :check_boxes, :wrapper => :horizontal_inline_radio_and_checkboxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda'], :hint => 'please select one or more drinks (this is a check_boxes :wrapper => :horizontal_inline_radio_and_checkboxes field)'
+  = f.input :food, :as => :radio_buttons, :wrapper => :horizontal_inline_radio_and_checkboxes, :collection => ['Pasta', 'Rice', 'Potato', 'Couscous'], :hint => 'please select one food (this is a radio_buttons :wrapper => :horizontal_inline_radio_and_checkboxes field)'
+  = f.input :content, :hint => 'please enter a whole bunch of content (this is a textarea)'
+  = f.input :archived, :wrapper => :horizontal_boolean, :hint => 'please select true or false (this is a boolean field)'
+  = f.input :drink, :wrapper => :horizontal_radio_and_checkboxes, :as => :check_boxes, :collection => ['Water', 'Tea', 'Coffee', 'Soda'], :hint => 'please select one or more drinks (this is a check_boxes field)'
+  = f.input :food, :wrapper => :horizontal_radio_and_checkboxes, :as => :radio_buttons, :collection => ['Pasta', 'Rice', 'Potato', 'Couscous'], :hint => 'please select one food (this is a radio_buttons field)'
+  .form-group
+    .col-sm-offset-3.col-sm-9= f.button :submit

data/app/views/effective/style_guide/_form_inline.html.haml

@@ -0,0 +1,16 @@
+= simple_form_for Effective::StyleGuide.new(), :html => {:class => 'form-inline'}, :wrapper => :inline_form, :url => '/' do |f|
+  = f.input :title, :placeholder => 'Enter title'
+  = f.input :email, :placeholder => 'Enter email'
+  = f.input :category, :as => :select, :collection => 10.times.map { |x| "Category #{x}"}
+  = f.input :archived
+  = f.button :submit
+
+%hr
+.inline-example Inline Form Invalid State
+
+= simple_form_for Effective::StyleGuide.new().tap { |s| s.valid? }, :html => {:class => 'form-inline'}, :wrapper => :inline_form, :url => '/' do |f|
+  = f.input :title, :placeholder => 'Enter title'
+  = f.input :email, :placeholder => 'Enter email'
+  = f.input :category, :as => :select, :collection => 10.times.map { |x| "Category #{x}"}
+  = f.input :archived
+  = f.button :submit