Skip to content

Instantly share code, notes, and snippets.

@lucapette

lucapette/application.css

Created October 19, 2011 22:20
Show Gist options
  • Save lucapette/1299857 to your computer and use it in GitHub Desktop.
Save lucapette/1299857 to your computer and use it in GitHub Desktop.
Download ZIP
twitter bootstrap rails 3.1 notes
Raw
_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 %>
Raw
_footer.html.erb
<p>Footer</p>
Raw
_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 %>
Raw
_header.html.erb
<h1>Header</h1>
Raw
_menu.html.erb
<ul class="nav">
<li><%= link_to "Home", root_path %></li>
</ul>
Raw
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;
}
Raw
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>
Raw
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)
Raw
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>
Raw
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>
Raw
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
@jurre
Copy link

jurre commented Dec 30, 2011

Very nice! may a propose adding a close button to all the flashes? so we can change the flashes partial like:

  <div class="alert-message info">
    <a class="close" href="#">×</a>
    <%= content_tag :div, flash[:notice] %>
  </div>
<% end %>

and add 3 lines of coffeescript:

$(document).ready ->
    $(".close").click ->
        $(".alert-message").fadeOut 1000, ->

@lucapette
Copy link
Author

@jurre I'm glad you liked it! By the way, altought your suggestion it really nice, there's a "twitter bootstrap way" of doing it. Here there is a good explanation of how to achieve it. And it's ridiculously simple :)

@felixrabe
Copy link

Updated link for the bootstrap alerts: http://twitter.github.com/bootstrap/javascript.html#alerts

@lucapette
Copy link
Author

@felixrabe thank you! I've updated the link.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment