What is a best way to customize Bootstrap3 in Rails?

Question

Twitter Bootstrap 3 has been released recently. We're going to use in a new project and customize it to fit our needs.

Here're a few issues we came across in the past 2 projects.

• as TB is written with LESS it will took some time unless there is a reliable SASS version
• working with unstable SASS version we found out that styles were imported more than once - this is perhaps due to the old SASS bug that includes the same files more than once
• we could't make 'include-once' workaround work with SASS version from the gem
• we figured out that the best what we can do is build TB from the builder but…
• it requires a lot of work on our part just to do simple modifications like e.g customizing navbar as we can't just override the default variables

We are looking for a solution that would make customizing Bootstrap less problematic. What is your experience? What strategy do you use? Have you tried to use TB3 in Rails(4)?

Answer 1

One of your options is to use jlong's sass implementation. Follow these steps for setting up Bootstrap3 to work with Rails 4 (this is my way of doing it, also look at this answer and also checkout this project as well.)

Step 1: Download the zip from jlongs repo.

Step 2: unzip the file and copy all the contents of the lib folder.

Step 3: Go to your rails4 vendor/assets/stylesheets folder and make a folder and call it bootstrap. Now paste to this bootstrap folder what you copied a second ago. So your folder will look like this:

Also copy the fonts folder from the extracted zip file you downloaded from the repo and add it to your vendor/assets/stylesheets folder:

Step 4: Go to your app/assets/stylesheets folder and make a file and call it whatever, for example main.scss and add the following to it:

@import "../../../vendor/assets/stylesheets/bootstrap/bootstrap.scss";

Step 5: Start overriding bootstrap using this file. For example:

@import "../../../vendor/assets/stylesheets/bootstrap/bootstrap.scss";
$grid-columns:              16;
$grid-gutter-width:         2px;
.left{
    @include make-lg-column(8);
}
.right{
    @include make-lg-column(8);
}

section{
    @include make-row();
}

Sample HTML file: (for example about.html.erb)

<div class="container">
  <sction>
    <div class="left">
      <div class="well">
        <h1>hello</h1>
      </div>
    </div>
    <div class="right">
      <div class="well">
        <h1>hello</h1>
      </div>
    </div>
  </section>

</div>

Results

Step 6 (optional): Happy railstrapping !