twitter bootstrap rails 3.1 notes

_flashes.html.erb

<% unless flash[:notice].blank? %>
  <div class="alert-message info">
    <%= content_tag :div, flash[:notice] %>
  </div>
<% end %>

<% unless flash[:error].blank? %>
  <div class="alert-message error">
    <%= content_tag :div, flash[:error] %>
  </div>
<% end %>

<% unless flash[:alert].blank? %>
  <div class="alert-message warning">
    <%= content_tag :div, flash[:alert] %>
  </div>
<% end %>

_footer.html.erb

<p>Footer</p>

_form.html.erb

<%%= simple_form_for(@<%= singular_table_name %>, :wrapper => :inline) do |f| %>
  <%%= f.error_notification %>

  <div class="inputs">
  <%- attributes.each do |attribute| -%>
    <%%= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> %>
  <%- end -%>
  </div>

  <div class="actions">
    <%%= f.button :submit %>
  </div>
<%% end %>

_header.html.erb

<h1>Header</h1>

_menu.html.erb

<ul class="nav">
  <li><%= link_to "Home", root_path %></li>
</ul>

appassetsstylesheetsapplication.css

/*
 *= require_self
 */

html, body {
  background-color: #eee;
}
body {
  padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}
.container > footer p {
  text-align: center; /* center align it with the container */
}
.container {
  width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
}

/* The white background content wrapper */
.content {
  background-color: #fff;
  padding: 20px;
  margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* Page header tweaks */
.page-header {
  background-color: #f5f5f5;
  padding: 20px 20px 10px;
  margin: -20px -20px 20px;
}

/* Styles you shouldn't keep as they are for displaying this base example only */
.content .span10,
.content .span4 {
  min-height: 500px;
}
/* Give a quick and non-cross-browser friendly divider */
.content .span4 {
  margin-left: 0;
  padding-left: 19px;
  border-left: 1px solid #eee;
}

.topbar .btn {
  border: 0;
}
.actions {
  padding: 17px 20px 18px 20px;
}
.row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.field_with_errors {
  padding: 2px;
  background-color: #FDDFDE;
  border-color: #FBC7C6;
  display: table;
}

apphelperserror_messages_helper.rb

module ErrorMessagesHelper

  def error_messages_for(*objects)
    options = objects.extract_options!
    options[:header_message] ||= I18n.t(:"activerecord.errors.header", :default => "Invalid Fields")
    options[:message] ||= I18n.t(:"activerecord.errors.message", :default => "Please correct the following problems and try again")
    messages = objects.compact.map { |o| o.errors.full_messages }.flatten
    unless messages.empty?
      content_tag(:div, :class => "alert-message block-message error") do
        list_items = messages.map { |msg| content_tag(:li, msg) }
        content_tag(:h2, options[:header_message], :class=>"bold") + content_tag(:p, options[:message]) + content_tag(:ul, list_items.join.html_safe)
      end
    end
  end

  module FormBuilderAdditions
    def error_messages(options = {})
      @template.error_messages_for(@object, options)
    end
  end

end

ActionView::Helpers::FormBuilder.send(:include, ErrorMessagesHelper::FormBuilderAdditions)

application.css

/*
 *= require_self
 */

html, body {
  background-color: #eee;
}
body {
  padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}
.container > footer p {
  text-align: center; /* center align it with the container */
}
.container {
  width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
}

/* The white background content wrapper */
.content {
  background-color: #fff;
  padding: 20px;
  margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* Page header tweaks */
.page-header {
  background-color: #f5f5f5;
  padding: 20px 20px 10px;
  margin: -20px -20px 20px;
}

/* Styles you shouldn't keep as they are for displaying this base example only */
.content .span10,
.content .span4 {
  min-height: 500px;
}
/* Give a quick and non-cross-browser friendly divider */
.content .span4 {
  margin-left: 0;
  padding-left: 19px;
  border-left: 1px solid #eee;
}

.topbar .btn {
  border: 0;
}
.actions {
  padding: 17px 20px 18px 20px;
}
.row {
  margin-top: 10px;
  margin-bottom: 10px;
}
.field_with_errors {
  padding: 2px;
  background-color: #FDDFDE;
  border-color: #FBC7C6;
  display: table;
}

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for?(:title) ? yield(:title) : "Twitter Bootstrap" %></title>

    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tag %>

    <%= yield(:head) %>
  </head>

  <body>
    <div class="topbar">
      <div class="fill">
        <div class="container">
          <%= render :partial => 'common/menu' %>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="content">
        <div class="page-header">
          <%= render :partial => 'common/header' %>
        </div>

        <div class="row">
          <div class="span12">

            <%= render :partial => 'common/flashes' %>

            <%= yield %>
          </div>
        </div>

        <footer>
        <%= render :partial => 'common/footer' %>
        </footer>
      </div>
    </div>

  </body>
</html>

appviewscommon_flashes.html.erb

<% unless flash[:notice].blank? %>
  <div class="alert-message info">
    <%= content_tag :div, flash[:notice] %>
  </div>
<% end %>

<% unless flash[:error].blank? %>
  <div class="alert-message error">
    <%= content_tag :div, flash[:error] %>
  </div>
<% end %>

<% unless flash[:alert].blank? %>
  <div class="alert-message warning">
    <%= content_tag :div, flash[:alert] %>
  </div>
<% end %>

appviewscommon_footer.html.erb

<p>Footer</p>

appviewscommon_header.html.erb

<h1>Header</h1>

appviewscommon_menu.html.erb

<ul class="nav">
  <li><%= link_to "Home", root_path %></li>
</ul>

appviewslayoutsapplication.html.erb

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "App_Name" %></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <%= stylesheet_link_tag    "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= yield(:head) %>
  </head>
  <body class="<%= params[:controller] %>">
    <header class="navbar navbar-fixed-top">
      <nav class="navbar-inner">
        <div class="container">
          <%= link_to "App_Name", root_path %>
          <ul class="pull-right nav">
            <%= render 'shared/navigation' %>
          </ul>
        </div>
      </nav>
    </header>
    <div id="main" role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">
              <%= render :partial => 'shared/flashes' %>
              <%= yield %>
            </div>
          </div>
          <footer>
            <%= render :partial => 'shared/footer' %>
          </footer>
        </div>
      </div> <!--! end of .container -->
    </div> <!--! end of #main -->
  </body>
</html>

configinitializerssimple_form.rb

SimpleForm.setup do |config|

  config.wrappers :inline, :class => 'clearfix', :error_class => :error do |b|
    b.use :placeholder
    b.use :label
    b.use :tag => 'div', :class => 'input' do |ba|
      ba.use :input
      ba.use :error, :tag => :span, :class => :'help-inline'
      ba.use :hint,  :tag => :span, :class => :'help-block'
    end
  end

  config.wrappers :stacked, :class => "clearfix", :error_class => :error do |b|
    b.use :placeholder
    b.use :label
    b.use :hint,  :tag => :span, :class => :'help-block'
    b.use :tag => 'div', :class => 'input' do |input|
      input.use :input
      input.use :error, :tag => :span, :class => :'help-inline'
    end
  end

  # Method used to tidy up errors.
  # config.error_method = :first

  # Default tag used for error notification helper.
  config.error_notification_tag = :div

  # CSS class to add for error notification helper.
  config.error_notification_class = :"alert-message block-message error"

  # ID to add for error notification helper.
  # config.error_notification_id = nil

  # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
  # config.collection_wrapper_tag = nil

  # You can wrap each item in a collection of radio/check boxes with a tag, defaulting to span.
  # config.item_wrapper_tag = :span

  # Series of attempts to detect a default label method for collection.
  # config.collection_label_methods = [ :to_label, :name, :title, :to_s ]

  # Series of attempts to detect a default value method for collection.
  # config.collection_value_methods = [ :id, :to_s ]

  # How the label text should be generated altogether with the required text.
  config.label_text = lambda { |label, required| "#{label} #{required}" }

  # You can define the class to use on all labels. Default is nil.
  # config.label_class = nil

  # You can define the class to use on all forms. Default is simple_form.
  # config.form_class = :simple_form

  # Whether attributes are required by default (or not). Default is true.
  # config.required_by_default = true

  # Tell browsers whether to use default HTML5 validations (novalidate option).
  # Default is enabled.
  config.browser_validations = false

  # Determines whether HTML5 types (:email, :url, :search, :tel) and attributes
  # (e.g. required) are used or not. True by default.
  # Having this on in non-HTML5 compliant sites can cause odd behavior in
  # HTML5-aware browsers such as Chrome.
  # config.html5 = true

  # Custom mappings for input types. This should be a hash containing a regexp
  # to match as key, and the input type that will be used when the field name
  # matches the regexp as value.
  # config.input_mappings = { /count/ => :integer }

  # Collection of methods to detect if a file type was given.
  # config.file_methods = [ :mounted_as, :file?, :public_filename ]

  # Default priority for time_zone inputs.
  # config.time_zone_priority = nil

  # Default priority for country inputs.
  # config.country_priority = nil

  # Default size for text inputs.
  # config.default_input_size = 50

  # When false, do not use translations for labels, hints or placeholders.
  # config.translate = true

  # Default class for buttons
  config.button_class = 'btn'
end

error_messages_helper.rb

module ErrorMessagesHelper

  def error_messages_for(*objects)
    options = objects.extract_options!
    options[:header_message] ||= I18n.t(:"activerecord.errors.header", :default => "Invalid Fields")
    options[:message] ||= I18n.t(:"activerecord.errors.message", :default => "Please correct the following problems and try again")
    messages = objects.compact.map { |o| o.errors.full_messages }.flatten
    unless messages.empty?
      content_tag(:div, :class => "alert-message block-message error") do
        list_items = messages.map { |msg| content_tag(:li, msg) }
        content_tag(:h2, options[:header_message], :class=>"bold") + content_tag(:p, options[:message]) + content_tag(:ul, list_items.join.html_safe)
      end
    end
  end

  module FormBuilderAdditions
    def error_messages(options = {})
      @template.error_messages_for(@object, options)
    end
  end

end

ActionView::Helpers::FormBuilder.send(:include, ErrorMessagesHelper::FormBuilderAdditions)

index.html.erb

<h1>Listing <%= plural_table_name %></h1>

<table>
  <thead>
    <tr>
      <% attributes.each do |attribute| -%>
        <th><%= attribute.human_name %></th>
      <% end -%>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
      <tr>
        <% attributes.each do |attribute| -%>
          <td><%%= <%= singular_table_name %>.<%= attribute.name %> %></td>
        <% end -%>
        <td>
          <%%= link_to 'Show', <%= singular_table_name %>, :class=>"btn" %>
          <%%= link_to 'Edit', edit_<%= singular_table_name %>_path(<%= singular_table_name %>), :class=>"btn" %>
          <%%= link_to 'Destroy', <%= singular_table_name %>, <%= key_value :confirm, "'Are you sure?'" %>, <%= key_value :method, ":delete" %>, :class=>"btn" %>
        </td>
      </tr>
    <%% end %>
  </tbody>
</table>

<div class="actions">
  <%%= link_to 'New <%= human_name %>', new_<%= singular_table_name %>_path, :class=>"btn" %>
</div>

libtemplateserbscaffold_form.html.erb

<%%= simple_form_for(@<%= singular_table_name %>, :wrapper => :inline) do |f| %>
  <%%= f.error_notification %>

  <div class="inputs">
  <%- attributes.each do |attribute| -%>
    <%%= f.<%= attribute.reference? ? :association : :input %> :<%= attribute.name %> %>
  <%- end -%>
  </div>

  <div class="actions">
    <%%= f.button :submit %>
  </div>
<%% end %>

libtemplateserbscaffoldindex.html.erb

<h1>Listing <%= plural_table_name %></h1>

<table>
  <thead>
    <tr>
      <% attributes.each do |attribute| -%>
        <th><%= attribute.human_name %></th>
      <% end -%>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    <%% @<%= plural_table_name %>.each do |<%= singular_table_name %>| %>
      <tr>
        <% attributes.each do |attribute| -%>
          <td><%%= <%= singular_table_name %>.<%= attribute.name %> %></td>
        <% end -%>
        <td>
          <%%= link_to 'Show', <%= singular_table_name %>, :class=>"btn" %>
          <%%= link_to 'Edit', edit_<%= singular_table_name %>_path(<%= singular_table_name %>), :class=>"btn" %>
          <%%= link_to 'Destroy', <%= singular_table_name %>, <%= key_value :confirm, "'Are you sure?'" %>, <%= key_value :method, ":delete" %>, :class=>"btn" %>
        </td>
      </tr>
    <%% end %>
  </tbody>
</table>

<div class="actions">
  <%%= link_to 'New <%= human_name %>', new_<%= singular_table_name %>_path, :class=>"btn" %>
</div>

libtemplateserbscaffoldshow.html.erb

<%%= show_for @<%= singular_name %> do |s| %>
<% attributes.each do |attribute| -%>
  <%%= s.<%= attribute.reference? ? :association : :attribute %> :<%= attribute.name %> %>
<% end -%>
<%% end %>

<div class="actions">
  <%%= link_to 'Edit', edit_<%= singular_name %>_path(@<%= singular_name %>), :class=>"btn" %>
  <%%= link_to 'Back', <%= plural_name %>_path, :class=>"btn" %>
</div>

show.html.erb

<%%= show_for @<%= singular_name %> do |s| %>
<% attributes.each do |attribute| -%>
  <%%= s.<%= attribute.reference? ? :association : :attribute %> :<%= attribute.name %> %>
<% end -%>
<%% end %>

<div class="actions">
  <%%= link_to 'Edit', edit_<%= singular_name %>_path(@<%= singular_name %>), :class=>"btn" %>
  <%%= link_to 'Back', <%= plural_name %>_path, :class=>"btn" %>
</div>

simple_form.rb

SimpleForm.setup do |config|

  config.wrappers :inline, :class => 'clearfix', :error_class => :error do |b|
    b.use :placeholder
    b.use :label
    b.use :tag => 'div', :class => 'input' do |ba|
      ba.use :input
      ba.use :error, :tag => :span, :class => :'help-inline'
      ba.use :hint,  :tag => :span, :class => :'help-block'
    end
  end

  config.wrappers :stacked, :class => "clearfix", :error_class => :error do |b|
    b.use :placeholder
    b.use :label
    b.use :hint,  :tag => :span, :class => :'help-block'
    b.use :tag => 'div', :class => 'input' do |input|
      input.use :input
      input.use :error, :tag => :span, :class => :'help-inline'
    end
  end

  # Method used to tidy up errors.
  # config.error_method = :first

  # Default tag used for error notification helper.
  config.error_notification_tag = :div

  # CSS class to add for error notification helper.
  config.error_notification_class = :"alert-message block-message error"

  # ID to add for error notification helper.
  # config.error_notification_id = nil

  # You can wrap a collection of radio/check boxes in a pre-defined tag, defaulting to none.
  # config.collection_wrapper_tag = nil

  # You can wrap each item in a collection of radio/check boxes with a tag, defaulting to span.
  # config.item_wrapper_tag = :span

  # Series of attempts to detect a default label method for collection.
  # config.collection_label_methods = [ :to_label, :name, :title, :to_s ]

  # Series of attempts to detect a default value method for collection.
  # config.collection_value_methods = [ :id, :to_s ]

  # How the label text should be generated altogether with the required text.
  config.label_text = lambda { |label, required| "#{label} #{required}" }

  # You can define the class to use on all labels. Default is nil.
  # config.label_class = nil

  # You can define the class to use on all forms. Default is simple_form.
  # config.form_class = :simple_form

  # Whether attributes are required by default (or not). Default is true.
  # config.required_by_default = true

  # Tell browsers whether to use default HTML5 validations (novalidate option).
  # Default is enabled.
  config.browser_validations = false

  # Determines whether HTML5 types (:email, :url, :search, :tel) and attributes
  # (e.g. required) are used or not. True by default.
  # Having this on in non-HTML5 compliant sites can cause odd behavior in
  # HTML5-aware browsers such as Chrome.
  # config.html5 = true

  # Custom mappings for input types. This should be a hash containing a regexp
  # to match as key, and the input type that will be used when the field name
  # matches the regexp as value.
  # config.input_mappings = { /count/ => :integer }

  # Collection of methods to detect if a file type was given.
  # config.file_methods = [ :mounted_as, :file?, :public_filename ]

  # Default priority for time_zone inputs.
  # config.time_zone_priority = nil

  # Default priority for country inputs.
  # config.country_priority = nil

  # Default size for text inputs.
  # config.default_input_size = 50

  # When false, do not use translations for labels, hints or placeholders.
  # config.translate = true

  # Default class for buttons
  config.button_class = 'btn'
end