Adding Twitter Bootstrap to Rails (part 1)

Man i love me some Twitter Bootstrap. It’s the bomb. I don’t care if you convert or not. It’s mine. Thhhhpppppppttttt!!!! Jog off …

Still here? Awesome! ūüėÄ

If you’ve been reading along so far (i’m obviously talking to myself now …) you know that i have been implementing the Depot example from Agile Web Development with Rails (4th ed.) and i have been very excited about Ruby on Rails in general. But i ran into a snag when trying to replace the author’s stylesheet declarations with the ones used by Twitter Bootstrap. The author selected class names based from the¬†default Rails form helpers — the default Rails form helpers DO NOT conform to Bootstrap. I realize now that there are better form builder gems “on the market” but i did not realize such initially, as most newbies wouldn’t. ūüėČ

But rather than jumping ahead, why not share the journey of discovery? So here goes:

I wrapped up Chapter 7 and decided to backtrack to the beginning of the chapter and go about jabronying Twitter Bootstrap (TB) into the mix. The first step was to download the requisite TB files and move them into the respective directories inside app/assets/ and then modify app/views/layouts/application.html.erb to include them … only to discover that the existing code would automatically include the TB files for me:

The files, however, are listed in the generated output in alphabetical order which will break TB components that require jQuery but since i wasn’t using any components that required jQuery (yet …) i would deal with that … later … (Such issues sometimes resolve themselves with enough time.)

The next step was emptying all lines from app/assets/stylesheets/scaffolds.css.scss so that any generated class and id names would no longer work. Then i went back to app/views/layouts/application.html.erb and modified it to wrap a nice two-column fluid layout around the call to <tt>yield()</tt>:

Piece of cake! Now my pages were wrapped in a column and i have a placeholder for adding a left-side vertical menu later.

The next step was to modify the generated form and validation errors. I was able to modify app/views/products/_form.html.erb and easily change the existing <div> class names to those that would work with TB, but changing the <form> class name proved to be a bit more tricky:

but nothing out of the question. From here, getting the rest of the ERB tags to emit definitions and values for the class, id, for and placeholder attributes used by TB was straightforward and dare i say intuitive. Firstly, it was very easy to wrap the error summary into a dismissible error alert message:

And with some digging around in various online documentation and forum Q&A search hits i was able to emit the proper things to produce a nicely aligned horizontal form:

But it all came crashing down once i tested the validation error display. The problem was something else was wrapping a <div> tag around both the offending form element label and input control and was controlling the class name which needed to be changed. After digging around i found what seemed to be the best solution, but i was not convinced. The solution was to add the following line to config/application.rb:

This does mostly work but now we have¬†presentation logic mixed into the configuration of the¬†view action handler.¬†There has to be a better way, and there is! But first, why doesn’t that solution completely work for me? Well, the reason is because even though i now have my desired class name, the handler wraps <div> blocks around the label and the input … and that breaks the horizontal alignment of the offending controls. (See image.)

Sure, you may not mind it but the $Client is surely going to sooner or later. Plus, the placement of the solution itself is totally unideal. What if there was a way to build in TB support like with a magical gem or something … turns out there is …

to be continued …