bootstrap2-rails gem

This gem works only with Rails > 3.0.

This gem replaces Rails default scaffold to create views based on Bootstrap 2, from Twitter (twitter.github.com/bootstrap). There is also a toast message feature using JQuery Toast Message plugin.

When installed, this gem overrides Rails default scaffold templates, which means that any call to scaffold generator will use the gem templates. The views also are generated with some others features like search and sort. There is also a dropdown menu generator to avoid manual menu creation.

Installation

Include this line inside your Gemfile:

gem 'bootstrap2-rails'

Run the bundle command to install required gems in your Rails application:

bundle

Updating files

After installing gem, run the install generator to update some needed files (caution: it will update application.html.erb)

rails generate bootstrap:install

Important: Rails default scaffold.css file overrides some CSS styles. So delete scaffold.css file or clean it up to correct working of Bootstrap stylesheets, otherwise you layout will be messy.

Toast messages

Toast messages are notifications with an android-like visual. There are 4 types of toast messages: error, warning, notice and success.

To show a toast message use this helper method

display_toast_message(message, type)

where message is the message text and type is one of the four types of messages (notice, error, success or warning). Usage example:

<%= display_toast_message('hello workd', 'notice') %>

Menu generator

The menu generator creates a menu bar for your controller actions. There are two steps needed for creating a menu:

1) Define which items and subitems will be available. In a dropdown menu there is a main item and several subitems. You can also put a separator between subitems. The main item is only a text explaining the content (e.g. File, Window, Tools). The subitems are controller actions (e.g. New, Save, Close). To define the main item and corresponding subitems you need to use MenuBar and MenuDropdown classes. For example:

# Creates a MenuBar instance
menu = MenuCreator::MenuBar.new

# Define project name that will be displayed on left side
menu.project = {caption: "Project name", controller: "index", action: "index"}

# Create a dropdown menu with 3 subitems and one separator on left side
dropdown1 = MenuCreator::MenuDropdown.new
dropdown1.position = :left
dropdown1.caption = "Dropdown 1"
dropdown1.subitems << {caption: "subitem 1", controller: "index", action: "index"}
dropdown1.subitems << {caption: "subitem 2", controller: "index", action: "index"}
dropdown1.subitems << "---"
dropdown1.subitems << {caption: "subitem 3", controller: "index", action: "index"}
menu.add_dropdown dropdown1

# Create a dropdown menu with 3 subitems and one separator on right side
dropdown2 = MenuCreator::MenuDropdown.new
dropdown2.position = :right
dropdown2.caption = "Dropdown 2"
dropdown2.subitems << {caption: "subitem 1", controller: "index", action: "index"}
dropdown2.subitems << {caption: "subitem 2", controller: "index", action: "index"}
dropdown2.subitems << "---"
dropdown2.subitems << {caption: "subitem 3", controller: "index", action: "index"}
menu.add_dropdown dropdown2

# Set menu to MenuCreator
MenuCreator.set_menu menu

Note that you have to define the caption, the controller and the action to each subitem otherwise the menu will not work. Each subitem will be turned to a link.

2) Include a menu_bar call in your html page:

<%= menu_bar %>