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:
|
|
<%= stylesheet_link_tag "application", :media => "all" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> |
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>:
|
|
<div class="container-fluid"> <div class="row-fluid"> <div class="span2"> <!--Sidebar content--> </div> <div class="span10"> <%= yield %> </div> </div> </div> |
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:
|
|
<%= form_for( @product, :html => { :class => "form-horizontal" } ) do |f| %> |
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:
|
|
<% if @product.errors.any? %> <div class="alert alert-error"> <button type="button" data-dismiss="alert">×</button> <h2><%= pluralize(@product.errors.count, "error") %> prohibited this product from being saved:</h2> <ul> <% @product.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<div class="control-group"> <%= f.label :title, :class => 'control-label', :for => 'input_title' %> <div class="controls"> <%= f.text_field :title, :id => 'input_title', :placeholder => 'Title' %> </div> </div> <div class="control-group"> <%= f.label :description, :class => 'control-label', :for => 'input_description' %> <div class="controls"> <%= f.text_area :description, :id => 'input_description', :placeholder => 'Description', rows: 6 %> </div> </div> <div class="control-group"> <%= f.label :image_url, 'Image URL', :class => 'control-label', :for => 'input_image_url' %> <div class="controls"> <%= f.text_field :image_url, :id => 'input_image_url', :placeholder => 'Image URL' %> </div> </div> <div class="control-group"> <%= f.label :price, :class => 'control-label', :for => 'input_price' %> <div class="controls"> <%= f.text_field :price, :id => 'input_price', :placeholder => 'Price' %> </div> </div> <div class="control-group"> <div class="controls"> <%= f.button :class => 'btn' %> </div> </div> |
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:
|
|
config.action_view.field_error_proc = Proc.new { |html_tag, instance| "<div class='control-group error'>#{html_tag}</div>".html_safe } |
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 ... 