Twitter-Bootstrap in Rails 3.2.3

Question

Has anybody used twitter bootstrap and deployed application in production? Can you direct me to some resources? I watched railscasts but if there are any blogs which gives detail explanation. Are there any other option for frontend other than twitter bootstrap? Also, is there any javascript option?

Answer 1

I enjoyed reading this Articles from Ruby Source:

http://rubysource.com/twitter-bootstrap-less-and-sass-understanding-your-options-for-rails-3-1/

http://rubysource.com/how-to-customize-twitter-bootstrap%E2%80%99s-design-in-a-rails-app/

Also, if you just want to customize the look of TB, check http://stylebootstrap.info/

Here is a huge list of bootstrap extensions / plugins: http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources

Answer 2

Here's the thing: Bootstrap is not a front-end. It is a way to get started on the design of your site by creating a decent-looking starting point. It is mainly CSS (well, LESS) with a few optional JavaScript additions to add extra UI functionality.

If you're actually interested in building a front end to a Rails app, you may be interested in Backbone.js . Backbone is a way to link up your HTML DOM with your data (from Rails), and is great for single-page apps which don't require page refreshes every time you do anything. A good starting place for learning Backbone is Code School's Anatomy of Backbone tutorials. Coincidentally, Code School also offer many other courses you might like.

Answer 3

To link CSS and JavaScripts to your view, you can use Asset Tag Helpers .

As an example:

<%= javascript_include_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap" %>

would generate tags linking to bootstrap.js and bootstrap.css , if those are the names of the files.

javascript_include_tag pulls scripts relative to app/assets/javascripts
stylesheet_link_tag pulls stylesheets relative to app/assets/stylesheets

If you want to reference a file in a directory structure (ie assets are not in the root of the above folders), you can link relative to those root folders:

<%= javascript_include_tag "/bootstrap/bootstrap-min" %>
<%= stylesheet_link_tag "/bootstrap/bootstrap" %>

These tags would reference app/assets/javascripts/bootstrap/bootstrap-min.js and app/assets/stylesheets/bootstrap/bootstrap.css .

To apply styles, you would then use the stylesheet classes and ids in bootstrap.css. For instance, the button to fork Twitter's bootstrap looks like

<a href="https://github.com/twitter/bootstrap/" 
   class="btn btn-primary btn-large">View project on GitHub</a>

You would use a URL Helper :

<%= link_to "View project on GitHub", 
             "https://github.com/twitter/bootstrap/", 
             :class => "btn btn-primary btn-large" %>

edit:

If you are looking at the code on Github and confused about the .less extension, that is because Bootstrap uses a CSS generation framework called Less. You'll need to run make bootstrap and be sure you have lessc installed. Or, you can download the already compiled framework here .