How to incorporate a (static) bootstrap template into rails asset pipeline?

Question

I'm making a homepage with twitter bootstrap, rails 3.2.1 and twitter-bootstrap-rails gem (https://github.com/seyhunak/twitter-bootstrap-rails).

Wanted to try a different look other than the classic twitter one and found a great template called "United" from bootswatch.com.

I downloaded four files (bootstrap.css / bootstrap.min.css / variables.less / bootswatch.less) .

How can I incorporate these files into the asset pipeline?

Here is the listing from my 'app/assets' directory (the files are generated by twitter-bootstrap-rails gem).

/images/rails.png
/javascripts/application.js
/javascripts/bootstrap.js.coffee
/javascripts/products.js.coffee
/stylesheets/application.css
/stylesheets/bootstrap_and_overrides.css.less

I have no clue.

I placed the downloaded "United" bootstrap*.css files into the app/assets/stylesheets and deleted app/assets/stylesheets/bootstrap_and_overrides.css.less. It works, but I know it's crude. :-( — Kichang Yang

Andrea Pavoni Andrea Pavoni · Accepted Answer · 2012-03-29T09:53:38

I use the same gem (bootstrap-sass-rails) and sometimes I download custom themes from bootswatch. My approach is pretty simple:

I only download the variables.less file, I check which variables I need (colors, fonts, etc..), then I convert them to SCSS syntax
AFTER the variables defined above, I use SCSS syntax (instead of //= require ) to require bootstrap components (you usually don't need all the bundle)

here's a quick example:

// Navbar
$navbarBackground:                #DD4814;
$navbarBackgroundHighlight:       #CE4213;
// other vars...

@import "twitter/bootstrap/variables";
@import "twitter/bootstrap/mixins";
@import "twitter/bootstrap/reset";
@import "twitter/bootstrap/scaffolding";
@import "twitter/bootstrap/grid";
@import "twitter/bootstrap/layouts";
// etc...

this way you'll end with a smaller CSS and more ways to customize it.

How to incorporate a (static) bootstrap template into rails asset pipeline?

3 Answers