The Ruby world moves at an astounding pace. Pat Shaughnessy wrote an excellent series of articles in December 2011 documenting the options avaliable for using Twitter’s Bootstrap framework version 1.3 with Rails 3.1. At the time of writing Bootstrap has moved onto version 2.0, Rails is on 3.2.1 and Pat’s example application no longer builds as described.
A Slight Digression
In the rest of this post I’ll explain what little needs to be done if you’d like to follow those articles but use Rails 3.2 and Bootstrap 2.0, but first a quick digression on Bootstrap.
For the visually inept and graphically challenged amongst us, a set of professional and consistent design elements is a God-send. I’ve been using Perl (CGI.pm through to the later frameworks) and Rails since version 1.x to generate front-ends and dashboards and the like for all sorts of Infrastructure and traditional sysadmin tasks.
It just so happens that the Devops world follows, in part, the same route: assuming that system administrators can develop something other than shell script splattered with global variables, adopting Ruby the language from which the most prominent tools are built, and absorbing a huge amount from the Rails world: be it RESTful web services, rapid development or DRY. So, it is nice to finally be able to produce tools that look nice if for no other reason than quite often some fantastic operational work is trivialized and missed as it’s fronted by a bunch of crap in cgi-bin spitting out table elements.
Digression over, here’s what you need to do.
cgunther has kindly done the hard work in getting mjbellantoni’s formtastic-bootstrap working with Bootstrap 2.0 in his bootstrap2-rails3-2-formtastic-2-1 branch. However, it requires the 2.1 version of formtastic, which is still in rc at the time of writing. However, the following in your Gemfile should do it:
gem 'formtastic', :git => 'git://github.com/justinfrench/formtastic.git', :branch => '2.1-stable' gem 'formtastic-bootstrap', :git => 'https://github.com/cgunther/formtastic-bootstrap.git', :branch => 'bootstrap2-rails3-2-formtastic-2-1'
Also, when editing your ./app/views/layouts/application.html.erb you should use the new Bootstrap 2.0 classes:
<body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="brand" href="#">OrigamiHub</a> <div class="nav-collapse"> <%= tabs %> </div> </div> </div> </div> <div class="container"> <%= yield %> </div> </body>
Finally, you should heed the formtastic deprecation options, and construct your semantic forms thus:
<%= semantic_form_for @widget do |f| %> <%= f.semantic_errors %> <%= f.inputs do %> <%= f.input :name, :hint => "The wangdoodle is a best-seller" %> <%= f.input :type, :hint => "We only do three sizes!" %> <% end %> <%= f.actions do %> <%= f.action(:submit) %> <% end %> <% end %>
You’ll need to use the:
config.tabs_ul_class = "nav nav-pills"
option within tabulous to get the navigation bar to behave properly, along with the options recommended in the original article.
I’m sure the work above will be merged back into the mainline for each of the respective gems, and it’s a tribute to the community of github that such a lot of good work is given and fixed freely.
Use the following link to trackback from your own site: