twitter bootstrap - What is a best way to customize Bootstrap3 in Rails? -

twitter bootstrap 3 has been released recently. we're going use in new project , customize fit our needs.

here're few issues came across in past 2 projects.

• as tb written less took time unless there reliable sass version
• working unstable sass version found out styles imported more once - perhaps due old sass bug includes same files more once
• we could't make 'include-once' workaround work sass version gem
• we figured out best can build tb builder but…
• it requires lot of work on our part simple modifications e.g customizing navbar can't override default variables

we looking solution make customizing bootstrap less problematic. experience? strategy use? have tried use tb3 in rails(4)?

one of options use jlong's sass implementation. follow these steps setting bootstrap3 work rails 4 (this way of doing it, @ answer , checkout project well.)

step 1: download zip jlongs repo.

step 2: unzip file , copy contents of lib folder.

step 3: go rails4 vendor/assets/stylesheets folder , make folder , call bootstrap. paste bootstrap folder copied second ago. folder this:

also copy fonts folder extracted zip file downloaded repo , add vendor/assets/stylesheets folder:

step 4: go app/assets/stylesheets folder , make file , call whatever, example main.scss , add following it:

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

step 5: start overriding bootstrap using file. 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 !